前端代码格式化工具
前言
在多人合作开发项目的过程中，由于每个程序员的编程习惯不同，经常会出现代码风格不一致的情况。
由此引发出了一个问题 ---- 代码提交时，会出现大量的格式修改。
于是，我们制定了统一的开发标准来规范代码风格。
但是，程序员需要花费大量时间去熟悉开发标准，才能开发出风格统一的代码。
于是，为了让程序员的开发工作更方便，我们使用了代码格式化工具，让它自动对代码进行格式化。
目前，比较流行的代码格式化工具有 ESLint 和 Prettier 。
接下来，我们就一起来了解一下它们的功能和使用方法。
两个概念
代码格式化工具制定的规则分为两种：
代码风格规则：max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style...
这类规则关注的是代码的格式是否好看。
代码质量规则：no-unused-vars, no-extra-bind, no-implicit-globals, prefer-promise-reject-errors...
这类规则关注的是代码是否会出错。
ESLint
什么是 ESLint ？
ESLint 是一个用于识别 ECMAScript / JavaScript 并且按照规则给出报告的工具。
它既关注代码质量问题，也关注一部分代码风格问题。
为什么使用 ESLint ？
ESLint 可以检测出 JS 代码中的问题，并报告出来。
我们可以自己修复这些问题，也可以用 ESLint ，通过格式化代码来修复这些问题。
ESLint 的使用方式
安装 ESLint
npm install eslint --save-dev
创建配置文件
npm init @eslint/config
检测指定文件中的代码问题
npx eslint yourfile.js
使用 ESLint 格式化文件
npx eslint --fix yourfile.js
为了更直观地定位 ESLint 检测到的代码问题，并且更方便的修复它们，我们需要在 VSCode 中安装 ESLint 插件。
安装 ESLint 插件
这样就可以在 VSCode 中直观地看到代码问题了。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uZBbO7Rl-1646983139098)(./images/vscode-eslint-2.jpg)]
在 VSCode 配置文件中加入代码：
"editor.codeActionsOnSave": {"source.fixAll.eslint": true}
这样在保存的时候， ESLint 就会自动格式化代码了。
Prettier
什么是 Prettier ？
Prettier 是一个“固执己见的”代码格式化工具。
它只关注代码风格问题，完全不关注代码质量问题。
所谓“固执己见”就是指，Prettier 对代码风格进行了明确的设置，而且不支持改动。
如果你使用 Prettier ，那你就要完全接受它制定的代码风格规则。
为什么使用 Prettier ？
Prettier 可以自动帮我们把代码格式化成统一的风格。
虽然， Prettier 制定的代码风格规则不一定 100% 符合我们希望的方式。
但是，使用了 Prettier ，我们就可以搁置关于代码风格的争论，把精力投入到开发工作中。
Prettier 的使用方式
我们可以在项目中安装 Prettier 来使用：
安装 Prettier
npm install --save-dev --save-exact prettier
创建配置文件
echo {}> .prettierrc.json
格式化所有文件
npx prettier --write .
也可以在 VSCode 中安装 Prettier 插件来使用：
安装 Prettier 插件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2jyi1RQz-1646983139126)(./images/prettier-vscode.jpg)]
使用 Prettier 格式化代码
在文档中右键选择格式化方式
选择使用 Prettier 格式化
如果项目中安装了 Prettier ，那么插件会优先使用项目中安装的 Prettier 版本，格式化代码。
如果项目中没有安装 Prettier ，那么插件会使用自带的 Prettier 版本，格式化代码。
也就是说，无论项目中是否安装了 Prettier ，VSCode 的 Prettier 插件都可以正常工作。
ESLint 和 Prettier 一起使用
我们了解到 Prettier 制定的是代码风格规则，ESLint 既有代码风格规则也有代码质量规则。
那么就出现了一个问题，Prettier 和 ESLint 的代码风格规则有一部分是有冲突的。
我们需要安装 eslint-config-prettier 来关闭掉 ESLint 中与 Prettier 有冲突的规则，让 Prettier 来完全掌控代码风格。
安装 eslint-config-prettier ：
npm install --save-dev eslint-config-prettier
修改配置文件 .eslintrc.* ：
{"extends": ["some-other-config-you-use","prettier"]}
这样我们就可以同时使用 ESLint 和 Prettier 了。
