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

## 概要

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

[v9 リリースノート](https://eslint.org/blog/2024/04/eslint-v9.0.0-released/)

[v8 -> v9 マイグレーションガイド](https://eslint.org/docs/latest/use/configure/migration-guide)によると、configファイルがデフォルトで[フラット構成形式](https://eslint.org/blog/2022/08/new-config-system-part-2/)になったらしい。

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

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

```bash:~/.bashrc
export ESLINT_USE_FLAT_CONFIG=false
```

<details><div>

```json: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": "*"
  }
}
```

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

```js: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"]
  },
};
```

```js: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"}
                             }
                    ]
  },
};
```

```json: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"}
}

```

```json: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"
  ]
}
```

</div></details>

### VSCodeのESLint拡張の更新

[v3がフラグに対応している](https://github.com/microsoft/vscode-eslint?tab=readme-ov-file#version-305---pre-release)ので、VSCodeEslintのプレビュー版に更新した。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/7fb1b161-2ef3-c977-aaee-6efd08c6a33a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/3d2d579d-4288-2fb2-b827-4d8f4201adc9.png)

### VSCodeのESLint拡張のLint設定

```diff:.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)を通す](https://qiita.com/ryo2020/items/4cdc2953926a3bbf220f)
[VS CodeのESLint拡張機能でESLintが認識されなかった時の対処内容](https://zenn.dev/suree/articles/994efc9206332d)