ESLint v9への移行
![Hideki Ikemoto](https://res.cloudinary.com/zenn/image/fetch/s--6lDxX-gK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/0524cb26b3.jpeg)
1つのリポジトリで試行。まず eslint-plugin-import
が対応していない。一旦スキップ。
![Hideki Ikemoto](https://res.cloudinary.com/zenn/image/fetch/s--6lDxX-gK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/0524cb26b3.jpeg)
別のリポジトリで試行。
Oops! Something went wrong! :(
ESLint: 9.1.1
Error: Could not find config file.
原因はファイル形式。このリポジトリではJSON形式を使っていたが、JavaScript形式以外の設定がなくなった。なんと。
一旦スキップ。
![Hideki Ikemoto](https://res.cloudinary.com/zenn/image/fetch/s--6lDxX-gK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/0524cb26b3.jpeg)
ESLINT_USE_FLAT_CONFIG=true
を入れればv8のまま新しい形式が試せるということなので、他のリポジトリで試してみる。
まず --ext
オプションがなくなっているので一旦削除。
それからファイル名を .eslintrc.cjs
から eslint.config.cjs
にリネーム(ESM対応は後で)
![Hideki Ikemoto](https://res.cloudinary.com/zenn/image/fetch/s--6lDxX-gK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/0524cb26b3.jpeg)
次はこんなエラーが出た。
> ESLINT_USE_FLAT_CONFIG=true eslint .
Oops! Something went wrong! :(
ESLint: 8.57.0
A config object is using the "env" key, which is not supported in flat config system.
Flat config uses "languageOptions.globals" to define global variables for your files.
Please see the following page for information on how to convert your config object into the correct format:
https://eslint.org/docs/latest/use/configure/migration-guide#configuring-language-options
URLはこれ。
どうやらglobalsというライブラリを入れる必要がありそう。
こうなってたのが、
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
...
}
こうなった(ESM対応は後で)。
const globals = require("globals");
module.exports = {
languageOptions: {
globals: {
...globals.browser,
...globals.es2021,
...globals.node,
},
},
...
}
![Hideki Ikemoto](https://res.cloudinary.com/zenn/image/fetch/s--6lDxX-gK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/0524cb26b3.jpeg)
次はこのエラー。
> ESLINT_USE_FLAT_CONFIG=true eslint .
Oops! Something went wrong! :(
ESLint: 8.57.0
A config object is using the "extends" key, which is not supported in flat config system.
Instead of "extends", you can include config objects that you'd like to extend from directly in the flat config array.
Please see the following page for more information:
https://eslint.org/docs/latest/use/configure/migration-guide#predefined-and-shareable-configs
対応したいが先にESMにする。
-
eslint.config.cjs
→eslint.config.js
にする(すでに"type": "module"
なので) -
module.exports =
→export default
にする -
const globals = require("globals");
→import globals from "globals";
にする
![Hideki Ikemoto](https://res.cloudinary.com/zenn/image/fetch/s--6lDxX-gK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/0524cb26b3.jpeg)
extends
対応したいが、先にArrayにする。
export default {
...
}
これを
export default [
{
...
}
]
とした。エラーの内容は変わらないことを確認済み。
現在のTODOは次の2つ。
-
extends
のエラー -
--ext
がなくなったことに対する対応
![Hideki Ikemoto](https://res.cloudinary.com/zenn/image/fetch/s--6lDxX-gK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/0524cb26b3.jpeg)
このエラーの解消。
> ESLINT_USE_FLAT_CONFIG=true eslint .
Oops! Something went wrong! :(
ESLint: 8.57.0
A config object is using the "extends" key, which is not supported in flat config system.
Instead of "extends", you can include config objects that you'd like to extend from directly in the flat config array.
Please see the following page for more information:
https://eslint.org/docs/latest/use/configure/migration-guide#predefined-and-shareable-configs
このように設定されている。
extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
このうちeslint:recommendedについてはリンク先にあるように、 @eslint/js
を入れて設定。あと@types/eslint__jsも必要そう。
plugin:@typescript-eslint/recommended
についてはtypescript-eslintのGetting Startedにあるように、 typescript-eslint
パッケージを入れて設定。
extendsを削除して、最終的にこうなった。
import eslint from "@eslint/js";
import tseslint from "typescript-eslint";
export default [
eslint.configs.recommended,
...tseslint.configs.recommended,
// 以下既存の設定
];
![Hideki Ikemoto](https://res.cloudinary.com/zenn/image/fetch/s--6lDxX-gK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/0524cb26b3.jpeg)
次はこのエラー。 overrides
は未使用だったので削除。
> ESLINT_USE_FLAT_CONFIG=true eslint .
Oops! Something went wrong! :(
ESLint: 8.57.0
A config object is using the "overrides" key, which is not supported in flat config system.
Flat config is an array that acts like the eslintrc "overrides" array.
Please see the following page for information on how to convert your config object into the correct format:
https://eslint.org/docs/latest/use/configure/migration-guide#glob-based-configs
![Hideki Ikemoto](https://res.cloudinary.com/zenn/image/fetch/s--6lDxX-gK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/0524cb26b3.jpeg)
次はこのエラー。 parser: "@typescript-eslint/parser"
となっているのが原因。ただ先ほどのtypescript-eslintの設定にはなかったので、できているはずと判断して単に消す。
> ESLINT_USE_FLAT_CONFIG=true eslint .
Oops! Something went wrong! :(
ESLint: 8.57.0
A config object is using the "parser" key, which is not supported in flat config system.
Flat config uses "languageOptions.parser" to override the default parser.
Please see the following page for information on how to convert your config object into the correct format:
https://eslint.org/docs/latest/use/configure/migration-guide#custom-parsers
![Hideki Ikemoto](https://res.cloudinary.com/zenn/image/fetch/s--6lDxX-gK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/0524cb26b3.jpeg)
次はこのエラー。
> ESLINT_USE_FLAT_CONFIG=true eslint .
Oops! Something went wrong! :(
ESLint: 8.57.0
A config object is using the "parserOptions" key, which is not supported in flat config system.
Flat config uses "languageOptions.parserOptions" to specify parser options.
Please see the following page for information on how to convert your config object into the correct format:
https://eslint.org/docs/latest/use/configure/migration-guide#configuring-language-options
parserOptions
の内容をそのまま languageOptions
に移せば良さそう。
![Hideki Ikemoto](https://res.cloudinary.com/zenn/image/fetch/s--6lDxX-gK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/0524cb26b3.jpeg)
次はこのエラー。
> ESLINT_USE_FLAT_CONFIG=true eslint .
Oops! Something went wrong! :(
ESLint: 8.57.0
A config object has a "plugins" key defined as an array of strings.
Flat config requires "plugins" to be an object in this form:
{
plugins: {
@typescript-eslint: pluginObject
}
}
Please see the following page for information on how to convert your config object into the correct format:
https://eslint.org/docs/latest/use/configure/migration-guide#importing-plugins-and-custom-parsers
If you're using a shareable config that you cannot rewrite in flat config format, then use the compatibility utility:
https://eslint.org/docs/latest/use/configure/migration-guide#using-eslintrc-configs-in-flat-config
リンク先はこの2つ。下は今回該当しない。
説明を読むと、pluginsでプラグインの実体を読み込み、extendsで設定を読み込むようになっている。 plugins: ["@typescript-eslint", "simple-import-sort"]
と書かれていたが、このうち @typescript-eslint
はすでに設定済みなので削除。 "simple-import-sort" の実体はeslint-plugin-simple-import-sortだが、この対応のみ必要。
ArrayからObjectに変わっているので、こんな感じに設定した。
import simple_import_sort from "eslint-plugin-simple-import-sort";
export default [
...
{
plugins: {
"simple-import-sort": simple_import_sort,
},
}
]
![Hideki Ikemoto](https://res.cloudinary.com/zenn/image/fetch/s--6lDxX-gK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/0524cb26b3.jpeg)
これで動くようになった。 eslint-plugin-simple-import-sort
については動作も確認。
ただ、 @typescript-eslint/ban-types
@typescript-eslint/no-explicit-any
のエラーがたくさん出るようになった。
recommendedの設定を見ると、新旧で使っている設定に違いがなさそうなのでこれではない。
エラーを見ると .astro/types.d.ts
でエラーになっている。このファイルは元々チェック対象ではなかったので、除外設定が必要そう。
Ignoring Filesに次の記述があった。ドットファイルは無視されなくなったとのこと。
In flat config , dotfiles (e.g. .dotfile.js) are no longer ignored by default. If you want to ignore dotfiles, add an ignore pattern of "**/.*".
最終的にこうなった。注意点としては独立したオブジェクトとして指定しないといけない。
{
ignores: [".astro"],
},
つまりこういうのはダメ。
export default [
eslint.configs.recommended,
...tseslint.configs.recommended,
{
... // 他の設定
ignores: [".astro"],
}
];
ちなみに最初に書いても最後に書いてもどちらでも除外されました。例では最後に書いているので、踏襲します。
![Hideki Ikemoto](https://res.cloudinary.com/zenn/image/fetch/s--6lDxX-gK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/0524cb26b3.jpeg)
ESLINT_USE_FLAT_CONFIG=true eslint . --debug
で詳細な動作確認。
.ts
, .js
, .cjs
については --ext
の代替である files
を指定しなくても対象になっていた。理由は調査していないが、おそらく typescript-eslint
の設定に含まれているのだろう。
![Hideki Ikemoto](https://res.cloudinary.com/zenn/image/fetch/s--6lDxX-gK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/0524cb26b3.jpeg)
typescript-eslint
により、以下のパッケージが不要になった。
@typescript-eslint/eslint-plugin
@typescript-eslint/parser
![Hideki Ikemoto](https://res.cloudinary.com/zenn/image/fetch/s--6lDxX-gK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/0524cb26b3.jpeg)
最終的な結果。
設定ファイル。
import eslint from "@eslint/js";
import simple_import_sort from "eslint-plugin-simple-import-sort";
import globals from "globals";
import tseslint from "typescript-eslint";
export default [
eslint.configs.recommended,
...tseslint.configs.recommended,
{
languageOptions: {
ecmaVersion: "latest",
sourceType: "module",
globals: {
...globals.browser,
...globals.es2021,
...globals.node,
},
},
plugins: {
"simple-import-sort": simple_import_sort,
},
rules: {
"simple-import-sort/imports": "error",
"simple-import-sort/exports": "error",
},
},
{
ignores: [".astro"],
},
];
package.jsonのscriptのコマンド
- before:
eslint . --ext .js --ext .ts --ext .tsx --ext .jsx --ext .cjs
- after:
ESLINT_USE_FLAT_CONFIG=true eslint .
パッケージ増減(いずれもdevDependencies)
- 増えたもの
@eslint/js
@types/eslint__js
globals
typescript-eslint
- 減ったもの
@typescript-eslint/eslint-plugin
@typescript-eslint/parser
減った2つは typescript-eslint
の依存関係になっているので、実質的には4つ増加。
![Hideki Ikemoto](https://res.cloudinary.com/zenn/image/fetch/s--6lDxX-gK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/0524cb26b3.jpeg)
TODO
- parserOptionsの説明更新
- 型で補完したい