Eslint Flat Config for Typescript & React

Oct 10, 2024

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

配置内容：

支持 TypeScript 和 React，以及相关插件配置
采用各插件的推荐配置
与 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,
      },
    },
  },
);

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

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

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',
      },
    },
  }
  // ...
)

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

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

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

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

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,
      },
    },
  },
  // ...
)

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

import prettierConfig from 'eslint-config-prettier';

(
  prettierConfig,
)

/**
 * @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',
};

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

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

//@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]
);

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

export default config;

On this page

Eslint Flat Config for Typescript & React

基础配置：JavaScript 和 TypeScript

React 和 JSX 支持

React Hook

额外插件：Prettier

VSCode 配置

安装 VSCode 插件

配置 VSCode 设置

完整的配置

On this page

Eslint Flat Config for Typescript & React

基础配置：JavaScript 和 TypeScript

React 和 JSX 支持

React Hook

额外插件：JSX a11y

额外插件：Prettier

VSCode 配置

安装 VSCode 插件

配置 VSCode 设置

完整的配置