React Vite 项目增加 eslint 和 prettier

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. .prettierrc.js 文件

/**
 * @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"
  }
}