VSCode未加载.eslintrc.json，any类型触发eslint报错求助

VSCode无法读取项目中的.eslintrc.json配置，导致代码中使用any类型时触发Unexpected any. Specify a different type. (eslint@typescript-eslint/no-explicit-any)错误。该配置昨日正常工作，今日突然失效，且已在全新启动的项目中复现此问题。

相关代码与配置文件 #

App.tsx #

import React, { useEffect } from 'react';
import { Home } from 'src/views';

function sleep(delay: number) {
  return new Promise(resolve => {
    setTimeout(resolve, delay);
  });
}

function App() {
  useEffect(() => {
    const testTypeAny = async () => {
      try {
        await sleep(3000);
      } catch (error: any) { // <------ 触发any类型错误
        console.log('error:', error);
      }
    };
    testTypeAny();
  }, []);
  return <Home />;
}

export default App;

.vscode/settings.json #

{
  "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

.eslintrc.json #

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript"
  ],
  "globals": {
    "fetch": false
  },
  "overrides": [
    {
      "files": ["*.js", "*.mjs"],
      "rules": {
        "@typescript-eslint/ban-types": "off",
        "@typescript-eslint/explicit-module-boundary-types": "off",
        "@typescript-eslint/no-empty-function": "off",
        "@typescript-eslint/no-empty-interface": "off",
        "@typescript-eslint/no-explicit-any": "off",
        "@typescript-eslint/no-non-null-assertion": "off",
        "@typescript-eslint/no-var-requires": "off"
      }
    },
    {
      "files": ["*.ts", "*.tsx"],
      "extends": [
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/recommended-requiring-type-checking"
      ],
      "parserOptions": {
        "project": ["./tsconfig.json"]
      },
      "rules": {
        "@typescript-eslint/explicit-module-boundary-types": "off",
        "@typescript-eslint/no-floating-promises": "off"
      }
    }
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "allowImportExportEverywhere": true,
    "ecmaFeatures": { "jsx": true },
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": [
    "@typescript-eslint",
    "import",
    "prettier",
    "react",
    "react-hooks"
  ],
  "rules": {
    "@typescript-eslint/ban-types": [
      "error",
      {
        "extendDefaults": true,
        "types": { "{}": false }
      }
    ],
    "@typescript-eslint/explicit-module-boundary-types": "warn",
    "@typescript-eslint/no-empty-function": "off",
    "@typescript-eslint/no-empty-interface": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "class-methods-use-this": "off",
    "comma-dangle": "off",
    "indent": "off",
    "indent-legacy": 0,
    "import/no-unresolved": 0,
    "import/named": 0,
    "import/namespace": 0,
    "import/default": 0,
    "import/no-named-as-default-member": 0,
    "no-param-reassign": [2, { "props": false }],
    "no-tabs": ["off", { "allowIndentationTabs": true }],
    "no-use-before-define": "warn",
    "no-unused-vars": "warn",
    "quotes": ["error", "single", { "avoidEscape": true }],
    "react-hooks/rules-of-hooks": "off",
    "react-hooks/exhaustive-deps": "warn",
    "react/jsx-filename-extension": "off",
    "react/jsx-uses-react": "off",
    "react/jsx-uses-vars": "error",
    "react/prop-types": "off",
    "react/react-in-jsx-scope": "off",
    "react/require-default-props": "off",
    "sort-imports": [
      "error",
      {
        "ignoreCase": false,
        "ignoreDeclarationSort": true,
        "ignoreMemberSort": false,
        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
      }
    ]
  },
  "settings": {
    "react": {
      "createClass": "createReactClass",
      "pragma": "React",
      "fragment": "Fragment",
      "version": "detect"
    }
  }
}

tsconfig.json #

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": false,
    "paths": {
      "src/*": ["./src/*"]
    },
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "es5",
    "useUnknownInCatchVariables": true
  },
  "include": ["src", "App.tsx", "test", "**/*.[jt]s?(x)"],
  "exclude": ["node_modules", "public", "yarn.lock"]
}

问题原因 #

在.eslintrc.json的overrides配置中，针对*.ts和*.tsx文件的规则优先级高于顶层rules。虽然顶层rules中关闭了@typescript-eslint/no-explicit-any，但在ts/tsx的覆盖配置里，重新继承了plugin:@typescript-eslint/recommended规则集（该规则集默认开启no-explicit-any），且未在覆盖配置的rules中显式关闭此规则，导致顶层配置被覆盖，最终触发报错。

解决方案 #

修改.eslintrc.json中针对*.ts/*.tsx的overrides配置，在rules里添加"@typescript-eslint/no-explicit-any": "off"：

{
  "files": ["*.ts", "*.tsx"],
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
  ],
  "parserOptions": {
    "project": ["./tsconfig.json"]
  },
  "rules": {
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-floating-promises": "off",
    "@typescript-eslint/no-explicit-any": "off" // 添加这一行
  }
}

修改后重启VSCode或执行ESLint修复命令，即可恢复预期的配置效果。

内容的提问来源于stack exchange，提问作者Fiddle Freak