はじめに
ESLint v8.21.0 から追加された Flat Config。
ESLint v9 から Flat Config がデフォルトとして扱われるようになりました。
ESLint v9 で従来の legacy ESLint configuration file format を使いたい場合は、 ESLINT_USE_FLAT_CONFIG を false に設定すれば利用可能ですが、 @eslint/migrate-config を利用すれば、簡単に移行することができます。
## 注意
@eslint/migrate-config は 2024/11 時点以下のファイルフォーマットのみ対応しています。
- eslintrc
- eslintrc.json
- eslintrc.yml
.eslintrc.js, .eslintrc.cjs, .eslintrc.mjs でも移行することはできますが、完全に移行できないことに注意する必要があります。
使用方法
npx を利用すればパッケージを追加せず利用することが可能です。
npx @eslint/migrate-config .eslintrc.json
移行検証
いくつか @eslint/migrate-config を利用して移行してみました。
remix-run/remix/templates/remix
remix-run/remix/templates/remix 内の templates/remix/.eslintrc.cjs を移行してみます。
> npx @eslint/migrate-config .eslintrc.cjs
Need to install the following packages:
@eslint/migrate-config@1.3.3
Ok to proceed? (y) y
Migrating .eslintrc.cjs
WARNING: This tool does not yet work great for .eslintrc.(js|cjs|mjs) files.
It will convert the evaluated output of our config file, not the source code.
Please review the output carefully to ensure it is correct.
Wrote new config to ./eslint.config.mjs
You will need to install the following packages to use the new config:
- globals
- @eslint/compat
- @eslint/js
- @eslint/eslintrc
You can install them using the following command:
npm install globals @eslint/compat @eslint/js @eslint/eslintrc -D
.eslintrc.cjs から eslint.config.mjs が生成されました。
また、 console に記載されている通り、 globals 等のパッケージを追加する必要があります。
移行前のファイル
移行後のファイル
eslint.config.mjs
import globals from "globals";
import { fixupConfigRules, fixupPluginRules, fixupConfigRules } from "@eslint/compat";
import react from "eslint-plugin-react";
import jsxA11Y from "eslint-plugin-jsx-a11y";
import typescriptEslint from "@typescript-eslint/eslint-plugin";
import _import from "eslint-plugin-import";
import tsParser from "@typescript-eslint/parser";
import path from "node:path";
import { fileURLToPath } from "node:url";
import js from "@eslint/js";
import { FlatCompat } from "@eslint/eslintrc";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
baseDirectory: __dirname,
recommendedConfig: js.configs.recommended,
allConfig: js.configs.all
});
export default [{
ignores: ["!**/.server", "!**/.client"],
}, ...compat.extends("eslint:recommended"), {
languageOptions: {
globals: {
...globals.browser,
...globals.commonjs,
},
ecmaVersion: "latest",
sourceType: "module",
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
},
}, ...fixupConfigRules(compat.extends(
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:react-hooks/recommended",
"plugin:jsx-a11y/recommended",
)).map(config => ({
...config,
files: ["**/*.{js,jsx,ts,tsx}"],
})), {
files: ["**/*.{js,jsx,ts,tsx}"],
plugins: {
react: fixupPluginRules(react),
"jsx-a11y": fixupPluginRules(jsxA11Y),
},
settings: {
react: {
version: "detect",
},
formComponents: ["Form"],
linkComponents: [{
name: "Link",
linkAttribute: "to",
}, {
name: "NavLink",
linkAttribute: "to",
}],
"import/resolver": {
typescript: {},
},
},
}, ...fixupConfigRules(compat.extends(
"plugin:@typescript-eslint/recommended",
"plugin:import/recommended",
"plugin:import/typescript",
)).map(config => ({
...config,
files: ["**/*.{ts,tsx}"],
})), {
files: ["**/*.{ts,tsx}"],
plugins: {
"@typescript-eslint": fixupPluginRules(typescriptEslint),
import: fixupPluginRules(_import),
},
languageOptions: {
parser: tsParser,
},
settings: {
"import/internal-regex": "^~/",
"import/resolver": {
node: {
extensions: [".ts", ".tsx"],
},
typescript: {
alwaysTryTypes: true,
},
},
},
}, {
files: ["**/.eslintrc.cjs"],
languageOptions: {
globals: {
...globals.node,
},
},
}];
実行完了後に移行前のファイル .eslintrc.cjs は手動で削除してください。
rm .eslintrc.cjs
mziyut/honkit-plugin-prism
mziyut/honkit-plugin-prism の .eslintrc も移行してみます。
https://github.com/mziyut/honkit-plugin-prism/blob/main/.eslintrc
> npx @eslint/migrate-config .eslintrc
Migrating .eslintrc
Wrote new config to ./eslint.config.mjs
You will need to install the following packages to use the new config:
- @eslint/js
- @eslint/eslintrc
You can install them using the following command:
npm install @eslint/js @eslint/eslintrc -D
移行前のファイル
.eslintrc
---
extends: eslint-config-semistandard
rules:
padded-blocks: 0
space-before-function-paren: 0
移行後のファイル
eslint.config.mjs
import path from "node:path";
import { fileURLToPath } from "node:url";
import js from "@eslint/js";
import { FlatCompat } from "@eslint/eslintrc";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
baseDirectory: __dirname,
recommendedConfig: js.configs.recommended,
allConfig: js.configs.all
});
export default [...compat.extends("eslint-config-semistandard"), {
rules: {
"padded-blocks": 0,
"space-before-function-paren": 0,
},
}];
Ref