2024年ESLint配置文件更新新方式及自定义配置指南

问题 #

我用Vite创建React项目，之前通过npx eslint --init生成.eslintrc.cjs，修改后适配了常用格式化工具，最终配置如下：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb',
    'airbnb/hooks',
    'airbnb-typescript',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended',
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: './tsconfig.json',
  },
  plugins: ['@typescript-eslint', 'react', 'prettier'],
  rules: {
    'react/react-in-jsx-scope': 0,
  },
};

更新npm版本后，运行ESLint配置命令生成的是eslint.config.js，内容如下：

import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginReact from 'eslint-plugin-react';

export default [
  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
  { files: ['**/*.js'], languageOptions: { sourceType: 'commonjs' } },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
];

这种新配置格式和我习惯的差异很大，想知道怎么修改新版配置文件适配其他格式化工具规则？另外我发现npm init @eslint/config还能生成.eslintrc.cjs，但还是想了解新版配置的配置方法。

新版ESLint扁平配置适配方案 #

1. 安装依赖 #

先确保安装旧配置用到的所有依赖：

npm install eslint-config-airbnb eslint-config-airbnb-typescript eslint-plugin-airbnb-hooks eslint-plugin-prettier eslint-config-prettier --save-dev

2. 修改eslint.config.js #

将新版配置调整为和旧版功能一致的扁平格式，最终代码如下：

import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginReact from 'eslint-plugin-react';
import pluginPrettier from 'eslint-plugin-prettier';
import eslintConfigPrettier from 'eslint-config-prettier';
import eslintConfigAirbnb from 'eslint-config-airbnb';
import eslintConfigAirbnbHooks from 'eslint-config-airbnb/hooks';
import eslintConfigAirbnbTypescript from 'eslint-config-airbnb-typescript';

export default [
  // 基础文件匹配规则
  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
  // CommonJS文件的特殊配置
  {
    files: ['**/*.js'],
    languageOptions: { sourceType: 'commonjs' }
  },
  // 对应旧版overrides：ESLint配置文件的专属规则
  {
    files: ['.eslintrc.{js,cjs}'],
    languageOptions: {
      globals: globals.node,
      sourceType: 'script'
    }
  },
  // 全局环境与解析器配置
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.es2021
      },
      parser: tseslint.parser,
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        project: './tsconfig.json'
      }
    }
  },
  // 继承各类规则集
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
  eslintConfigAirbnb,
  eslintConfigAirbnbHooks,
  eslintConfigAirbnbTypescript,
  eslintConfigPrettier,
  // 集成Prettier与自定义规则
  {
    plugins: { prettier: pluginPrettier },
    rules: {
      'prettier/prettier': 'error',
      'react/react-in-jsx-scope': 'off'
    }
  }
];

3. 关键配置对应说明 #

• 环境变量：旧版env对应扁平配置中的languageOptions.globals，直接通过globals包引入所需环境变量即可。
• 规则继承：旧版extends数组中的规则集，在扁平配置中直接作为数组项加入，部分第三方规则集需要手动导入（如Airbnb系列）。
• 解析器设置：旧版parser和parserOptions合并到languageOptions字段下。
• 插件引入：先导入插件包，再在对应配置对象的plugins中声明。
• 自定义规则：语法和旧版一致，在单独的配置对象中声明rules即可。
• 覆盖规则：无需嵌套在overrides数组，直接新增配置对象，通过files指定匹配文件后设置规则。

新旧配置选择说明 #

虽然npm init @eslint/config仍可生成旧版.eslintrc.cjs，但ESLint官方已主推扁平配置，它的优势包括：

• 配置结构更直观，支持拆分多文件组合使用
• 避免旧版配置的优先级歧义问题
• 原生支持ES模块语法

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