携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情
编程规范分析
规范二：代码格式化工具 Prettier
昨天，我们了解了 ESLint ，使用他可以是我们的代码格式变得更加规范，但其问题再上一篇也曾经说过，对于不熟许的同学来说，他可能使得开发时编码复杂度增加的问题
于是，问题就来了，我们有没有办法做到既能保证 ESLint 的校验，又能使得开发者不必去过分关注格式问题呢？
还是那句老话，万能的程序员有什么做不到的呢！下边就有请我们的 Prettier 出场
话不多说，先上官网
我在这里稍微总结一下 Prettier 是什么
1、一个代码格式化工具
2、开箱即用
3、可在 VSCode 中集成，方便使用
4、在保存时，可以使代码自动符合 ESLint 的规范
不过，想让其在保存时自动符合规范，还是需要进行少量的配置的，至于这些配置是什么，下边咱们就来看一看
ESLint 与 Prettier 配合解决代码格式问题
这里我们就以 VSCode 为例来去说明一下
1、在 VSCode 中安装 Prettier 插件，这个插件可以帮助我们在配置 Prettier 时获得提示（当然这一步可以不安装）
2、在项目中新建
.prettierrc 文件（此文件为 Prettier 的默认配置文件）
3、在该文件中写入如下配置（只是一个 demo）
{
// 不尾随分号
"semi": false,
// 使用单引号
"singleQuote": true,
// 多行逗号分隔的语法中，最后一行不加逗号
"trailingComma": "none"
}
4、打开 VSCode 的设置面板
5、在设置中，搜索
save，勾选 Format On Save
至此，你的 VSCode 在保存时，就会自动格式化代码了
但是，在使用中你会发现还是有一些问题的，其中最主要的就是 Prettier 和 ESLint 在某些问题上还是存在冲突的
比如我们在 Vue 文件中写一个 created 方法，写完之后，我们会发现控制台报了一个错误，大致意思就是说 created 这个方法应该与后面的小括号之间有一个空格
但是当我们加了这个空格，保存时，就会发现 Prettier 会自动帮我们将空格加上
此时，想要解决这个问题其实也非常简单，那就是使用我们上一篇所说的修改一下 ESLint 的配置就行
1、打开 .eslintrc.js 配置文件
2、在 rules 规则下，新增一条
'space-before-function-paren': 'off'
3、改规则表示关闭‘方法名后增加空格’的规则 4、重启项目
到这时，我们的 ESLint 结合 Prettier 算是基本完成了。在之后写代码的过程中，只需要保存代码， Prettier 就会帮我们自动修改
