一、准备环境

node：v22.11.0
yarn：1.22.22
npm ：10.9.0
react：18.3.1
react-dom： 18.3.1

typescript： 4.9.5

二、安装依赖

yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier eslint-config-react-app globals -D

三、package.json配置

{
"scripts": {
    ...
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
    "format": "prettier --write ."
  },
}

三、eslint配置

在根目录添加eslint.config.js文件，内容为：

// eslint.config.js
import js from '@eslint/js';
import tsParser from '@typescript-eslint/parser';
import tsPlugin from '@typescript-eslint/eslint-plugin';
import reactRecommended from 'eslint-plugin-react/configs/recommended.js';
import prettier from 'eslint-config-prettier';
import prettierPlugin from 'eslint-plugin-prettier/recommended';
import reactHooks from 'eslint-plugin-react-hooks';
import globals from 'globals'; // 引入 globals 包

export default [
  {
    files: ['**/*.test.js'], // 仅对测试文件生效
    languageOptions: {
      globals: {
        ...globals.mocha, // 启用 Mocha 的全局变量
        expect: 'readonly', // 声明 expect 是全局变量
      },
    },
  },
  {
    files: ['**/*.ts', '**/*.tsx'], // 仅对 TypeScript 文件生效
    languageOptions: {
      parser: tsParser, // 使用 TypeScript 解析器
      globals: {
        ...globals.browser, // 浏览器环境全局变量
        ...globals.node, // Node.js 环境全局变量
      },
    },
    plugins: {
      '@typescript-eslint': tsPlugin, // 启用 TypeScript 插件
    },
    rules: {
      // TypeScript 相关规则
      '@typescript-eslint/no-unused-vars': 'warn', // 检查未使用的变量
      '@typescript-eslint/no-explicit-any': 'warn', // 禁止使用 any 类型
    },
  },
  {languageOptions: {globals: {...globals.browser, ...globals.node}}},
  js.configs.recommended, // ESLint 内置推荐规则
  reactRecommended, // React 推荐规则
  {
    plugins: {
      'react-hooks': reactHooks, // 声明 react-hooks 插件
    },
    rules: {
      'react/jsx-uses-react': 'error', // 防止未使用的 React 导入
      'react/jsx-uses-vars': 'error', // 防止未使用的 JSX 变量
      'react/react-in-jsx-scope': 'off', // React 17+ 不需要显式导入 React
      'react-hooks/rules-of-hooks': 'error', // 检查 React Hooks 规则
      'react-hooks/exhaustive-deps': 'warn', // 检查 useEffect 依赖项
      'react/no-deprecated': 'warn', // 禁用 React 弃用 API 的警告
      'react/no-unescaped-entities': [
        'error',
        {
          forbid: ['>', '}', '"'], // 只禁止 >、}、" 未转义
        },
      ],
      'no-useless-escape': 'warn', // 检查不必要的转义字符
    },
  },
  prettier, // 禁用与 Prettier 冲突的规则
  prettierPlugin, // 将 Prettier 作为 ESLint 规则运行
  {
    ignores: ['node_modules/', 'dist/', 'build/', 'doc/', 'charts/', 'test/'], // 忽略特定目录
  },
];

三、prettier配置

1.在根目录添加.prettierrc文件，内容为：

{
  "semi": true,
  "singleQuote": true,
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 140,
  "endOfLine": "lf",
  "arrowParens": "always",
  "bracketSameLine": true,
  "bracketSpacing": false,
  "experimentalTernaries": false,
  "jsxSingleQuote": true,
  "quoteProps": "preserve",
  "trailingComma": "all",
  "singleAttributePerLine": false,
  "htmlWhitespaceSensitivity": "css",
  "proseWrap": "never",
  "insertPragma": false,
  "requirePragma": false,
  "embeddedLanguageFormatting": "auto"
}

2.在根目录添加.prettierignore文件，内容为：

**/*.md
**/*.svg
**/*.ejs
**/*.html
node_modules/
doc/
dist/
build/
.vscode/
build/
charts/
test/

四、配置vscode

在根目录添加.vscode文件夹，再添加.vscode/settings.json文件，内容为：

// 配置后Ctrl+s保存即可格式化代码
{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "eslint.enable": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
    ],
    "prettier.requireConfig": true
}

三、格式化命令

yarn lint // eslint代码质量检测
yarn lint:fix // eslint代码质量检测并修复
yarn format // prettier格式化