给 vite 创建的 React 项目配置 ESLint

---

前言

最新的 react-router 中采用了 vite + react

一、下载安装相关的依赖包

推荐安装以下 9 个包：

• eslint：
  • ESLint 是一种用于识别和报告在 ECMAScript/JavaScript 代码中发现的模式的工具。
  • 必须首先安装这个依赖包，因为其他的依赖包建立在它之上。
• eslint-define-config：为 .eslintrc.js 文件提供 defineConfig 功能。
• eslint-plugin-react：用于 React 的 ESLint 规则。
• eslint-plugin-react-hooks：这个 ESLint 插件强制执行 React 官网规定的 Hooks 规则。
• prettier：
  • 代码格式化程序。
  • Prettier 2.5 发布：支持 TypeScript 4.5 新语法和 MDX v2 注释语法
• eslint-plugin-prettier：
  • 将 Prettier 作为 ESLint 规则运行。
  • 如果你想禁用与代码格式相关的所有其他 ESLint 规则，并且仅启用检测潜在错误的规则，则此插件效果最佳。
  • 如果你安装了 eslint 那么你应该会遇到 eslint 规则和 prettier 规则冲突。可用 eslint-config-prettier 解决 eslint 规则和 prettier 规则的冲突。
• eslint-config-prettier：关闭所有不必要或可能与 Prettier 冲突的规则。
• @typescript-eslint/eslint-plugin：一个为 TypeScript 代码库提供 lint 规则的 ESLint 插件。
• @typescript-eslint/parser：使 ESLint 支持 TypeScript 的工具。

因为只有开发阶段需要 eslint，所以将 eslint 的这些依赖添加到开发阶段的依赖 devDependencies 中即可。

eslint 的 2 个包：

npm i eslint eslint-define-config -D

react 的 2 个包：

npm i eslint-plugin-react eslint-plugin-react-hooks -D

prettier 的 3 个包：

npm i prettier eslint-config-prettier eslint-plugin-prettier -D

typescript 的 2 个包：

npm i @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

二、配置 .eslintrc.js

使用基于 eslint-define-config 依赖的 defineConfig 方法来配置 .eslintrc.js。

defineConfig 方法里的基本成员：

• root：是否开启 eslint。
• env：配置编译器宏环境。
• parser：解析器。
• parserOptions：为自定义的解析器的配置，需要配置 parserOptions 属性来设置解析器选项。其详细配置下面会讲。
• extends：在此处添加更多通用规则集。
• rules：在此处 覆盖 或 添加 规则设置。

1、重点成员解析

（1）、parserOptions

parserOptions 用来配置解析器选项。

parserOptions 可用的选项有：

• parser：可选的。自定义解析器。比如：@babel/eslint-parser或 @typescript-eslint/parser
• ecmaVersion：
  • 可设为 3、5（默认）、6……指定要使用的 ECMAScript 语法版本。
  • 可设为 2015（同6）、2016（同7）、2017（同8）……基于年份的命名。
  • 可设为 “latest”，以使用最新支持的版本。
• sourceType：默认是 “script”。当代码在 ECMAScript 模块中时其值需设为 “module”。
• allowReserved：可选的。布尔值。如果 ecmaVersion 是 3，就允许使用保留字作为标识符，否则不允许。
• ecmaFeatures：可选的。一个对象，指示您想使用哪些附加语言功能：
  • globalReturn：允许 return 全局范围内的语句。
  • impliedStrict：布尔值。如果 ecmaVersion 是 5 或更大，就启用全局严格模式，否则无需启用。
  • jsx：是否启用 JSX。

2、.eslintrc.js 配置案例

const { defineConfig } = require('eslint-define-config')

module.exports = defineConfig({
  env: { // 环境
      browser: true, // 浏览器环境中的全局变量。
      node: true, // Node.js 全局变量和 Node.js 作用域。
      es6: true // 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。
  },
  parser: "@typescript-eslint/parser", // 解析器
  parserOptions: { // 解析器配置
    ecmaVersion: "latest", // 5（默认）， 你可以使用 6、7、8、9 或 10 来指定你想要使用的 ECMAScript 版本。你也可以用年份命名的版本号，你也可以用 latest 来指向最新的版本。
    sourceType: "module", // 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。
    ecmaFeatures: { // 表示你想使用的额外的语言特性
      jsx: true // 启用 JSX
    }
  },
  extends:  [
    "eslint:recommended",
    "prettier",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  plugins: [
    "prettier",
    "react",
    "react-hooks",
    "@typescript-eslint"
  ],
  rules: {
    // eslint 的配置
    "quotes": [ERROR, "single"], //单引号
    'no-console': ['error', { allow: ['log'] }],// 允许使用 console.log()
    "no-confusing-arrow": 0, // 禁止在可能与比较操作符相混淆的地方使用箭头函数
    // eslint-plugin-react 的配置
    "react/no-this-in-sfc": 0,
    "react/prop-types": 0,
    "react/display-name": "off",
    // eslint-plugin-react-hooks 的配置
    "react-hooks/rules-of-hooks" : "error", 
    "react-hooks/exhaustive -deps" : "warn" 
  }
})

对于 rules 规则集的配置，请参考以下官方规则：

• TypeScript ESLint Rules
• eslint-plugin-vue Available rules
• ESLint Rules 中文

三、配置 .eslintignore

*.sh
*.md
*.woff
*.ttf
.vscode
.idea
.husky
.local
dist
node_modules
Dockerfile
/public
/docs
/bin

四、配置 prettier.config.js

配置 Prettier 的选项：

• Print Width：打印宽度
• Tab Width：标签宽度
• Tabs：标签
• Semicolons：分号
• Quotes：引号
• Quote Props：引用对象中的属性
• JSX Quotes：在 JSX 中使用单引号而不是双引号
• Trailing Commas：尾部逗号
• Bracket Spacing：在对象文字中的括号之间打印空格。
• Bracket Line：括号线
• Arrow Function Parentheses：箭头函数括号
• Range：格式化的范围
• Parser：指定要使用的解析器。
• File Path：文件路径
• Require Pragma：需要编译指示
• Insert Pragma：插入编译指示
• Prose Wrap：散文包装
• HTML Whitespace Sensitivity：HTML 空白敏感性
• Vue files script and style tags indentation：Vue 文件脚本和样式标签缩进
• End of Line：行结束
• Embedded Language Formatting：嵌入式语言格式

prettier.config.js 配置案例：

module.exports = {
  printWidth: 100, // 最大行长规则通常设置为 100 或 120。
  tabWidth: 2, // 指定每个标签缩进级别的空格数。
  useTabs: false, // 使用制表符而不是空格缩进行。
  semi: false, // true（默认）: 在每条语句的末尾添加一个分号。false：仅在可能导致 ASI 失败的行的开头添加分号。
  singleQuote: true, // 使用单引号而不是双引号
  quoteProps: 'as-needed', // 引用对象中的属性时，仅在需要时在对象属性周围添加引号。
  bracketSpacing: true, // 在对象文字中的括号之间打印空格。
  trailingComma: 'none', // "none":没有尾随逗号。"es5": 在 ES5 中有效的尾随逗号（对象、数组等），TypeScript 中的类型参数中没有尾随逗号。"all"- 尽可能使用尾随逗号。
  bracketSameLine: false, // 将>多行 HTML（HTML、JSX、Vue、Angular）元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭合元素）。
  jsxSingleQuote: false, // 在 JSX 中使用单引号而不是双引号。
  arrowParens: 'always', // 在唯一的箭头函数参数周围始终包含括号。
  insertPragma: false, // 插入编译指示
  requirePragma: false, // 需要编译指示
  proseWrap: 'never', // 如果散文超过打印宽度，则换行
  htmlWhitespaceSensitivity: 'strict', // 所有标签周围的空格（或缺少空格）被认为是重要的。
  endOfLine: 'lf', // 确保在文本文件中仅使用 ( \n)换行，常见于 Linux 和 macOS 以及 git repos 内部。
  rangeStart: 0, // 格式化文件时，回到包含所选语句的第一行的开头。
};

五、配置 .prettierignore

/dist/*
/public/*
/node_modules/**
.local
.output.js
**/*.svg
**/*.sh

六、问题的处理

1、路径中不识别 @ 符

请去检查并完善 vite.config.ts 配置文件中是否对 @ 符进行了配置。没有的话，请参阅此文。

2、ts 不识别 jsx、tsx 类型的文件

报错：无法找到模块“xxx”的声明文件，xxx隐式拥有 “any“ 类型

请去检查并完善 tsconfig.json 配置文件。可参阅此文来解决此问题。

【参考文章】
vite + react + ts 手摸手做项目系列一 （项目配置篇）
vite创建react项目及基础配置
React+vite3.x实战配置
Vite从零搭建React+TS项目（含eslint、husky配置）
Vite + React + Typescript 最佳实践
React项目配置prettier和eslint的方法

【推荐阅读】
ESLint 中文官网文档：配置 ESLint
TypeScript ESLint 文档
配置 Prettier 的选项