1. 安装依赖
$ pnpm add -D eslint
$ pnpm add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-react
$ pnpm add -D eslint-plugin-import
$ pnpm add -D eslint-plugin-simple-import-sort eslint-plugin-react-hooks
- 首先要安装 eslint，eslint 默认使用 Espree 进行解析，无法识别 ts 的一些语法，所以需要安装一个 ts 的解析器 @typescript-eslint/parser，用它来代替默认的解析器，然后由 @typescript-eslint/eslint-plugin 来提供有关 ts 的规则补充。
- 由于是 react 项目，所以还需要插件 eslint-plugin-react 来支持 .tsx。
- eslint-plugin-simple-import-sort 用于为保证引用顺序一致降低git冲突。配合eslint 实现import 的自动排序。
2. 配置文件 eslint.config.mjs
eslint 9.0+ 以后要求配置文件比如为扁平化eslint.config.js\mjs
import { ESLint } from 'eslint';
import typescriptParser from '@typescript-eslint/parser';
import typescriptPlugin from '@typescript-eslint/eslint-plugin';
import simpleImportSort from 'eslint-plugin-simple-import-sort';
import sortImport from 'eslint-plugin-import';
export default [
{
ignores: ['node_modules/*', 'dist/*', 'eslint.config.js'],
},
{
files: ['**/*.{ts,tsx,js,jsx}'],
languageOptions: {
parser: typescriptParser,
parserOptions: {
ecmaVersion: 2020,
sourceType: 'module',
},
globals: {
React: 'readonly',
},
},
plugins: {
'@typescript-eslint': typescriptPlugin,
'simple-import-sort': simpleImportSort,
import: sortImport,
},
settings: {
react: {
version: 'detect',
},
},
rules: {
// 自定义您的规则
// Customize your rules
// 下面解决这个问题 Line 1:1: Definition for rule 'react/no-unstable-nested-components' was not found react/no-unstable-nested-components
// 'react/no-unstable-nested-components': 'on',
'simple-import-sort/imports': 'error',
'simple-import-sort/exports': 'error',
},
},
];
3.添加到 package scripts命令
// package.json
{
"scripts": {
"lint": "eslint",
"lint_fix": "eslint --fix"
}
}
