ESLint plugin

Programmers write instructions for the computer in a programming language. One of the most widely used is called JavaScript and runs on almost every website. Because people make mistakes while doing this, there are checking programs that automatically read through the written text and report problems. The best-known of these checking programs for JavaScript is called ESLint. An ESLint plugin is an add-on package that teaches ESLint new checking rules. The name is often written in lowercase because such add-on packages usually carry names like eslint-plugin-react on the internet.

Why teams need their own checking rules

ESLint already comes with some rules built in. However, these only cover general problems, such as a variable that is created and never used. As soon as a team works with a particular set of tools, these standard rules are no longer enough. Such a set of tools is called a framework, well-known examples being React or Vue. Every framework has its own pitfalls that ESLint does not know about by default.

This is where plugins come in. The package eslint-plugin-react, for example, warns when someone violates a React rule that leads to hard-to-find bugs. Other plugins watch for security vulnerabilities or for accessibility, meaning that a page remains usable for blind users as well. A human would easily overlook such errors when reading through the code.

The second reason is consistency. In a team of twenty people, everyone has their own habits. A shared set of rules ensures that the code looks the same everywhere. This saves discussions and makes unfamiliar code easier to read more quickly.

Rules that read the code as a tree

ESLint does not read the program text like a line of letters. It first breaks it down into a tree structure, similar to how a sentence is broken down into subject, predicate, and object in grammar class. This structure is called a syntax tree. Each branch represents a component of the program, such as a function or a condition.

At its core, a plugin consists of individual rules. Each rule says: report yourself if a particular branch appears in the tree. ESLint runs through the tree once and calls all matching rules along the way. If a rule triggers, a warning appears with a line number and an explanation. Many rules also provide an automatic fix suggestion, which ESLint can apply directly if desired.

A plugin only supplies the rules; it does not turn them on. Which rules apply is specified in a configuration file of the project. This is also where you set whether a violation is merely a warning or aborts the process entirely. Many plugins therefore offer ready-made presets so that you don’t have to decide on a hundred rules individually.

From the editor to AI-assisted code checking

Anyone who programs usually encounters plugins without even noticing. In the editor, red and yellow underlines appear in the code as soon as something is wrong. These markers often come from a plugin. Before every release, the check also runs automatically once more on a server. If it fails, the change is not adopted at all.

In tech news, ESLint plugins mainly come up in two contexts. First, in connection with security incidents: because every project installs dozens of such add-on packages, they are a popular target for attackers who smuggle malicious code into a popular package. Second, in connection with AI assistants that write code themselves. Their output often looks plausible but contains typical errors. A plugin catches many of these before a human reviews them.

One distinction is important: a plugin only checks whether the code is written cleanly. It does not say whether the program actually does the right thing. For that you need tests, i.e., small additional programs that verify the result. A common misconception is confusing ESLint with a formatter like Prettier, which only arranges indentation and line breaks.