前言

在公司写代码，因为要跟有很多同事进行合作，代码规范就很重要了，毕竟如果大家都有自己的一套规则，他缩进，他不缩进，到时候势必会花费无用的精力在适应各自的编写规范上。所以干脆就“书同文，车同轨”。直接给大家统一一套编码规范。这个规范，就是prettier

功能

prettier具体有啥功能，看其官网介绍可知

prettier安装步骤

本地下载

1. 进官网，根据里面的提示操作
2. 别看官网里面写一大堆，最关键的就下面两句

// 本地安装
npm install --save-dev --save-exact prettier

// 创建文件，好让编辑器知道你在用prettier
echo {}> .prettierrc.js

设置.prettierrc.js 的内容如下：

// 因为prettier默认是双引号，而现在大部分项目的ts代码都需要是单引号，所以加了下面这段代码。
module.exports = {
  singleQuote: true
}

根据上面两步安装好依赖后，接着到编辑器上进行配置。

编辑器配置

• 不同的编辑器配置方式不同，具体参考官网提示 ,找到自己所用的编辑器，点进去根据提示操作即可。
• 因为我用的webstorm，这里拿它来举例：

1. ctrl+alt+s 打开settings，搜索框输入prettier搜索，然后如图操作：

1. 设置完后就可以使用了，但因为它默认的格式化快捷键是 Alt-Shift-Ctrl-P 来格式化，终归还是太麻烦了，我们想在保存的时候就自动对其格式化，那就需要在settings里面设置下快捷键了.

现在你再试试ctrl+s 保存下代码，看看是不是都按照标准格式化好了。

解决prettier和eslint之间的校验冲突

但这还没完，因为prettier的校验规则会和Eslint的规则产生冲突，所以为了只应用prettier的格式化功能而不需要它的校验功能的话，请按照以下操作：

npm install --save-dev eslint-plugin-prettier

npm install --save-dev eslint-config-prettier

• 安装完之后，再到.eslintrc.json的extends中，加上这句代码：

"plugin:prettier/recommended"

• 如果觉得prettier的格式化规则的校验提示很烦，你可以在.eslintrc.json的rules中，加上如下的键值对，即可

"prettier/prettier": "off"