Vue3+Vite3项目ESLint配置优化：解决卡顿与重复报错

一、配置冗余问题分析 #

你的ESLint配置存在规则集重复引入的问题，这是导致智能提示缓慢、ESLint与TS重复报错的核心原因：

• Vue规则集冗余：plugin:vue/base、vue3-essential、vue3-strongly-recommended 全部被 vue3-recommended 包含，重复引入会让ESLint多次执行相同检查，拖慢运行速度。
• TS规则集冗余：plugin:@typescript-eslint/eslint-recommended 已被 plugin:@typescript-eslint/recommended 集成，单独引入属于重复配置。
• 规则冲突：ESLint原生规则（如semi）与@typescript-eslint规则重叠，导致TS类型检查和ESLint风格检查重复报错。

二、精简后的优化配置 #

替换原配置为以下内容，彻底解决冗余与冲突问题：

{
    "root": true,
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-recommended",
        "@vue/eslint-config-typescript/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": "2022",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
        "@typescript-eslint/no-explicit-any": "error",
        "@typescript-eslint/no-inferrable-types": "error",
        "@typescript-eslint/semi": "error",
        "vue/multi-word-component-names": "off" // 可选：根据项目需求关闭组件名多单词强制规则
    },
    "ignorePatterns": [
        "dist/**",
        "node_modules/**",
        "*.d.ts",
        "vite.config.ts"
    ],
    "cache": true // 开启ESLint缓存，大幅提升检查速度
}

三、关键优化点说明 #

• 整合Vue+TS配置：使用@vue/eslint-config-typescript/recommended替代零散的TS规则集，它会自动处理ESLint与TS的规则冲突，避免重复报错。
• 开启缓存机制："cache": true 让ESLint仅检查修改过的文件，显著提升智能提示响应速度。
• 扩展忽略范围：新增node_modules、类型声明文件、Vite配置文件，减少不必要的检查任务。
• 统一规则标准：用@typescript-eslint/semi替代ESLint原生semi，确保TS文件与Vue文件的规则一致，消除冲突。

四、额外性能优化建议 #

• VSCode编辑器配置：在settings.json中添加以下内容，让ESLint仅在保存时执行检查，降低实时检查的性能消耗：

  {
      "eslint.validate": ["javascript", "typescript", "vue"],
      "editor.codeActionsOnSave": {
          "source.fixAll.eslint": true
      },
      "eslint.run": "onSave"
  }
  

• 对齐依赖版本：确保eslint、@typescript-eslint/eslint-plugin、@typescript-eslint/parser、eslint-plugin-vue的版本匹配，避免因版本不一致引发的性能问题。

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