使用@typescript-eslint与eslint.config.js扁平配置无法校验TypeScript项目

一、解决"extends"格式不兼容报错 #

你遇到的错误根源是：扁平配置（eslint.config.js）完全废弃了旧eslintrc格式的extends字段语法，而你直接沿用了旧配置的导入逻辑。@typescript-eslint针对扁平配置提供了专门的导出项，正确配置方式如下：

1. 确保安装适配扁平配置的最新版typescript-eslint包
2. 在eslint.config.js中采用数组式配置，直接导入并展开推荐规则：

import js from '@eslint/js';
import tseslint from 'typescript-eslint';

export default [
  // 导入ESLint官方推荐规则
  js.configs.recommended,
  // 导入并展开@typescript-eslint推荐规则（注意用...展开数组）
  ...tseslint.configs.recommended,
  // 可在此添加自定义规则、文件匹配等配置
  {
    files: ['**/*.ts', '**/*.tsx'],
    rules: {
      '@typescript-eslint/no-unused-vars': 'warn'
    }
  }
];

核心差异：扁平配置是配置项数组，每个配置项为独立对象，推荐规则需直接作为数组元素导入，而非通过extends字段引用。

二、WebStorm对扁平配置的支持情况 #

• WebStorm 2023.1及以上版本：原生支持eslint.config.js扁平配置，IDE会自动识别该文件，提供与旧配置一致的实时代码检查、快速修复、规则提示等功能，无需额外设置。
• 2023.1之前的旧版本：不支持ESLint扁平配置，仅能识别.eslintrc.*系列文件，若要使用扁平配置需升级IDE到2023.1或更高版本。

内容的提问来源于stack exchange，提问作者Giancarlo Sotelo