Playwright项目ESLint扁平配置错误排查与规则生效问题

问题1：ESLint与FlatCompat导入提示需放在dependencies而非devDependencies #

原因 #

ESLint扁平配置文件eslint.config.js会被Node直接加载（而非通过ESLint CLI的开发依赖上下文），部分依赖校验工具会误判这些包为生产依赖。但实际上eslint、@eslint/eslintrc（FlatCompat所属包）均为开发工具，仅用于代码校验。

解决方法 #

• 临时禁用提示：在导入行添加ESLint注释，跳过依赖检查规则：

  // eslint-disable-next-line import/no-extraneous-dependencies
  import { FlatCompat } from '@eslint/eslintrc';
  // eslint-disable-next-line import/no-extraneous-dependencies
  import eslint from 'eslint';
  

• 调整依赖声明（可选）：若项目会被其他npm包依赖，需将eslint和@eslint/eslintrc移至dependencies；仅自用项目可保留在devDependencies，忽略提示即可。

问题2：tseslint导入无法解析模块路径 #

原因 #

1. 未正确安装@typescript-eslint相关包，或导入路径错误；
2. ESLint未配置TypeScript模块解析器，无法识别TS文件的路径规则。

解决方法 #

1. 安装必要依赖：

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

2. 在eslint.config.js中正确配置：

   import tsEslint from '@typescript-eslint/eslint-plugin';
   import tsParser from '@typescript-eslint/parser';
   import importPlugin from 'eslint-plugin-import';
   
   export default [
     {
       plugins: {
         '@typescript-eslint': tsEslint,
         import: importPlugin
       },
       languageOptions: {
         parser: tsParser,
         parserOptions: {
           project: './tsconfig.json', // 指向你的tsconfig文件
           ecmaVersion: 'latest',
           sourceType: 'module'
         }
       },
       settings: {
         'import/resolver': {
           typescript: {
             project: './tsconfig.json'
           }
         }
       }
     }
   ];
   

3. 检查tsconfig.json的include字段，确保覆盖所有需校验的TS文件：

   {
     "include": ["src/**/*.ts", "tests/**/*.ts", "eslint.config.js"]
   }
   

问题3：添加**/*.ts到files后airbnb-base规则失效，TS文件导入路径错误 #

原因 #

airbnb-base是JavaScript专属规则集，默认使用ESLint原生解析器，无法识别TypeScript语法；直接应用到TS文件会导致规则失效，且路径解析逻辑不兼容TS模块。

解决方法 #

1. 安装TS兼容的Airbnb规则集：

   npm install --save-dev eslint-config-airbnb-typescript
   

2. 在eslint.config.js中拆分JS和TS规则配置，分别应用对应规则集：

   import airbnbBase from 'eslint-config-airbnb-base';
   import airbnbTypescript from 'eslint-config-airbnb-typescript';
   import tsEslint from '@typescript-eslint/eslint-plugin';
   import tsParser from '@typescript-eslint/parser';
   import importPlugin from 'eslint-plugin-import';
   
   export default [
     // 处理JS/JSX文件
     {
       files: ['**/*.js', '**/*.jsx'],
       ...airbnbBase,
       plugins: { import: importPlugin }
     },
     // 处理TS/TSX文件
     {
       files: ['**/*.ts', '**/*.tsx'],
       ...airbnbTypescript,
       languageOptions: {
         parser: tsParser,
         parserOptions: {
           project: './tsconfig.json',
           ecmaVersion: 'latest',
           sourceType: 'module'
         }
       },
       plugins: {
         '@typescript-eslint': tsEslint,
         import: importPlugin
       },
       settings: {
         'import/resolver': {
           typescript: { project: './tsconfig.json' }
         }
       }
     }
   ];
   

3. 移除原配置中对**/*.ts的单独files声明，避免规则覆盖冲突。

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