在上一节的内容中，我们详细讲解了如何在 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