vscodeでeslintの補完が効かなくなった原因がeslintのv7からv8になったことだったので設定を修正したメモ

概要

ncu -u && npm iを行ってから、vscodeでファイル保存時にeslintの自動修正が動かなくなってしまった。
原因は、dbaeumer.vscode-eslintがデフォルトの設定だとv8に対応していない状態であることであった。
version2.2.0で、以下のように設定を行うように指示があったので、その通りに設定したら自動修正が復活した。

Added support for ESLint V8.0 Beta. To stay backwards compatible with eslint settings the version still uses the CLIEngine if available. However users can force the use of the new ESLint API using the setting eslint.useESLintClass.`

コード

.vscode/settings.json

{
  "files.eol": "\n",
  "editor.tabSize": 2,
  "editor.tabCompletion": "on",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.format.enable": false,
+  "eslint.useESLintClass": true,
  "typescript.format.enable": false,
  "javascript.format.enable": false
}

eslintrc.js

module.exports = {
  ignorePatterns: ['!.eslintrc.js', 'public'],
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'react-app',
    'react-app/jest',
  ],
  parser: '@typescript-eslint/parser',
  env: {
    browser: true,
    node: true,
    es6: true,
    jest: true,
  },
  parserOptions: {
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
  rules: {
    'react/prop-types': 'off',
    'commma-dangle': 'off',
  },
}

.prettierrc.js

module.exports = {
  semi: false,
  arrowParens: 'always',
  singleQuote: true,
  trailingComma: 'all',
}

package.json

{
  "name": "aws-cartagraph-editor-client",
  "version": "0.0.0",
  "description": "CartaGraphEditor",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "test": "jest",
    "test-watch": "jest --watchAll",
    "serve": "vite preview",
    "eslint": "eslint .",
    "eslint-fix": "eslint . --fix"
  },
  "author": "hibohiboo",
  "license": "MIT",
  "dependencies": {
    "@reduxjs/toolkit": "^1.7.2",
    "firebase": "^9.6.7",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.2.1",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "@types/react-dom": "^17.0.11",
    "@typescript-eslint/eslint-plugin": "^5.12.0",
    "@vitejs/plugin-react-refresh": "^1.3.6",
    "eslint": "^8.9.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-react-app": "^7.0.0",
    "npm-check-updates": "^12.3.1",
    "prettier": "^2.5.1",
    "sass": "^1.49.8",
    "typescript": "^4.5.5",
    "vite": "^2.8.4"
  }
}