TS+Vue项目中ESlint误将.ts文件识别为JavaScript的问题

核心思路是为不同文件类型分别配置对应的解析器，让.vue文件用vue-eslint-parser处理模板和脚本，.ts文件用@typescript-eslint/parser处理纯TS代码，同时保证脚本部分的TS语法被正确解析。

正确的ESLint配置示例 #

以下是适配Vue3+TypeScript的完整配置（Vue2只需替换对应的Vue插件规则）：

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es2021: true
  },
  // 继承推荐规则集
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'eslint:recommended'
  ],
  // 全局基础解析配置
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  // 针对不同文件类型单独配置解析器
  overrides: [
    {
      files: ['*.ts'],
      parser: '@typescript-eslint/parser',
      // 启用类型检查（可选，需要tsconfig.json配合）
      parserOptions: {
        project: './tsconfig.json'
      }
    },
    {
      files: ['*.vue'],
      parser: 'vue-eslint-parser',
      parserOptions: {
        // 将.vue文件中的script部分交给TS解析器处理
        parser: '@typescript-eslint/parser',
        ecmaVersion: 'latest',
        sourceType: 'module'
      }
    }
  ],
  // 自定义规则（根据项目需求调整）
  rules: {
    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
    'vue/multi-word-component-names': 'off'
  }
}

配置说明 #

1. 全局配置：设置基础的环境和语法版本，确保ESLint能识别现代JS/TS特性。
2. overrides分文件配置：
   • 对于.ts文件，直接使用@typescript-eslint/parser解析，避免JS语法校验错误；如果需要启用类型相关的ESLint规则（比如@typescript-eslint/no-floating-promises），需指定project指向你的tsconfig.json。
   • 对于.vue文件，用vue-eslint-parser作为顶层解析器，它会负责解析Vue模板和脚本结构，同时通过parserOptions.parser将脚本部分的TS代码转交给@typescript-eslint/parser处理，兼顾Vue模板校验和TS语法解析。
3. 依赖安装：确保已安装所有必要包：

   npm install eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser vue-eslint-parser eslint-plugin-vue --save-dev
   

注意事项 #

• 如果不需要类型检查，可以去掉.ts文件配置中的project项，减少ESLint的校验耗时。
• 确保tsconfig.json的include字段包含所有.ts和.vue文件（启用类型检查时需要）：

  {
    "include": ["src/**/*.ts", "src/**/*.vue"]
  }
  

内容的提问来源于stack exchange，提问作者João Melo