如何配置Eslint 9.x与AutoImport消除no-undef且不失效原有规则

问题根源 #

你当前使用的是ESLint扁平配置格式（Flat Config），而unplugin-auto-import生成的.eslintrc-auto-import.json是旧版ESLint配置格式，直接将其混入扁平配置数组会破坏整个配置结构，导致所有ESLint规则失效，同时无法正确识别自动导入的Vue API全局变量。

正确配置步骤 #

步骤1：调整Vite的AutoImport配置 #

确保unplugin-auto-import生成正确的全局变量声明与TypeScript类型文件：

// vite.config.ts
plugins: [
  vue(),
  AutoImport({
    imports: ['vue'],
    dts: './auto-imports.d.ts',
    resolvers: [
      TDesignResolver({
        library: 'vue-next',
      }),
    ],
    eslintrc: {
      enabled: true,
      filepath: './.eslintrc-auto-import.json',
      globalsPropValue: true,
    },
  }),
  Components({
    dirs: ['src/components'],
    dts: './components.d.ts',
    resolvers: [
      TDesignResolver({
        library: 'vue-next',
      }),
    ],
  }),
],

步骤2：修正ESLint扁平配置 #

不要直接导入旧版配置文件，提取其中的globals字段合并到扁平配置中，同时配置TypeScript ESLint识别自动生成的类型：

// eslint.config.js
import eslintrcImport from './.eslintrc-auto-import.json'
import tsEslint from 'typescript-eslint'
import pluginVue from 'eslint-plugin-vue'
import eslintJs from '@eslint/js'

/** @type { import("eslint").Linter.Config[] } */
export default [
  {
    ignores: ["**/dist/", "**/vendor/"],
  },
  ...tsEslint.configs.recommended,
  ...pluginVue.configs["flat/essential"],
  eslintJs.configs["recommended"],
  // 导入自动生成的全局变量，解决no-undef报错
  {
    globals: {
      ...eslintrcImport.globals,
    },
  },
  // 让ESLint识别auto-import的类型声明
  {
    files: ['**/*.vue', '**/*.ts', '**/*.tsx'],
    languageOptions: {
      parserOptions: {
        project: './tsconfig.json',
        extraFileExtensions: ['.vue'],
      },
    },
    // 可选：若TypeScript已能识别全局变量，可关闭no-undef规则
    // rules: {
    //   "no-undef": "off"
    // }
  },
]

步骤3：更新TypeScript配置 #

在tsconfig.json中添加自动生成的类型文件，确保TypeScript识别这些API：

// tsconfig.json
{
  "include": [
    "src/**/*",
    "auto-imports.d.ts",
    "components.d.ts"
  ],
  // 其他原有配置...
}

关键说明 #

• ESLint扁平配置是数组形式，每个配置项为独立对象，不能直接混入旧版键值对结构的配置，需提取globals这类需要的字段单独配置。
• 若TypeScript已通过自动生成的.d.ts文件识别全局API，关闭no-undef规则也能解决报错，且能减少重复校验。

内容的提问来源于stack exchange，提问作者朱雨然