前端一些好学好用的代码规范-Prettier工具

我们知道了 ESLint 可以让我们的代码格式变得更加规范，但是同样的它也会带来开发时编码复杂度上升的问题。

那么有没有办法既可以保证 ESLint 规则校验，又可以让开发者无需关注格式问题来进行顺畅的开发呢？

答案是：有的！

而解决这个问题的关键就是 prettier！（点击

Prettier 中文网 · Prettier 是一个“有态度”的代码格式化工具

进入 prettier 中文官网！）

prettier 是什么？

1. 一个代码格式化工具
2. 开箱即用
3. 可以直接集成到 VSCode 之中
4. 在保存时，让代码直接符合 ESLint 标准（需要通过一些简单配置）

安装与使用插件

1. 在 VSCode 中安装 prettier 插件（搜索 prettier），这个插件可以帮助我们在配置 prettier 的时候获得提示

1. 在项目中新建 .prettierrc 文件，该文件为 perttier 默认配置文件
2. 在该文件中写入如下配置：

{
 // 不尾随分号
 "semi": false,
 // 使用单引号
 "singleQuote": true,
 // 多行逗号分割的语法中，最后一行不加逗号
 "trailingComma": "none"
}

1. 打开 VSCode 《设置面板》

1. 在设置中，搜索 save ，勾选 Format On Save

至此，你即可在 VSCode 保存时，自动格式化代码！

但是！

VSCode 而言，默认一个 tab 等于 4 个空格，而 ESLint 希望一个 tab 为两个空格
如果大家的 VSCode 安装了多个代码格式化工具的化
ESLint 和 prettier 之间的冲突问题

我们尝试在 Home.vue 中写入一个 created 方法，写入完成之后，打开我们的控制台我们会发现，此时代码抛出了一个 ESLint 的错误

这个错误的意思是说：created 这个方法名和后面的小括号之间，应该有一个空格！

但是当我们加入了这个空格之后，只要一保存代码，就会发现 prettier 会自动帮助我们去除掉这个空格。

那么此时的这个问题就是 prettier 和 ESLint 的冲突问题。

针对于这个问题我们想要解决也非常简单：

1. 打开 .eslintrc.js 配置文件
2. 在 rules 规则下，新增一条规则

'space-before-function-paren': 'off'

1. 该规则表示关闭《方法名后增加空格》的规则
2. 重启项目

至此我们整个的 perttier 和 ESLint 的配合使用就算是全部完成了。

在之后我们写代码的过程中，只需要保存代码，那么 perttier 就会帮助我们自动格式化代码，使其符合 ESLint 的校验规则。而无需我们手动进行更改了。(注意如果有多个格式化插件时候，请设置prettier为默认格式化工具)