TypeScript代码错误被@typescript-eslint与ESLint重复上报的修复问询

我的TypeScript代码里每个错误都会被@typescript-eslint和ESLint重复上报，看起来ESLint同时启用了两套规则，该怎么修复？我用的是VSCode的ESLint和Prettier扩展。

我的package.json依赖： #

"devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.29.3",
    "@typescript-eslint/parser": "^4.29.3",
    "@vue/eslint-config-typescript": "^11.0.0",
    "eslint": "^7.32.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^9.2.0",
    "eslint-plugin-vue-scoped-css": "^2.2.0",
    "prettier": "^2.4.1",
    "typescript": "~4.8.4",
},

我的.eslintrc配置： #

{
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "eslint-config-airbnb-base",
    "@vue/typescript/recommended",
    "plugin:vue/vue3-recommended",
    "plugin:vue-scoped-css/base",
    "plugin:prettier/recommended"
  ],
  "env": {
    "browser": true,
    "node": true,
    "jest": true,
    "es6": true
  },
  "globals": {
    "defineProps": "readonly",
    "defineEmits": "readonly"
  },
  "plugins": ["vue", "@typescript-eslint"],
  "parserOptions": {
    "parser": "@typescript-eslint/parser",
    "sourceType": "module",
    "allowImportExportEverywhere": true,
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "settings": {
    "import/extensions": [".js", ".jsx", ".ts", ".tsx"]
  },
  "rules": {
    "no-console": "off",
    "no-continue": "off",
    "no-restricted-syntax": "off",
    "no-plusplus": "off",
    "no-param-reassign": "off",
    "no-shadow": "off",
    "guard-for-in": "off",

    "import/extensions": "off",
    "import/no-unresolved": "off",
    "import/no-extraneous-dependencies": "off",
    "import/prefer-default-export": "off",
    "import/first": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "vue/first-attribute-linebreak": 0,

    "@typescript-eslint/no-unused-vars": [
      "error",
      {
        "argsIgnorePattern": "^_",
        "varsIgnorePattern": "^_"
      }
    ],
    "no-unused-vars": [
      "error",
      {
        "argsIgnorePattern": "^_",
        "varsIgnorePattern": "^_"
      }
    ],
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": "off",
    "@typescript-eslint/ban-ts-comment": "off",
    "@typescript-eslint/ban-types": "off",
    "class-methods-use-this": "off" 
  },
  "overrides": [
    {
      "files": ["*.vue"],
      "rules": {
        "vue/component-name-in-template-casing": [2, "kebab-case"],
        "vue/require-default-prop": 0,
        "vue/multi-word-component-names": 0,
        "vue/no-reserved-props": 0,
        "vue/no-v-html": 0,
        "vue-scoped-css/enforce-style-type": ["error", { "allows": ["scoped"] }]
      }
    }
  ]
}

1. 关闭原生ESLint的重复规则 #

TypeScript项目中，@typescript-eslint插件提供了原生ESLint规则的增强版本（比如@typescript-eslint/no-unused-vars对应原生no-unused-vars），同时启用两套会导致重复报错。

修改.eslintrc的rules部分，删除原生ESLint的no-unused-vars规则，只保留@typescript-eslint版本：

"rules": {
  // ... 其他规则不变
  "@typescript-eslint/no-unused-vars": [
    "error",
    {
      "argsIgnorePattern": "^_",
      "varsIgnorePattern": "^_"
    }
  ],
  // 移除以下原生规则配置
  // "no-unused-vars": [
  //   "error",
  //   {
  //     "argsIgnorePattern": "^_",
  //     "varsIgnorePattern": "^_"
  //   }
  // ],
  // ... 其他规则不变
}

2. 清理extends中的重复继承 #

你的extends数组同时包含plugin:@typescript-eslint/recommended和@vue/typescript/recommended，后者已经继承了前者的规则，重复引入会导致规则叠加。

修改.eslintrc的extends，移除plugin:@typescript-eslint/recommended：

"extends": [
  // 移除该行
  // "plugin:@typescript-eslint/recommended",
  "eslint-config-airbnb-base",
  "@vue/typescript/recommended",
  "plugin:vue/vue3-recommended",
  "plugin:vue-scoped-css/base",
  "plugin:prettier/recommended"
],

3. 替换Airbnb规则为TypeScript适配版 #

eslint-config-airbnb-base是针对JavaScript的规则集，在TypeScript项目中需要使用专属版本避免冲突。先安装依赖：

npm install eslint-config-airbnb-typescript --save-dev

然后修改extends，将eslint-config-airbnb-base替换为airbnb-typescript/base：

"extends": [
  "airbnb-typescript/base",
  "@vue/typescript/recommended",
  "plugin:vue/vue3-recommended",
  "plugin:vue-scoped-css/base",
  "plugin:prettier/recommended"
],

4. 重启ESLint服务 #

修改配置后，按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）打开VSCode命令面板，输入ESLint: Restart ESLint Server，重启服务让配置生效。

内容的提问来源于stack exchange，提问作者肉蛋充肌