在上一节的内容中,我们详细讲解了如何在 Vite 中实现 CSS 工程化方案,迈出了搭建脚手架项目的第一步。在本节中我们把目光投向项目中另外一个非常重要的部分——代码规范。
代码不仅是让机器看的,它也是需要给人看的。
在真实的工程项目中,尤其是多人协作的场景下,代码规范就变得非常重要了,它可以用来统一团队代码风格,避免不同风格的代码混杂到一起难以阅读,有效提高代码质量,甚至可以将一些语法错误在开发阶段提前规避掉。但仅有规范本身是不够的,我们需要自动化的工具(即Lint 工具)来保证规范的落地,把代码规范检查(包括自动修复)这件事情交给机器完成,开发者只需要写专注应用逻辑本身即可。
那么在本节我们将会一起来完成 Lint 工具链在项目中的落地,实现自动化代码规范检查及修复的能力。学完本节内容后,你不仅能熟悉诸如ESLint、Prettier、Stylelint、Commitlint 等诸多主流 Lint 工具的概念和使用,并且也能配合husky、lint-stage、VSCode 插件和Vite 生态在项目中集成完整的 Lint 工具链,搭建起完整的前端开发和代码提交工作流,这部分内容虽然和 Vite 没有直接的联系,但也是作为 Vite 项目搭建中非常重要的一环,是前端工程化的必备知识。
# JS/TS 规范工具: ESLint
# 简介
ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。
Eslint 是国外的前端大牛Nicholas C. Zakas在 2013 年发起的一个开源项目,有一本书被誉为前端界的"圣经",叫《JavaScript 高级程序设计》(即红宝书),他正是这本书的作者。
Nicholas 当初提起这个开源项目的时候,目的是为了打造一款插件化的 JavaScript 代码静态检查工具,通过解析代码的 AST 来进行代码格式分析,对代码的风格问题和质量问题进行检查。现在来看,Eslint 已经成为了一个非常成功的开源项目,目前基本上属于前端项目中 Lint 工具的标配。
ESLint 的使用其实并不复杂,主要通过配置文件对各种代码格式的规则(rules)进行配置,以指定具体的代码规范。目前开源社区也有一些成熟的规范集可供使用,著名的包括Airbnb JavaScript 代码规范、Standard JavaScript 规范、Google JavaScript 规范等等,你可以在项目中直接使用这些成熟的规范,也可以自己定制一套团队独有的代码规范,这在一些大型团队当中还是很常见的。
# 初始化
接下来我们来利用 ESLint 官方的 cli 在现有的脚手架项目中进行初始化操作,首先我们需要安装 ESLint:
pnpm i eslint -D
接着执行 ESLint 的初始化命令,并进行如下的命令行交互:
npx eslint --init

