Remix + Viteで作ってるアプリのESLintが8系だったので9に上げてみました
ESLint 9はflat configとかいって、設定ファイルが eslint.config.js
になったりしてます
元の .eslintrc.js
は link
変更後の eslint.config.mjs
は link
Configuration Migration Guide - ESLint - Pluggable JavaScript Linter を参考にしました
ESLint 9にして npm install && npm run lint
すると
Oops! Something went wrong! :(
ESLint: 9.16.0
ESLint couldn't find an eslint.config.(js|mjs|cjs) file.
From ESLint v9.0.0, the default configuration file is now eslint.config.js.
If you are using a .eslintrc.* file, please follow the migration guide
to update your configuration file to the new format:
https://eslint.org/docs/latest/use/configure/migration-guide
If you still have problems after following the migration guide, please stop by
https://eslint.org/chat/help to chat with the team.
Migration Guideに
npx @eslint/migrate-config .eslintrc.json
があったのですが、使っていたファイルが .eslintrc.js
だったので、.eslintrc.js
に対して実行してみました
npx @eslint/migrate-config .eslintrc.js
Migrating .eslintrc.js
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.js
は得意じゃないそうですが、eslint.config.mjs
に変換してくれました
指示通りのパッケージをインストールしておきます
npm install globals @eslint/compat @eslint/js @eslint/eslintrc -D
lint実行してみる
$ npm run lint
> lint
> eslint --cache --cache-location ./node_modules/.cache/eslint .
Oops! Something went wrong! :(
ESLint: 9.16.0
SyntaxError: Identifier 'fixupConfigRules' has already been declared
エラーの通り
import { fixupConfigRules, fixupPluginRules, fixupConfigRules } from "@eslint/compat";
と fixupConfigRules
が2つあるので1つ消して再実行
めちゃくちゃエラーが出ると思ったらbuild後のファイルをlintしていたので、無視するように指定
export default [
{
ignores: ["public/*", "build/*"],
},
// ...続きは省略
];
これで無事にlintが通りました
Flat Configに対応したプラグインであってもFlag Configの書き方になっていません
これらは直していったほうがよさそうです
いったんさくっとESLint 9に上げられてよかったです
PR
このリンクは、アフィリエイトリンクです