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"
  }
}
相关推荐
IT、木易1 分钟前
大白话阐述react和vue高阶组件的概念、优势及应用场景,以及区别,给出简单高阶组件的实现代码
前端·vue.js·react.js
HaanLen2 分钟前
React19源码系列之FiberRoot节点和Fiber节点
前端·javascript·react.js
冴羽13 分钟前
SvelteKit 最新中文文档教程(3)—— 数据加载
前端·javascript·svelte
云隙阳光i43 分钟前
实现手机手势签字功能
前端·javascript·vue.js
柠檬树^-^2 小时前
app.config.globalProperties
前端·javascript·vue.js
太阳花ˉ2 小时前
react(一):特点-基本使用-JSX语法
前端·react.js
赵大仁2 小时前
深入解析 React Diff 算法:原理、优化与实践
前端·react.js·前端框架
1024小神2 小时前
vue/react/vite前端项目打包的时候加上时间最简单版本,防止后端扯皮
前端·vue.js·react.js
起来改bug2 小时前
【pptx-preview】react+pptx预览
javascript·react.js·pptx
马可奥勒留3 小时前
声明
javascript