Setting up eslint-plugin-import for new eslint version 9

Content:

Why did you decide to write this article?

Hello. I am writing an article because I did not find any information on this topic. And everything I found is scattered in different places. Here will be all the info for launching the plugin. This is my first experience of writing, so we have what we have.))

How did I even get to version 9…
On the website https://eslint.org/team/ they write that support for ESLint v8.x will cease, and support for NodeJs < version 19 will also cease. So I decided to immediately use v9.x with crutches for plugins that cannot yet support the 9th linter.

The article assumes that you are already using version 9, have installed the available plugins and all that, although the final code will make it clear how it all works.

Just in case, I'm writing that for 9 linter you need 20+ NodeJs)))
At the very end of the article there is stack versioning, perhaps it is worth starting from there, so that later it does not turn out that you need to rewrite many thousands of lines of code after updating dependencies, for the sake of one linter.

Solution to the problem

So, you already have ESLint v9.x installed, as well as the TS for the linter, all sorts of types and other things that are installed automatically when installing the linter.

You need to add 2 more packages to the dependencies:

At the time of writing, I am using compat v1.1.1, eslintrc v3.1.0

And also add two imports:

import { fileURLToPath } from 'url';
import * as path from 'path';

Final code

All code is written in the eslint.config.mjs file, not in eslint.json or eslint.config.js, but you can specify your own format. The docs say that .js and .mjs have the highest priority and it makes sense to use them. And .mjs is needed for correct operation, so not .js, although this is also all configurable, if desired.

This code is slightly different from what was in the source, because while I was writing it, I was testing the linter rules (they are not in the article, for a smaller amount of code).

Also added a couple of new imports.

import { fileURLToPath } from 'url';
import * as path from 'path';

import { fixupPluginRules } from "@eslint/compat";
import { FlatCompat } from "@eslint/eslintrc";
import eslintJs from '@eslint/js';
import eslintTs from 'typescript-eslint';
import eslintReact from "eslint-plugin-react";


const project = "./tsconfig.json";
const filename = fileURLToPath(import.meta.url);
const dirname = path.dirname(filename);
const compat = new FlatCompat({
    baseDirectory: dirname,
    recommendedConfig: eslintJs.configs.recommended,
});

function legacyPlugin(name, alias = name) {
    const plugin = compat.plugins(name)[0]?.plugins?.[alias];

    if (!plugin) {
        throw new Error(`Unable to resolve plugin ${name} and/or alias ${alias}`);
    }

    return fixupPluginRules(plugin);
}

export default eslintTs.config(
    eslintJs.configs.recommended,
    ...eslintTs.configs.recommended,
    ...compat.extends("plugin:import/typescript"),
    {
        languageOptions: {
            parserOptions: {
                project,
                tsconfigRootDir: import.meta.dirname,
            },
        },
        settings: {
            "import/resolver": {
                typescript: {
                    alwaysTryTypes: true,
                    project,
                }
            },
        },
        plugins: {
            react: eslintReact,
            import: legacyPlugin("eslint-plugin-import", "import"),
        },
    },
    {
        rules: {
            "semi": 2,
            "eqeqeq": 2,
            "no-console": 2,
            "react/jsx-first-prop-new-line": [2, 'multiline'],
            "import/order": [2, { "newlines-between": "always", }],
            "import/newline-after-import": [2, { "count": 2, }],
        },
    },
);

Lines 19 – 27 – this is the implementation of work with unsupported plugins. Everything below is a new linter setting.

Sources

The main problem was solved by the guy https://github.com/JoseLion

legacyPlugin – its improvements. I finished its solution to a working one for myself, because a simple copy-paste did not solve it. Who would have thought.

The source code is here.
https://github.com/import-js/eslint-plugin-import/issues/2948

Versioning

"@eslint/compat": "^1.1.1",
"@eslint/eslintrc": "^3.1.0",
"@eslint/js": "^9.9.0",
"@types/eslint__js": "^8.42.3",
"eslint": "^9.9.0",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-react": "^7.35.0",
"typescript": "^5.5.4",
"typescript-eslint": "^8.1.0",
"webpack": "^5.93.0",

NodeJS – 20.16

I will be glad if the article helps at least one person!