ESLintのメジャーバージョンを8から9にしたらVSCode ESLint 拡張のautofixが効かなくなったので対応したメモ

概要

ESLintでのエラーをVSCodeの保存時に自動修正する設定をしているのだが、v9にあげたことによって動かなくなった。configのエラーが発生しているもよう。

v9 リリースノート

v8 -> v9 マイグレーションガイドによると、configファイルがデフォルトでフラット構成形式になったらしい。

書き換え箇所が多いので、いったん既存のconfigファイルを使えるようにフラグを設定した。

bashでのLint設定

まずは、npm run lintを動かせるようにする。
git bashで普段動かしているので、プロファイルに環境変数を追加する。

~/.bashrc

export ESLINT_USE_FLAT_CONFIG=false

app/package.json

{
  "type": "module",
  "scripts": {
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
  },
  "devDependencies": {
    "@yakumi/eslint-config-custom": "*",
    "@yakumi/tsconfig": "*"
  }
}

app/.eslintrc.cjs

module.exports = {
  extends: [
    "@yakumi/eslint-config-custom/frontend",
  ],
};

packages/eslint-config-custom/frontend.js

module.exports = {
  env: { browser: true, es2020: true },
  extends: [
    "@yakumi/eslint-config-custom/defaults",
    "plugin:react-hooks/recommended",
    "turbo",
    "prettier",
  ],
  plugins: ["react-refresh", "import", "unused-imports"],
  rules: {
    "react-refresh/only-export-components": [
      "warn",
      { allowConstantExport: true },
    ],
    "import/extensions":["off"]
  },
};

packages/eslint-config-custom/defaults.js

module.exports = {
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "ignorePatterns": ["dist", ".eslintrc.cjs"],
  "parser": "@typescript-eslint/parser",
  "plugins": ["import", "unused-imports"],
  "rules": {
    "semi": ["error", "always"],
    "unused-imports/no-unused-imports": "warn", 
    "import/order": ["warn", { "groups": ["builtin", "external", "internal", "parent", "sibling", "index", "object", "type"]
                             , "pathGroupsExcludedImportTypes": ["builtin"]
                             , "pathGroups": [{ "pattern": "@src/**", "group": "parent", "position": "before"}]
                             , "alphabetize": { "order": "asc"}
                             }
                    ]
  },
};

packages/eslint-config-custom/package.json

{
  "name": "@yakumi/eslint-config-custom",
  "private": true,
  "license": "MIT",
  "version": "0.0.0",
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^7.6.0",
    "@typescript-eslint/parser": "^7.6.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-config-turbo": "^1.13.2",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "eslint-plugin-unused-imports": "^3.1.0"
  },
  "scripts": {"ncu":"ncu -u"}
}

package.json

{
  "scripts": {
    "build": "turbo build",
    "dev": "turbo dev",
    "ncu": "turbo ncu",
    "deploy": "cd infrastructure && npm run deploy"
  },
  "devDependencies": {
    "eslint": "^9.0.0",
    "prettier": "^3.2.5",
    "turbo": "^1.13.2",
    "typescript": "^5.4.5"
  },
  "engines": {
    "node": ">=18.x"
  },
  "packageManager": "npm@10.5.1",
  "workspaces": [
    "packages/*",
    "app"
  ]
}

VSCodeのESLint拡張の更新

v3がフラグに対応しているので、VSCodeEslintのプレビュー版に更新した。

VSCodeのESLint拡張のLint設定

.vscode/settings.json

{
  "eslint.format.enable": false,
  "eslint.workingDirectories": [{"mode": "auto"}],
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
+  "eslint.useFlatConfig": false,
  "eslint.useESLintClass": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
  },
  // デフォルトの設定はオフにしておく
  "typescript.format.enable": false,
  "javascript.format.enable": false,
}

VSCodeを再起動したところ、保存時のautofixが効くようになった。

参考

gitbash に Windows 環境変数(PATH)を通す
VS CodeのESLint拡張機能でESLintが認識されなかった時の対処内容