ESLintの設定をFlatConfigに移行する
ESLint v8.21.0 から設定ファイルの形式に Flat Configulation File が追加された 従来の .eslintrc や .eslintrc.js .eslintrc.json などとは異なり非互換の構造に変化しているが、引き換えとして、単一のオブジェクトで設定が表現され、読み込んでいる設定の依存関係が明確になるなど、今後の利用者がより理解しやすく再利用しやすい形式となっている
元の設定
移行後の設定は可能な限り近い動作になるように記載する。
code:.eslintrc
{
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint"
],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"prettier",
"plugin:storybook/recommended"
]
}
移行後の設定
モジュール解決が JavaScript 標準の仕組みになっているので import の記載が必要になる。
このタイミングで暗黙に依存しているモジュールがいくつか明らかになるので依存の明示できるようになる。
extends は rules に継承元のルールを Spread Operator で展開する形で再現できる。
(もう少し簡略に書く方法もあるが並びを同じにしたかったのでこの方法を採用した)
code:eslint.config.js
import eslintJs from "@eslint/js";
import typescriptEslintParser from "@typescript-eslint/parser";
import typescriptEslint from "@typescript-eslint/eslint-plugin";
import eslintConfigPrettier from "eslint-config-prettier";
import eslintPluginStorybook from "eslint-plugin-storybook";
import globals from "globals";
export default [
{
languageOptions: {
globals: { ...globals.browser },
parser: typescriptEslintParser,
},
plugins: { "@typescript-eslint": typescriptEslint },
rules: {
...eslintJs.configs.recommended.rules,
...typescriptEslint.configs.recommended.rules,
...eslintConfigPrettier.rules,
...eslintPluginStorybook.configs.recommended.rules,
},
},
];
関連