如何在VS Code中配置不带FlatCompat的ESLint flat config与TypeScript

1. 迁移至ESLint Flat Config #

• 升级ESLint到最新版本，同时卸载旧版的eslint-config-*类共享配置依赖（如果之前使用过）：

  npm install eslint@latest --save-dev
  # 示例：若之前用了eslint-config-airbnb，执行卸载：npm uninstall eslint-config-airbnb --save-dev
  

• 删除项目根目录的.eslintrc系列文件（.eslintrc.js/.eslintrc.json等）和.eslintignore文件
• 在项目根目录新建eslint.config.js，基础配置示例：

  import js from '@eslint/js';
  
  export default [
    // 启用JS官方推荐规则
    js.configs.recommended,
    // 配置忽略路径，替代原.eslintignore
    { ignores: ['node_modules/', 'dist/', 'build/'] }
  ];
  

2. 配置TypeScript代码检查规则 #

• 安装TypeScript相关ESLint依赖：

  npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev
  

• 修改eslint.config.js，添加TypeScript规则配置：

  import js from '@eslint/js';
  import tseslint from 'typescript-eslint';
  
  export default [
    js.configs.recommended,
    // 启用TypeScript官方推荐规则集合
    ...tseslint.configs.recommended,
    // 针对TS/TSX文件的专属配置
    {
      files: ['**/*.ts', '**/*.tsx'],
      languageOptions: {
        parser: tseslint.parser,
        parserOptions: {
          project: './tsconfig.json', // 关联你的TS配置文件
          tsconfigRootDir: import.meta.dirname
        }
      },
      plugins: {
        '@typescript-eslint': tseslint.plugin
      },
      // 自定义规则示例
      rules: {
        '@typescript-eslint/no-unused-vars': 'error',
        '@typescript-eslint/no-explicit-any': 'warn'
      }
    },
    { ignores: ['node_modules/', 'dist/'] }
  ];
  

• 若项目混有JS和TS文件，可单独给JS文件配置规则，避免TS解析器处理JS文件引发异常

3. 让VS Code中的ESLint扩展恢复正常运行 #

• 打开VS Code扩展市场，确保ESLint扩展为最新版本，若不是则点击更新
• 打开VS Code设置（快捷键Ctrl+,或Cmd+,），搜索ESLint: Use Flat Config并勾选，让扩展识别新的Flat Config文件
• 若扩展仍未正常工作，打开命令面板（Ctrl+Shift+P或Cmd+Shift+P），执行ESLint: Restart ESLint Server
• 检查项目package.json中的lint脚本是否正确，示例：

  "scripts": {
    "lint": "eslint ."
  }
  

• 若仍有报错，查看VS Code输出面板（选择"ESLint"分类），根据错误提示排查，比如是否缺少依赖、配置文件语法错误等

内容的提问来源于stack exchange，提问作者David Carboni