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"
    }
}

4. 运行后请重启vscode 以便于 sort plugin 生效