更新 ESLint 配置文件的最新方法（2024）

Question

尝试使用

vite

创建一个新的 React 项目。我通常通过

npx eslint --init

设置 ESLint，然后获取

.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 config 命令后，我现在似乎得到了

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,
];

此配置的格式与我习惯的格式非常不同。如何修改这个更新的 ESLint 配置文件，以便我可以将其配置为遵循其他包中格式化程序的规则？

P.S.：我刚刚发现，如果我只是运行

.eslintrc.cjs

，我仍然可以获得

npm init @eslint/config

，但我仍然想知道如何格式化更新的 ESLint 配置文件。

Answer 1

ESLint 最近更改了默认配置格式。默认情况下不再启用旧版

.eslintrc

文件格式。相反，新的（“平面”）配置格式使用类似

eslint.config.js

的文件。您可以阅读更多相关内容：

• https://eslint.org/docs/latest/use/configure/configuration-files：新的配置文件文档
• https://eslint.org/docs/latest/use/configure/migration-guide：是迁移指南

特别是对于 typescript-eslint，https://typescript-eslint.io 上的文档显示了平面配置和旧版配置。您可以阅读以下内容：

• https://typescript-eslint.io/getting-started：基本“入门”指南
• https://typescript-eslint.io/getting-started/typed-linting：用于添加类型化 linting
• https://typescript-eslint.io/packages/typescript-eslint#config：用于可选的

  tseslint.config

  辅助函数来获取类型信息和更好的

  extends

  支持