向vite.config.ts添加插件时npx eslint --fix报错求助

问题描述 #

在向vite.config.ts添加额外插件（比如vite-plugin-eslint）时，触发ESLint解析错误：

1:1  error  Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

仅保留@vitejs/plugin-react时项目能正常运行，添加任何其他插件都会触发该问题。当前使用TypeScript 5.0.3，相关配置如下：

vite.config.ts #

import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react';
import eslint from 'vite-plugin-eslint';

export default defineConfig({
    plugins: [react(), eslint()],
});

.eslintrc.json #

{
    "extends": ["eslint:recommended", "plugin:node/recommended", "prettier"],
    "plugins": ["node", "prettier"],
    "rules": {
        "prettier/prettier": "error",
        "block-scoped-var": "error",
        "eqeqeq": "error",
        "no-var": "error",
        "prefer-const": "error",
        "eol-last": "error",
        "prefer-arrow-callback": "error",
        "no-trailing-spaces": "error",
        "quotes": ["warn", "single", {"avoidEscape": true}],
        "no-restricted-properties": [
            "error",
            {
                "object": "describe",
                "property": "only"
            },
            {
                "object": "it",
                "property": "only"
            }
        ]
    },
    "overrides": [
        {
            "files": ["src/**/*.ts", "src/**/*.tsx"],
            "parser": "@typescript-eslint/parser",
            "extends": ["plugin:@typescript-eslint/recommended"],
            "rules": {
                "@typescript-eslint/no-non-null-assertion": "off",
                "@typescript-eslint/no-use-before-define": "off",
                "@typescript-eslint/no-warning-comments": "off",
                "@typescript-eslint/no-empty-function": "off",
                "@typescript-eslint/no-var-requires": "off",
                "@typescript-eslint/explicit-function-return-type": "off",
                "@typescript-eslint/explicit-module-boundary-types": "off",
                "@typescript-eslint/ban-types": "off",
                "@typescript-eslint/camelcase": "off",
                "node/no-missing-import": "off",
                "node/no-empty-function": "off",
                "node/no-unsupported-features/es-syntax": "off",
                "node/no-missing-require": "off",
                "node/shebang": "off",
                "no-dupe-class-members": "off",
                "require-atomic-updates": "off"
            },
            "parserOptions": {
                "ecmaVersion": 2018,
                "sourceType": "module"
            }
        }
    ]
}

解决方案 #

问题核心是ESLint没把根目录下的vite.config.ts识别为TypeScript模块文件——当前配置仅对src/**/*.ts和src/**/*.tsx启用了TypeScript解析器，导致vite.config.ts被默认规则解析，无法识别ES模块语法。

具体修改步骤 #

在.eslintrc.json的overrides数组中新增一个配置项，专门匹配根目录下的配置文件：

{
  "files": ["vite.config.ts"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "node/no-unsupported-features/es-syntax": "off"
  }
}

如果需要匹配更多根目录下的TS配置文件（比如tsconfig.node.json等），可以改成更通用的写法：

{
  "files": ["*.ts"],
  "exclude": ["src/**/*.ts"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "node/no-unsupported-features/es-syntax": "off"
  }
}

修改后的完整.eslintrc.json示例 #

{
    "extends": ["eslint:recommended", "plugin:node/recommended", "prettier"],
    "plugins": ["node", "prettier"],
    "rules": {
        "prettier/prettier": "error",
        "block-scoped-var": "error",
        "eqeqeq": "error",
        "no-var": "error",
        "prefer-const": "error",
        "eol-last": "error",
        "prefer-arrow-callback": "error",
        "no-trailing-spaces": "error",
        "quotes": ["warn", "single", {"avoidEscape": true}],
        "no-restricted-properties": [
            "error",
            {
                "object": "describe",
                "property": "only"
            },
            {
                "object": "it",
                "property": "only"
            }
        ]
    },
    "overrides": [
        {
            "files": ["src/**/*.ts", "src/**/*.tsx"],
            "parser": "@typescript-eslint/parser",
            "extends": ["plugin:@typescript-eslint/recommended"],
            "rules": {
                "@typescript-eslint/no-non-null-assertion": "off",
                "@typescript-eslint/no-use-before-define": "off",
                "@typescript-eslint/no-warning-comments": "off",
                "@typescript-eslint/no-empty-function": "off",
                "@typescript-eslint/no-var-requires": "off",
                "@typescript-eslint/explicit-function-return-type": "off",
                "@typescript-eslint/explicit-module-boundary-types": "off",
                "@typescript-eslint/ban-types": "off",
                "@typescript-eslint/camelcase": "off",
                "node/no-missing-import": "off",
                "node/no-empty-function": "off",
                "node/no-unsupported-features/es-syntax": "off",
                "node/no-missing-require": "off",
                "node/shebang": "off",
                "no-dupe-class-members": "off",
                "require-atomic-updates": "off"
            },
            "parserOptions": {
                "ecmaVersion": 2018,
                "sourceType": "module"
            }
        },
        {
            "files": ["vite.config.ts"],
            "parser": "@typescript-eslint/parser",
            "parserOptions": {
                "ecmaVersion": "latest",
                "sourceType": "module"
            },
            "rules": {
                "node/no-unsupported-features/es-syntax": "off"
            }
        }
    ]
}

说明 #

• 给vite.config.ts单独配置TypeScript解析器，确保ESLint能正确识别其模块语法。
• 关闭node/no-unsupported-features/es-syntax规则，因为Vite配置文件使用的ES模块语法无需Node环境的兼容性检查。

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