React Vite 項目增加 eslint 和 prettier

Eslint 版本為 8.X

1. 安裝 8.X 版本的 eslint

pnpm i eslint@^8.57.0 -D    

2. 安裝其他包

pnpm add -D eslint-plugin-import prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-prettier eslint-config-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

3. 初始化 eslint

npx eslint --init 

3.1. 選擇 eslint 的校驗模式

選擇第三個

3.2. 選擇項目類型

選擇第一個 ESM 規範

3.3. 選擇項目框架

我們是 React，選擇第一個

3.4. 是否使用 TS

項目中建議使用 TS

3.5. 運行在哪？

我這個在瀏覽器

3.6. 項目風格？

選擇第二個

3.7. 選擇 config 文件類型

我這邊選擇的是 JS

3.8. 縮進

tabs

3.9. 單引號雙引號

3.10. 行尾？

3.11. 是否需要分號？

習慣了不要分號

3.12. 添加依賴

YES

3.13. 安裝方式

pnpm 更快一些

4. .eslintrc.cjs 文件

把默認生成的替換為以下內容

module.exports = {
  root: true,
  globals: {
    chrome: true // 保留對 Chrome 擴展的支持
  },
  env: {
    browser: true,
    node: true,
    es2021: true
  },
  parser: '@typescript-eslint/parser', // 使用 TypeScript 解析器
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true // 啓用 JSX 支持
    }
  },
  extends: [
    'eslint:recommended', // 基本 ESLint 推薦配置
    'plugin:react/recommended', // React 推薦配置
    'plugin:react-hooks/recommended', // React Hooks 推薦配置
    'plugin:@typescript-eslint/recommended', // TypeScript 推薦配置
    'prettier', // 使用 Prettier
    'plugin:prettier/recommended' // 確保 Prettier 配置生效
  ],
  plugins: ['react', 'react-hooks', '@typescript-eslint', 'import'], // 加載相關插件
  settings: {
    react: {
      version: 'detect' // 自動檢測 React 版本
    }
  },
  rules: {
    'react/react-in-jsx-scope': 'off', // React 17+ 不需要顯式導入 React
    'react/prop-types': 'off', // 如果使用 TypeScript，則不需要 PropTypes
    '@typescript-eslint/no-empty-function': 0,
    '@typescript-eslint/no-empty-interface': 0,
    '@typescript-eslint/no-explicit-any': 0,
    '@typescript-eslint/no-var-requires': 0,
    '@typescript-eslint/no-non-null-assertion': 0,
    '@typescript-eslint/no-unused-expressions': 'off',
    'semi': ['error', 'never'], // 禁止分號
    'prettier/prettier': 'error', // 強制使用 Prettier 格式化
    // 導入排序規則
    'import/order': [
      'error',
      {
        'newlines-between': 'never',
        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
        pathGroups: [
          {
            pattern: 'react',
            group: 'external',
            position: 'before'
          },
          {
            pattern: 'react-dom',
            group: 'external',
            position: 'before'
          },
          {
            pattern: '@/components/**',
            group: 'internal',
            position: 'before'
          },
          {
            pattern: '@/utils/**',
            group: 'internal',
            position: 'before'
          }
        ],
        pathGroupsExcludedImportTypes: ['react', 'react-dom']
      }
    ]
  },
  overrides: [
    {
      files: ['*.tsx', '*.jsx'], // 對 .tsx 和 .jsx 文件的特殊規則
      rules: {
        'react/prop-types': 'off' // TS 文件通常不需要 PropTypes
      }
    }
  ]
}

5. .eslintignore 文件

根據項目自己添加過濾文件

node_modules/
dist/
build/
.vscode
.idea
.husky
*.json
*.config.js

6. <font style="color:rgb(38, 38, 38);">.prettierrc.js 文件</font>

/**
 * @type {import('prettier').Options}
 */
export default {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: false,
  singleQuote: true,
  trailingComma: "none",
  bracketSpacing: true,
  bracketSameLine: true,
  plugins: ["@ianvs/prettier-plugin-sort-imports"],
  importOrder: [
    "<BUILTIN_MODULES>", // Node.js built-in modules
    "<THIRD_PARTY_MODULES>", // Imports not matched by other special words or groups.
    "", // Empty line
    "^@plasmo/(.*)$",
    "",
    "^@plasmohq/(.*)$",
    "",
    "^~(.*)$",
    "",
    "^[./]"
  ]
}

7. .prettierrc.json 文件

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
}

8. .prettierignore 文件

# 忽略格式化文件 (根據項目需要自行添加)
node_modules/
dist/
build/
*.config.js

9. .vscode/extensions.json 文件

{
  "recommendations": [
    "Vue.vscode-typescript-vue-plugin", 
    "antfu.iconify", // iconify 圖標顯示
    "antfu.unocss", // unocss 代碼提示
    "christian-kohler.path-intellisense", // 文件路徑提示/補全
    "dbaeumer.vscode-eslint", // eslint
    "esbenp.prettier-vscode", // prettier
    "eamodio.gitlens", // git
    "editorconfig.editorconfig", // editorconfig
    "mikestead.dotenv", // .env支持
    "naumovs.color-highlight", // 顏色高亮
    "steoates.autoimport",
    "vue.volar" // vue3
  ]
}

10. .vscode/settings.json 文件

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.fontLigatures": true,
  "editor.formatOnSave": false,
  "editor.guides.bracketPairs": "active",
  "editor.quickSuggestions": {
    "strings": true
  },
  "eslint.enable": true,
  "editor.tabSize": 2,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "json",
    "jsonc",
    "json5",
    "yaml",
    "yml",
    "markdown"
  ],
  "files.associations": {
    "*.env.*": "dotenv"
  },
  "files.eol": "\n",
  "path-intellisense.mappings": {
    "@": "${workspaceFolder}/src",
    "~@": "${workspaceFolder}/src"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
    "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  }
}