React Vite 项目增加 eslint 和 prettier

React Vite 项目增加 eslint 和 prettier

Eslint 版本为 8.X

1. 安装 8.X 版本的 eslint

shell 复制代码
pnpm i eslint@^8.57.0 -D    

2. 安装其他包

shell 复制代码
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

shell 复制代码
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 文件

把默认生成的替换为以下内容

javascript 复制代码
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 文件

根据项目自己添加过滤文件

bash 复制代码
node_modules/
dist/
build/
.vscode
.idea
.husky
*.json
*.config.js

6. .prettierrc.js 文件

javascript 复制代码
/**
 * @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 文件

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

8. .prettierignore 文件

bash 复制代码
# 忽略格式化文件 (根据项目需要自行添加)
node_modules/
dist/
build/
*.config.js

9. .vscode/extensions.json 文件

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 文件

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"
  }
}
相关推荐
脑袋大大的18 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0127 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
v-for中key值的作用:为什么我总被要求加这个'没用的'属性?
前端·javascript·vue.js
goldenocean3 小时前
React之旅-05 List Key
前端·javascript·react.js
Mintopia5 小时前
像素的进化史诗:计算机图形学与屏幕的千年之恋
前端·javascript·计算机图形学
Mintopia5 小时前
Three.js 中三角形到四边形的顶点变换:一场几何的华丽变身
前端·javascript·three.js