Vue3项目开发流程（二）

上一篇讲了如何搭建Vue3项目基础框架，今天讲一下关于前端开发时的代码规范和代码格式。在VS Code中分别下载ESLint和Prettier插件

ESLint

前端代码规范常使用ESLint，进行语法规范，然后在项目根目录创建.eslintrc.js或者.eslintrc.json配置文件，在配置文件内配置规则，或者在根项目的package.json中配置项eslintConfig中配置eslint的规则。

它有如下作用。

1. 代码规范检查‌：ESLint可以根据预设的规范对代码进行静态分析，检查代码中的潜在问题，如未使用的变量、未定义的变量、不符合规范的代码风格等。
2. 代码质量评估‌：ESLint可以根据预设的规则对代码进行质量评估，如代码复杂度、代码重复度等，帮助开发者提高代码质量。
3. 提供自定义规则‌：ESLint允许开发者根据自己的需求编写自定义规则，以适应特定的项目需求和编码风格。
4. 语法检查‌：ESLint可以检查代码中的语法错误，帮助开发者避免常见的语法错误。
5. 代码风格统一‌：ESLint可以根据预设的代码风格规则，对代码进行风格统一，确保整个项目的代码风格一致。
6. 代码自动修复‌：ESLint可以根据预设的规则自动修复代码中的一些问题，如自动添加缺失的分号、自动调整缩进等。

配置规则时有3个级别，0、1、2或者”off”、”warn”、”error”。

0或者”off”：关闭规则，不进行检查。

1或者”warn”：打开规则，违反该配置发出警告。

2或者”error”：关闭规则，违反该配发出置报错（程序会报错）。

可以自己配置规则，也可以使用第三方库的规则集，以下是ESLint常用的一些配置规则

Prettier

前端代码格式化常使用Prettier，Prettier的作用是对代码进行格式化，并不关注代码质量潜在问题的检查。它的规范更倾向于管理团队的代码风格的规范或统一。它支持多种语言格式化，如vue、html、css、json、jsx等，是一个综合的代码格式化工具。在项目根目录创建.prettierrc配置文件，在配置文件内配置规则，并且需要将Prettier设置为默认的格式化工具，然后在VS Code设置中将保存代码时格式化开启，这样保存文件时会自动进行代码的格式化。

以下是Prettier常用的一些配置规则

有了ESLint为什么还要用Prettier？

ESLint‌是一个开源的JavaScript代码检查工具，能够发现潜在的错误、不良实践和性能问题，如未使用的变量、潜在的类型错误或未处理的异常等。它专注于代码的质量和正确性，通过静态分析来检查代码是否符合预设的规则和标准，从而帮助开发者提高代码质量和减少潜在的错误‌。

‌ Prettier‌则是一个流行的代码格式化工具，自动格式化代码，消除了手动调整缩进、空格、括号等格式问题的需要。它确保团队成员遵循统一的编码风格和格式，无论团队成员有多少，都能保持代码风格的一致性。Prettier专注于代码的外观和格式，使得开发者可以专注于业务逻辑而不是代码样式，从而提高开发效率‌。

两者结合起来可以带来更大的优势。