Настройка eslint-plugin-import для нового eslint 9 версии

Содержание:

• Почему решил написать эту статью?

• Решение проблемы

• Итоговый код

• Исходники

• Версионность

Почему решил написать эту статью?

Привет. Пишу статью, т.к. не нашёл информации по этой теме. А всё, что нашел - раскидано по разным местам. Здесь будет вся инфа для запуска плагина. Это первый опыт написания для меня, так что имеем, что имеем.))

Как я вообще докатился до 9 версии...
На сайте https://eslint.org/team/ пишут, что прекратится поддержка ESLint v8.x, а так же прекратится поддержка NodeJs < 19 версии. Так что решил сразу юзать v9.x с костылями для плагинов, которые еще не могут в поддержку 9го линтера.

Статья подразумевает, что вы уже юзаете 9ую версию, поставили доступные плагины и всё такое, хотя по итоговому коду будет понятно, как это всё работает.

На всякий случай пишу, что для 9 линтера нужен 20+ NodeJs)))
В самом конце статьи есть версионность стека, возможно, стоит от туда начать, чтоб потом не оказалось, что нужно переписать много тыщ строк кода после обновления зависимостей, ради одного линтера.

Решение проблемы

Итак, у вас уже установлен ESLint v9.x, так же установлен ТС для линтера, всякие типы и прочее, что ставится автоматически при установке линтера.

К зависимостям нужно добавить еще 2 пакета:

• https://www.npmjs.com/package/@eslint/compat

• https://www.npmjs.com/package/@eslint/eslintrc

На момент написания статьи юзаю compat v1.1.1, eslintrc v3.1.0

И так же добавить два импорта:

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

Итоговый код

Весь код пишется в файле eslint.config.mjs, а не в eslint.json или eslint.config.js, однако вы можете указать свой формат. В доке пишут, что приоритет наивысший у .js и .mjs и имеет смысл их использовать. А .mjs нужен для корректной работы, поэтому не .js, хотя это тоже всё настраивается, если есть желание.

Этот код немного отличается от того, что было в исходнике, т.к. пока писал - тестил правила линтера, (в статье их нет, для меньшего количества кода).

Так же добавлена пара новых импортов.

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, }],
        },
    },
);

19 - 27 строки - это и есть реализация работы с неподдерживаемыми плагинами. Всё что ниже - новая настройка линтера.

Исходники

Основную проблему решил парень https://github.com/JoseLion

legacyPlugin - его доработки. Я допилил его решение до рабочего для себя, т.к. простым копипастом это не решилось. Кто бы мог подумать.

Исходник кода здесь.
https://github.com/import-js/eslint-plugin-import/issues/2948

Версионность

"@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

Буду рад, если статья поможет хотя бы одному человеку!