一、準(zhǔn)備環(huán)境

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文件，內(nèi)容為：

// 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, // 瀏覽器環(huán)境全局變量
        ...globals.node, // Node.js 環(huán)境全局變量
      },
    },
    plugins: {
      '@typescript-eslint': tsPlugin, // 啟用 TypeScript 插件
    },
    rules: {
      // TypeScript 相關(guān)規(guī)則
      '@typescript-eslint/no-unused-vars': 'warn', // 檢查未使用的變量
      '@typescript-eslint/no-explicit-any': 'warn', // 禁止使用 any 類型
    },
  },
  {languageOptions: {globals: {...globals.browser, ...globals.node}}},
  js.configs.recommended, // ESLint 內(nèi)置推薦規(guī)則
  reactRecommended, // React 推薦規(guī)則
  {
    plugins: {
      'react-hooks': reactHooks, // 聲明 react-hooks 插件
    },
    rules: {
      'react/jsx-uses-react': 'error', // 防止未使用的 React 導(dǎo)入
      'react/jsx-uses-vars': 'error', // 防止未使用的 JSX 變量
      'react/react-in-jsx-scope': 'off', // React 17+ 不需要顯式導(dǎo)入 React
      'react-hooks/rules-of-hooks': 'error', // 檢查 React Hooks 規(guī)則
      'react-hooks/exhaustive-deps': 'warn', // 檢查 useEffect 依賴項(xiàng)
      'react/no-deprecated': 'warn', // 禁用 React 棄用 API 的警告
      'react/no-unescaped-entities': [
        'error',
        {
          forbid: ['>', '}', '"'], // 只禁止 >、}、" 未轉(zhuǎn)義
        },
      ],
      'no-useless-escape': 'warn', // 檢查不必要的轉(zhuǎn)義字符
    },
  },
  prettier, // 禁用與 Prettier 沖突的規(guī)則
  prettierPlugin, // 將 Prettier 作為 ESLint 規(guī)則運(yùn)行
  {
    ignores: ['node_modules/', 'dist/', 'build/', 'doc/', 'charts/', 'test/'], // 忽略特定目錄
  },
];

三、prettier配置

1.在根目錄添加.prettierrc文件，內(nèi)容為：

{
  "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文件，內(nèi)容為：

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

四、配置vscode

在根目錄添加.vscode文件夾，再添加.vscode/settings.json文件，內(nèi)容為：

// 配置后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代碼質(zhì)量檢測
yarn lint:fix // eslint代碼質(zhì)量檢測并修復(fù)
yarn format // prettier格式化