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"
  }
}
相关推荐
苹果电脑的鑫鑫24 分钟前
在使用element-ui时表单的表头在切换页面时第一次进入页面容易是白色字体解决方法
javascript·vue.js·ui
忧郁的蛋~33 分钟前
JavaScript性能优化的12种方式
开发语言·javascript·性能优化
海盗强37 分钟前
prototype和proto的区别
开发语言·javascript·原型模式
潜龙在渊灬41 分钟前
杂谈:前端 UI 框架和 UI 组件库的区别
javascript·vue.js·react.js
前端snow1 小时前
爬取数据利用node也行,你知道吗?
前端·javascript·后端
村头一颗草1 小时前
高德爬取瓦片和vue2使用
前端·javascript·vue.js
一袋米扛几楼981 小时前
【Node】Node.js环境变量配置,及下载地址
javascript·网络·node.js
还是鼠鼠1 小时前
Node.js--exports 对象详解:用法、示例与最佳实践
前端·javascript·vscode·node.js·web
Moment1 小时前
前端性能指标 —— FMP
前端·javascript·面试
爱上大树的小猪1 小时前
【前端实战】Flex布局实战:打造经典自适应导航栏(附移动端折叠方案)
前端·javascript·flexbox