如何在Vite项目中使用Lint保证代码质量

Posted 2023-03-10 xiangzhihong8

通常，大型前端项目都是多人参与的，由于开发者的编码习惯和喜好都不尽相同，为了降低维护成本，提高代码质量，所以需要专门的工具来进行约束，并且可以配合一些自动化工具进行检查，这种专门的工具称为Lint，可能大家接触得最多就是ESLint。

对于实现自动化代码规范检查及修复，可能大家已经听说过ESLint、Prettier、Stylelint和Commitlint 等诸多主流 Lint 工具的概念和使用，而在实际使用过程中，可能还需要配合husky、lint-staged、VSCode等插件形成完整的Lint工具链。虽然这部分内容和Vite没有直接的联系，但也是Vite项目工程化的重要一环。

一、ESLint

1.1 简介

Eslint是前端大牛Nicholas C. Zakas在2013年开源的一个用于监测javascript代码的项目，可以用它来检查语法规则和代码风格，从而保证项目中的代码语法正确、风格统一。目前，Eslint已成为前端工程化的必备插件。

ESLint的使用并不复杂，主要通过配置文件对各种代码格式的规则(rules)进行配置，以指定具体的代码规范。同时，目前开源社区也有一些成熟的规范集可供使用，比如Airbnb JavaScript代码规范、Standard JavaScript规范、Google JavaScript规范等，你可以在项目中直接使用这些成熟的规范，当然也可以根据实际情况定制一套团队独有的代码规范。

1.2 初始化ESLint

使用ESLint之前，需要先安装 ESLint，然后在利用 ESLint 官方的 cli 脚手架工具进行初始化操作。