ESLint新配置迁移异常：VSCode下Prettier与自动修复失效

旧的.eslintrc.cjs能正常标记错误并自动修复，但Vite生成的默认Flat Config缺少旧配置的核心依赖、规则和插件集成，导致VSCode无法正常工作。以下是完整的迁移步骤和对应配置：

1. 安装缺失的依赖 #

旧配置依赖多个插件和规范包，Vite默认配置未包含，先确保安装：

npm install -D eslint-config-airbnb-base eslint-plugin-import eslint-plugin-prettier eslint-config-prettier eslint-plugin-unused-imports

2. 配置VSCode支持Flat Config #

打开VSCode的settings.json，添加以下配置确保ESLint启用Flat格式支持：

{
  "eslint.useFlatConfig": true,
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}

3. 完整转换后的eslint.config.js #

替换默认配置文件，以下配置完全对应旧.eslintrc.cjs的所有功能：

import js from '@eslint/js';
import globals from 'globals';
import tseslint from 'typescript-eslint';
import prettierPlugin from 'eslint-plugin-prettier';
import prettierConfig from 'eslint-config-prettier';
import importPlugin from 'eslint-plugin-import';
import unusedImportsPlugin from 'eslint-plugin-unused-imports';
import fs from 'fs';
import path from 'path';

// 读取Prettier配置，和旧逻辑一致
const prettierOptions = JSON.parse(fs.readFileSync(path.resolve('.', '.prettierrc.json'), 'utf8'));

export default tseslint.config(
  // 忽略文件，对应旧配置的ignorePatterns
  { ignores: ['dist', 'eslint.config.js'] },
  // 基础全局配置
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.es2021,
        ...globals.es6,
      },
      ecmaVersion: 'latest',
      sourceType: 'module',
    },
    plugins: {
      import: importPlugin,
    },
    settings: {
      'import/resolver': {
        node: {
          extensions: ['.js', '.ts'],
          moduleDirectory: ['src', 'node_modules'],
        },
      },
    },
  },
  // TS/TSX专属配置，对应旧配置的overrides和parser设置
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      js.configs.recommended,
      ...tseslint.configs.recommended,
      'airbnb-base',
      prettierConfig,
    ],
    languageOptions: {
      parser: tseslint.parser,
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
        project: './tsconfig.json',
      },
    },
    plugins: {
      '@typescript-eslint': tseslint.plugin,
      prettier: prettierPlugin,
      'unused-imports': unusedImportsPlugin,
    },
    // 迁移旧配置的所有规则
    rules: {
      // 原overrides中的规则
      '@typescript-eslint/explicit-function-return-type': 'off',
      'max-lines': 'off',
      'max-lines-per-function': 'off',
      'no-magic-numbers': 'off',
      'no-undef': 'off',

      // 原全局规则
      '@typescript-eslint/no-non-null-assertion': 'error',
      'prettier/prettier': ['warn', prettierOptions],
      '@typescript-eslint/no-explicit-any': 'off',
      'no-unused-vars': 'off',
      'no-use-before-define': 'off',
      'import/no-default-export': 0,
      '@typescript-eslint/no-use-before-define': ['error'],
      'import/no-unresolved': 'off',
      'no-shadow': 'off',
      '@typescript-eslint/no-shadow': 'off',
      'no-loop-func': 'off',
      'no-param-reassign': 'off',
      'no-nested-ternary': 'off',
      'import/no-extraneous-dependencies': 'off',
      'no-useless-constructor': 'off',
      'max-classes-per-file': 'off',
      'no-empty-function': 'off',
      'import/prefer-default-export': 'off',
      'import/extensions': ['error', 'ignorePackages', {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      }],
      'import/order': [
        'warn',
        {
          groups: [
            ['builtin', 'external'],
            'internal',
            ['parent', 'sibling', 'index'],
            'object',
            'type',
          ],
          'newlines-between': 'always',
          alphabetize: {
            order: 'asc',
          },
          pathGroups: [
            {
              pattern: './**/*.less',
              group: 'object',
            },
            {
              pattern: '**/*.less',
              group: 'object',
            },
            {
              pattern: './**/*.{jpg,jpeg,png,gif,svg,ico}',
              group: 'type',
            },
            {
              pattern: '**/*.{jpg,jpeg,png,gif,svg,ico}',
              group: 'type',
            },
          ],
        },
      ],
    },
  },
  // 保留Vite默认的React相关规则
  {
    files: ['**/*.{tsx}'],
    plugins: {
      'react-hooks': await import('eslint-plugin-react-hooks'),
      'react-refresh': await import('eslint-plugin-react-refresh'),
    },
    rules: {
      ...(await import('eslint-plugin-react-hooks')).configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  },
);

4. 常见问题修复 #

• 插件缺失提示：确认所有依赖已正确安装，Flat Config中插件需直接导入模块，而非字符串名称。
• VSCode不识别规则：重启ESLint服务（命令面板执行ESLint: Restart ESLint Server），或检查eslint.useFlatConfig是否设为true。
• 未知「0」错误：排查配置语法错误，比如是否使用了正确的ES模块语法（eslint.config.js默认是ES模块）。

内容的提问来源于stack exchange，提问作者Filip Studený