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,
},
},
},
);
为了让 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 中安装以下两个必要的插件:
- ESLint
- 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;
