Vite: 集成Lint工具规范代码

最新推荐文章于 2025-11-14 11:29:20 发布

原创

最新推荐文章于 2025-11-14 11:29:20 发布 · 1.9k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #Vite

概述

在前端开发中，尤其是在大型项目中，代码的规范性和一致性对于项目的可维护性、可读性以及团队协作效率至关重要。为了保障代码质量，前端社区涌现出了许多Lint工具，如ESLint、Prettier、Stylelint等，它们能帮助我们自动化地检查并修复代码中的潜在问题。本文将介绍如何在Vite项目中集成这些Lint工具，以规范代码质量
在真实的工程项目中，尤其是多人协作的场景下，代码规范就变得非常重要了，它可以用来统一团队代码风格，避免不同风格的代码混杂到一起难以阅读，有效提高代码质量，甚至可以将一些语法错误在开发阶段提前规避掉。但仅有规范本身不够，我们需要自动化的工具(即 Lint 工具 )来保证规范的落地，把代码规范检查(包括自动修复 )这件事情交给机器完成，开发者只需要专注应用逻辑本身

JS/TS 规范工具: ESLint

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误
Eslint 一款插件化的 JavaScript 代码静态检查工具，通过解析代码的 AST 来分析代码格式，检查代码的风格和质量问题
现在，Eslint 已经成为一个非常成功的开源项目了，基本上属于前端项目中 Lint 工具的标配, ESLint的使用并不复杂，主要通过配置文件对各种代码格式的规则( rules )进行配置，以指定具体的代码规范
目前开源社区也有一些成熟的规范集可供使用，著名的包括 Airbnb JavaScript 代码规范、Standard JavaScript 规范、Google JavaScript 规范等等，你可以在项目中直接使用这些成熟的规范，也可以自己定制一套团队独有的代码规范，这在一些大型团队当中还是很常见的

1 ）初始化

来利用 ESLint 官方的 cli 在现有的脚手架项目中进行初始化操作，首先我们
需要安装 ESLint: $ pnpm i eslint -D
接着执行 ESLint 的初始化命令，并进行如下的命令行交互: $ npx eslint --init

接着 ESLint 会帮我们自动生成 .eslintrc.js 配置文件。需要注意的是，在上述初始化流程中我们并没有用 npm 安装依赖，需要进行手动安装: $ pnpm i eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest

2 ）核心配置解读

2.1 parser - 解析器

ESLint 底层默认使用 Espree来进行 AST 解析，这个解析器目前已经基于 Acron 来实现，虽然说 Acron 目前能够解析绝大多数的 ECMAScript 规范的语法，但还是不支持TypeScript ，因此需要引入其他的解析器完成 TS 的解析。社区提供了 @typescript-eslint/parser 这个解决方案，专门为了 TypeScript 的解析而诞生，将 TS 代码转换为 Espree 能够识别的格式(即 Estree 格式)，然后在 Eslint 下通过 Espree 进行格式检查，以此兼容了 TypeScript 语法

2.2 parserOptions - 解析器选项

这个配置可以对上述的解析器进行能力定制，默认情况下 ESLint 支持 ES5 语法，你可以配置这个选项，具体内容如下:
- ecmaVersion: 这个配置和 Acron 的 ecmaVersion 是兼容的，可以配置 ES + 数字 (如 ES6)或者 ES + 年份 (如 ES2015)，也可以直接配置为 latest ，启用最新的 ES 语法
- sourceType: 默认为 script ，如果使用 ES Module 则应设置为 module
- ecmaFeatures: 为一个对象，表示想使用的额外语言特性，如开启 jsx

2.3 rules - 具体代码规则

rules 配置即代表在 ESLint 中手动调整哪些代码规则，比如禁止在 if 语句中使用赋值语句这条规则可以像如下的方式配置:

// .eslintrc.js
module.exports = {
     
     
 // 其它配置省略
 rules: {
     
     
 // key 为规则名，value 配置内容
 "no-cond-assign": ["error", "always"]
 }
}

在 rules 对象中， key 一般为规则名， value 为具体的配置内容，在上述的例子中我们设置为一个数组，数组第一项为规则的 ID ，第二项为规则的配置。
这里重点说一说规则的 ID，它的语法对所有规则都适用，你可以设置以下的值:
- off 或 0 : 表示关闭规则。
- warn 或 1 : 表示开启规则，不过违背规则后只抛出 warning，而不会导致程序退出
- error 或 2 : 表示开启规则，不过违背规则后抛出 error，程序会退出
具体的规则配置可能会不一样，有的是一个字符串，有的可以配置一个对象，可以参考 ESLint 官方文档
当然，你也能直接将 rules 对象的 value 配置成 ID，如: “no-cond-assign”:
“error”

2.4 plugins

上面提到过 ESLint 的 parser 基于 Acorn 实现，不能直接解析 TypeScript，需要我们指定 parser 选项为 @typescript-eslint/parser 才能兼容 TS 的解析。同理，ESLint 本身也没有内置 TypeScript 的代码规则，这个时候 ESLint 的插件系统就派上用场了。我们需要通过添加 ESLint 插件来增加一些特定的规则，比如添加 @typescript-eslint/eslintplugin 来拓展一些关于 TS 代码的规则，如下代码所示
```
// .eslintrc.js
module.exports = {
     
     
 // 添加 TS 规则，可省略`eslint-plugin`
 plugins: ['@typescript-eslint']
}
```

值得注意的是，添加插件后只是拓展了 ESLint 本身的规则集，但 ESLint 默认并没有开启这些规则的校验！如果要开启或者调整这些规则，你需要在 rules 中进行配置，如:

// .eslintrc.js
module.exports = {
     
     
	 // 开启一些 TS 规则
	 rules: {
     
     
		 '@typescript-eslint/ban-ts-comment': 'error',
		 '@typescript-eslint/no-explicit-any': 'warn',
	 }
}

2.5 extends - 继承配置

extends 相当于继承另外一份 ESLint 配置，可以配置为一个字符串，也可以配置成一个字符串数组。主要分如下 3 种情况:
- 从 ESLint 本身继承；
- 从类似 eslint-config-xxx 的 npm 包继承；
- 从 ESLint 插件继承
```
// .eslintrc.js
module.exports <
```