Eslint Flat Config for Typescript & React

Eslint v9.x 引入了新的 Flat Config 配置方式,相比传统的 .eslintrc 文件,它提供了更简洁、灵活的配置选项。本教程指导如何为 TypeScript 和 React 项目设置 Eslint Flat Config。

配置内容：

1. 支持 TypeScript 和 React，以及相关插件配置
2. 采用各插件的推荐配置
3. 与 Prettier 协同工作, Eslint 专注于代码质量检查

基础配置：JavaScript 和 TypeScript

安装依赖：

npm install --save-dev eslint @eslint/js typescript typescript-eslint

eslint.config.mjs：

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

tseslint.config(
  js.configs.recommended,
  ...tseslint.configs.recommendedTypeChecked,
  {
    languageOptions: {
      parserOptions: {
        project: ['tsconfig.eslint.json'], // Or projectService: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
);

为了让 ESLint 正确识别 TypeScript 文件,我们需要创建一个专用的 tsconfig 文件。

tsconfig.eslint.json：

{
  "extends": "./tsconfig.json",
  "include": ["**/*.ts", "**/*.tsx", "**/*.mjs", "**/*.js"]
}

注意:也可以使用 projectService: true 代替 project 配置,但可能会导致部分文件无法识别。详情请参考 Project Service Issues。

React 和 JSX 支持

安装依赖：

npm install --save-dev eslint-plugin-react globals

eslint.config.mjs：

import reactPlugin from 'eslint-plugin-react';
import globals from 'globals';

const tsAndTsxFile = '**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}';

(
  // ...
  {
    files: [tsAndTsxFile],
    ...reactPlugin.configs.flat.recommended,
    languageOptions: {
      ...reactPlugin.configs.flat.recommended.languageOptions,
      globals: {
        ...globals.serviceworker,
        ...globals.browser,
      },
    },
  },
  reactPlugin.configs.flat['jsx-runtime'],
  {
    settings: {
      react: {
        version: 'detect',
      },
    },
  }
  // ...
)

React Hook

安装依赖：

eslint-plugin-react-hooks 需要安装 rc 版本

npm install --save-dev eslint-plugin-react-hooks@rc

eslint.config.mjs：

import reactHooksPlugin from 'eslint-plugin-react-hooks';

(
  // ...
  {
    files: [tsAndTsxFile],
    plugins: {
      'react-hooks': reactHooksPlugin,
    },
    rules: {
      ...reactHooksPlugin.configs.recommended.rules,
    },
  },
  // ...
)

额外插件：JSX a11y

为了提高应用的可访问性,我们添加 JSX a11y 插件。

安装依赖：

npm install --save-dev eslint-plugin-jsx-a11y

eslint.config.mjs：

import jsxA11y from 'eslint-plugin-jsx-a11y';
import globals from 'globals';

(
  // ...
  {
    files: [tsAndTsxFile],
    ...jsxA11y.flatConfigs.recommended,
    languageOptions: {
      ...jsxA11y.flatConfigs.recommended.languageOptions,
      globals: {
        ...globals.serviceworker,
        ...globals.browser,
      },
    },
  },
  // ...
)

额外插件：Prettier

参考 Suggested Usage - Prettier。我们只安装 eslint-config-prettier，不使用 eslint-plugin-prettier。 eslint-config-prettier 用来禁用 eslint 中与 prettier 冲突的规则。 而格式化交给 vscode 的插件 prettier 来完成。后面看 vscode 的配置。

安装依赖：

npm install --save-dev eslint-config-prettier

eslint.config.mjs：

import prettierConfig from 'eslint-config-prettier';

(
  prettierConfig,
)

prettier.config.mjs：

添加 prettier 配置，来给 vscode 插件识别。如果需要运行 prettier 命令，还需要安装 prettier。

/**
 * @see https://prettier.io/docs/en/configuration.html
 * @type {import("prettier").Config}
 */
export default {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  quoteProps: 'as-needed',
  jsxSingleQuote: false,
  trailingComma: 'es5',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  arrowParens: 'always',
  endOfLine: 'lf',
  embeddedLanguageFormatting: 'auto',
};

VSCode 配置

为了在 VSCode 中无缝集成 ESLint 和 Prettier,我们需要进行一些额外的配置。这样可以确保在编码过程中实时获得语法错误提示,并在保存文件时自动格式化代码。

安装 VSCode 插件

首先,请在 VSCode 中安装以下两个必要的插件:

1. ESLint
2. Prettier - Code formatter

配置 VSCode 设置

创建或编辑项目根目录下的 .vscode/settings.json 文件,添加以下配置:

{
  // 保存时自动格式化
  "editor.formatOnSave": true,
  // 保存时自动使用 eslint 修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  // 格式化工具
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

完整的配置

可以参考 @yueqing/eslint-config-ts 的配置。 也可以直接使用这个配置。

npm install --save-dev @yueqing/eslint-config-ts @yueqing/prettier-config eslint prettier

eslint.config.mjs：

//@ts-check

import eslintConfig from '@yueqing/eslint-config-ts';
import tailwindcssConfig from '@yueqing/eslint-config-ts/tailwindcss-config';

export default eslintConfig(
  {
    project: ['./tsconfig.eslint.json'],
    rootDir: import.meta.dirname,
  },
  [...tailwindcssConfig]
);

prettier.config.mjs：

import config from '@yueqing/prettier-config';

export default config;