Dear Old ESLint

2025-03-28 | 2 min reading

ESLint will soon be 12 and with over 10k commits this package never ends to surprise with parsers, language support, syntax checker, formatter, and over a thousand plugins.

"Lint" refers to a general class of programming tools which analyze source code and raise warnings and errors about it. For example, a linter might raise warnings about syntax errors, uses of undeclared variables, calls to deprecated functions, spacing and formatting conventions, misuse of scope, implicit fallthrough in switch statements, missing license headers, use of dangerous language features, or a variety of other issues.
— Arcanist User Guide: Lint

The identity crisis

Back in the days when we were only stitching JS files and it was easy to break the code with a typo, ESLint had a clear purpose: make your code safe.

But when TypeScript and Prettier appeared ESLint had a little bit of trauma with TypeScript stealing the stage for static analysis and Prettier getting all the attention for formatting.

Luckily ESLint had some aces on its sleeves: the plugins.
In fact, neither TypeScript nor Pretties could compete with ESLint plugins flexibility and granular control.

The Plugins

Speaking of plugins, let’s see some interesting packages.

As syntax checker we have the @typescript-eslint/eslint-plugin and the @eslint/js which comes included in ESlint itself.
These are the one that helps you catch nasty bugs.

While for formatting we have all the stylistic packages: @stylistic/eslint-plugin-js, @stylistic/eslint-plugin-ts, @stylistic/eslint-plugin-jsx and @stylistic/eslint-plugin-plus.
These packages should satisfy all your indentations desires that you deal with js, ts, jsx or tsx.

Instead, if you use specific tools you likely find the related plugin.
For example, see the eslint-plugin-jest, eslint-plugin-storybook, eslint-plugin-jsdocs, eslint-plugin-react to name a few.

Now, while all these plugins are amazing, you can even push further and support your codebase with custom plugins and custom rules.

Do you have always a specific error and people don’t seem to get it?
No problem, you create your custom rules!

Next time they try to make a PR ESLint will be there to save the day.

Integrating lint into your development pipeline has two major benefits:

you can detect and prevent a large class of programming errors; and
you can simplify code review by addressing many mechanical and formatting problems automatically.
— Arcanist User Guide: Lint

Ok, you got me. Where do i start?

Basic install:

// install eslint and create eslint.config.mjs
npm init @eslint/config@latest -- --config eslint-config-standard

// install some plugins
npm i -D @typescript-eslint/eslint-plugin @stylistic/eslint-plugin-js @stylistic/eslint-plugin-ts @stylistic/eslint-plugin-jsx

eslint.config.mjs example

import { defineConfig } from "eslint/config";
import globals from "globals";

import js from "@eslint/js";
import stylisticJs from "@stylistic/eslint-plugin-js";
import stylisticTs from "@stylistic/eslint-plugin-ts";
import parserTs from "@typescript-eslint/parser";

export default defineConfig([
    { files: ["**/*.js"], languageOptions: { globals: globals.browser } },
    { files: ["**/*.js"], plugins: { js }, extends: ["js/recommended"] },
    {
        plugins: {
            "@stylistic/js": stylisticJs,
        },
        rules: {
            "@stylistic/js/indent": ["error", 2],
        }
    },
    {
        plugins: {
            "@stylistic/ts": stylisticTs,
        },
        languageOptions: {
            parser: parserTs,
        },
        rules: {
            "@typescript-eslint/indent": ["error", 2],
            "@stylistic/ts/indent": ["error", 2],
        }
    }
]);

Check the settings
How do you know if your settings are correct?
You use @eslint/config-inspector.

// check config
npx @eslint/config-inspector@latest

Summary

We overviewed some basic plugins for syntax check, formatting and tooling.
Then we got a basic eslint.config.mjs and lastly we saw how to debug the config with npx @eslint/config-inspector@latest.

If you’re interested in the subject, I would recommend reading the core concepts and some rules definitions like @eslint/js, typescript-eslint, @stylistic/js, @stylistic/ts, @stylistic/jsx and explore Awesome ESLint.

Dear Old ESLint

The identity crisis

The Plugins

Ok, you got me. Where do i start?

Summary

Links

Comments