eslint报错怎么解决：Parsing error: "parserOptions.project" has been provided？

Question

eslint报错怎么解决：Parsing error: "parserOptions.project" has been provided for @typescript-eslint/parser

运行以下命令就会获得报错

eslint src --ext .js,.ts,.vue

报错内容

  0:0  error  Parsing error: "parserOptions.project" has been provided for @typescript-eslint/parser.
The file was not found in any of the provided project(s): src\views\TagDetail.vue

eslint的配置文件

// eslint.config.js
import vuePlugin from 'eslint-plugin-vue';
import tsPlugin from '@typescript-eslint/eslint-plugin';
import tsParser from '@typescript-eslint/parser';
import globals from 'globals';

export default [
  {
    ignores: ['node_modules', 'dist', '*.local', 'public'],
  },
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
      },
      parser: tsParser,
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        project: './tsconfig.eslint.json',
      },
    },
    plugins: {
      '@typescript-eslint': tsPlugin,
    },
    rules: {
      // ESLint 基础规则
      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
      
      // TypeScript 规则
      '@typescript-eslint/no-unused-vars': 'warn',
      '@typescript-eslint/no-explicit-any': 'off',
    },
  },
  {
    files: ['*.vue'],
    plugins: { vue: vuePlugin },
    rules: {
      // Vue 规则
      'vue/multi-word-component-names': 'off',
      'vue/no-multiple-template-root': 'off',
      'vue/script-setup-uses-vars': 'error',
    },
  },
];

tsconfig的配置文件

// tsconfig.eslint.json
{
  "include": [
    "src/**/*.ts",
    "src/**/*.vue",
    "src/**/*.js",
    "eslint.config.js"
  ],
  "extends": "./tsconfig.json"
}

src\views\TagDetail.vue文件存在

不知道如何尝试，期望能正常检查vue文件

Answer 1

问题：原配置让所有文件（包括 Vue 文件）都使用 TypeScript parser，但 TypeScript parser 不知道如何处理 Vue 文件的特殊语法。

解决方案：

• 分离配置：为不同文件类型使用不同的 parser
• Vue parser：Vue 文件使用 vue-eslint-parser，它内部调用 TypeScript parser 处理 <script> 块
• 文件匹配：['.vue'] 改为 ['/.vue'] 以匹配子目录中的文件
• extraFileExtensions：告诉 TypeScript parser 可以处理 .vue 扩展名

eslint.config.js

// eslint.config.js
import vuePlugin from 'eslint-plugin-vue';
import tsPlugin from '@typescript-eslint/eslint-plugin';
import tsParser from '@typescript-eslint/parser';
import vueParser from 'vue-eslint-parser';
import globals from 'globals';

export default [
  {
    ignores: ['node_modules', 'dist', '*.local', 'public'],
  },
  // TypeScript 和 JavaScript 文件配置
  {
    files: ['**/*.ts', '**/*.js'],
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
      },
      parser: tsParser,
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        project: './tsconfig.eslint.json',
      },
    },
    plugins: {
      '@typescript-eslint': tsPlugin,
    },
    rules: {
      // ESLint 基础规则
      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
      
      // TypeScript 规则
      '@typescript-eslint/no-unused-vars': 'warn',
      '@typescript-eslint/no-explicit-any': 'off',
    },
  },
  // Vue 文件配置
  {
    files: ['**/*.vue'],
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
      },
      parser: vueParser,
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        parser: tsParser, // 用于解析 <script> 块中的 TypeScript
        project: './tsconfig.eslint.json',
        extraFileExtensions: ['.vue'],
      },
    },
    plugins: { 
      vue: vuePlugin,
      '@typescript-eslint': tsPlugin,
    },
    rules: {
      // Vue 规则
      'vue/multi-word-component-names': 'off',
      'vue/no-multiple-template-root': 'off',
      'vue/script-setup-uses-vars': 'error',
      
      // TypeScript 规则（也适用于 Vue 文件）
      '@typescript-eslint/no-unused-vars': 'warn',
      '@typescript-eslint/no-explicit-any': 'off',
    },
  },
];

tsconfig.eslint.json

{
  "extends": "./tsconfig.json",
  "include": [
    "src/**/*.ts",
    "src/**/*.vue",
    "src/**/*.js",
    "eslint.config.js"
  ],
  "compilerOptions": {
    "allowJs": true,
    "checkJs": false
  }
}

Answer 2

ESLint 的配置选项 languageOptions 属性中，没有 project属性，你检查一下你的配置。

export default defineConfig([
    {
        languageOptions: {
            ecmaVersion: 5,
            sourceType: "script",
            parserOptions: {
                ecmaFeatures: {
                    jsx: true,
                },
            }
        },
    },
]);

相关文档：https://eslint.org/docs/latest/use/configure/language-options