vite的eslint报错怎么解决：[vite] Internal server error: Module tsconfig.eslint.json needs type: json？

Question

问题代码在github，vite-eslint-demo

vite的eslint报错怎么解决：[vite] Internal server error: Module "file:///E:/code/portal.jd.likejd.com/tsconfig.eslint.json?mtime=1748937287500" needs an import attribute of "type: json"

vite配置

// vite.config.ts
import  { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'

import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
  plugins: [
    vue(),
    eslintPlugin({
      cache: false,
      include: ['src/**/*.ts', 'src/**/*.vue', 'src/*.vue'],
      overrideConfigFile: './tsconfig.eslint.json' // 添加类型声明参数
    }),
    vueJsx(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      'vue': 'vue/dist/vue.esm-bundler.js'
    },
  },
  server: {
    proxy: {
      '/ws-chat': {
        target: 'http://localhost:8080',
        ws: true,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/ws-chat/, '')
      }
    }
  }
})

tsconfig.eslint.json配置

// tsconfig.eslint.json

{
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/views/**/*.vue",  // 使用正斜杠确保跨平台兼容
    "tests/**/*.ts",
    "types/**/*.d.ts",
    "vite.config.ts",
    "src/views/HomeView.vue"  // 显式包含确保匹配
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

尝试过搜索引擎查找解决方案，但找不到对应的问题和解决方案

@fuGUI 1.删除vite.config.ts中的overrideConfigFile配置报错了

[plugin:vite-plugin-eslint] E:\code\portal.jd.likejd.com\src\views\HomeView.vue
  0:0  error  Parsing error: ESLint was configured to run on `<tsconfigRootDir>/src\views\HomeView.vue` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.eslint.json
However, that TSConfig does not include this file. Either:
- Change ESLint's list of included files to not include this file
- Change that TSConfig to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project
See the typescript-eslint docs for more info: https://typescript-eslint.io/troubleshooting/typed-linting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file

✖ 1 problem (1 error, 0 warnings)
E:/code/portal.jd.likejd.com/src/views/HomeView.vue
    at TransformPluginContext._formatError (file:///E:/code/portal.jd.likejd.com/node_modules/vite/dist/node/chunks/dep-BZMjGe_U.js:47372:41)
    at TransformPluginContext.error (file:///E:/code/portal.jd.likejd.com/node_modules/vite/dist/node/chunks/dep-BZMjGe_U.js:47367:16)
    at TransformPluginContext.transform (file:///E:/code/portal.jd.likejd.com/node_modules/vite-plugin-eslint/dist/index.mjs:1:1989)
    at async file:///E:/code/portal.jd.likejd.com/node_modules/vite-plugin-inspect/dist/index.mjs:1128:17
    at async EnvironmentPluginContainer.transform (file:///E:/code/portal.jd.likejd.com/node_modules/vite/dist/node/chunks/dep-BZMjGe_U.js:47214:18)
    at async loadAndTransform (file:///E:/code/portal.jd.likejd.com/node_modules/vite/dist/node/chunks/dep-BZMjGe_U.js:41025:27
Click outside, press Esc key, or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.ts.

@fuGUI 2.eslint.config.js配置文件（这里面指定了tsconfig.eslint.json）

// 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',
    },
  },
];

@fuGUI 3. parserOptions中加下tsconfigRootDir: __dirname,（报错了）

[plugin:vite-plugin-eslint] __dirname is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and 'E:\code\portal.jd.likejd.com\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
E:/code/portal.jd.likejd.com/src/main.ts
    at file:///E:/code/portal.jd.likejd.com/eslint.config.js?mtime=1748942410015:129:26
    at ModuleJob.run (node:internal/modules/esm/module_job:271:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:578:26)
    at async dynamicImportConfig (E:\code\portal.jd.likejd.com\node_modules\eslint\lib\config\config-loader.js:186:17)
    at async loadConfigFile (E:\code\portal.jd.likejd.com\node_modules\eslint\lib\config\config-loader.js:276:9)
    at async ConfigLoader.calculateConfigArray (E:\code\portal.jd.likejd.com\node_modules\eslint\lib\config\config-loader.js:589:23)
    at async #calculateConfigArray (E:\code\portal.jd.likejd.com\node_modules\eslint\lib\config\config-loader.js:770:23)
    at async ESLint.calculateConfigForFile (E:\code\portal.jd.likejd.com\node_modules\eslint\lib\eslint\eslint.js:1099:4)
    at async ESLint.isPathIgnored (E:\code\portal.jd.likejd.com\node_modules\eslint\lib\eslint\eslint.js:1139:18)
    at async TransformPluginContext.transform (file:///E:/code/portal.jd.likejd.com/node_modules/vite-plugin-eslint/dist/index.mjs:1:1860
Click outside, press Esc key, or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.ts.

@fuGUI 4. （添加后报错了）import { fileURLToPath } from 'url' import { dirname } from 'path' const __dirname = dirname(fileURLToPath(import.meta.url))

[plugin:vite-plugin-eslint] E:\code\portal.jd.likejd.com\src\App.vue
  0:0  error  Parsing error: ESLint was configured to run on `<tsconfigRootDir>/src\App.vue` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.eslint.json
However, that TSConfig does not include this file. Either:
- Change ESLint's list of included files to not include this file
- Change that TSConfig to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project
See the typescript-eslint docs for more info: https://typescript-eslint.io/troubleshooting/typed-linting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file

✖ 1 problem (1 error, 0 warnings)
E:/code/portal.jd.likejd.com/src/App.vue
    at TransformPluginContext._formatError (file:///E:/code/portal.jd.likejd.com/node_modules/vite/dist/node/chunks/dep-BZMjGe_U.js:47372:41)
    at TransformPluginContext.error (file:///E:/code/portal.jd.likejd.com/node_modules/vite/dist/node/chunks/dep-BZMjGe_U.js:47367:16)
    at TransformPluginContext.transform (file:///E:/code/portal.jd.likejd.com/node_modules/vite-plugin-eslint/dist/index.mjs:1:1989)
    at async file:///E:/code/portal.jd.likejd.com/node_modules/vite-plugin-inspect/dist/index.mjs:1128:17
    at async EnvironmentPluginContainer.transform (file:///E:/code/portal.jd.likejd.com/node_modules/vite/dist/node/chunks/dep-BZMjGe_U.js:47214:18)
    at async loadAndTransform (file:///E:/code/portal.jd.likejd.com/node_modules/vite/dist/node/chunks/dep-BZMjGe_U.js:41025:27
Click outside, press Esc key, or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.ts.

@fuGUI 5. （报错了）改下tsconfig.eslint.json

[plugin:vite-plugin-eslint] E:\code\portal.jd.likejd.com\src\views\HomeView.vue
  0:0  error  Parsing error: ESLint was configured to run on `<tsconfigRootDir>/src\views\HomeView.vue` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.eslint.json
However, that TSConfig does not include this file. Either:
- Change ESLint's list of included files to not include this file
- Change that TSConfig to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project
See the typescript-eslint docs for more info: https://typescript-eslint.io/troubleshooting/typed-linting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file

✖ 1 problem (1 error, 0 warnings)
E:/code/portal.jd.likejd.com/src/views/HomeView.vue
    at TransformPluginContext._formatError (file:///E:/code/portal.jd.likejd.com/node_modules/vite/dist/node/chunks/dep-BZMjGe_U.js:47372:41)
    at TransformPluginContext.error (file:///E:/code/portal.jd.likejd.com/node_modules/vite/dist/node/chunks/dep-BZMjGe_U.js:47367:16)
    at TransformPluginContext.transform (file:///E:/code/portal.jd.likejd.com/node_modules/vite-plugin-eslint/dist/index.mjs:1:1989)
    at async file:///E:/code/portal.jd.likejd.com/node_modules/vite-plugin-inspect/dist/index.mjs:1128:17
    at async EnvironmentPluginContainer.transform (file:///E:/code/portal.jd.likejd.com/node_modules/vite/dist/node/chunks/dep-BZMjGe_U.js:47214:18)
    at async loadAndTransform (file:///E:/code/portal.jd.likejd.com/node_modules/vite/dist/node/chunks/dep-BZMjGe_U.js:41025:27
Click outside, press Esc key, or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.ts.

Answer 1

// eslint.config.js

// ...
// Vue 文件配置
  {
    files: ['**/*.vue'],
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
      },
      parser: vueParser,
      parserOptions: {
        extraFileExtensions: ['.vue'],
        parser: tsParser, // 用于解析 <script> 块中的 TypeScript
        sourceType: 'module',
      },
    },
    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

{
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/views/**/*.vue",
    "tests/**/*.ts",
    "types/**/*.d.ts",
    "vite.config.ts",
    "eslint.config.js", // <- 
    "src/views/HomeView.vue"
    
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}