Prettier是一个专注于代码格式化的工具，它遵循设定的规则来格式化你的代码，从而保证整个项目的代码风格统一。

安装

npm

npm install --save-dev --save-exact prettier

yarn

yarn add --dev --exact prettier

常用配置

在项目根目录下新建.prettierrc文件，新增如下配置。如果需要更多的配置项，请访问prettier官方文档。

{
  "semi": true,
  "printWidth": 120,
  "tabWidth": 4,
  "singleQuote": false,
  "arrowParens": "always",
  "trailingComma": "all"
}
配置项接收值默认值说明
semiBooleantrue是否需要在句尾添加分号
printWidthInt80每行的长度，超出自动换行
tabWidthInt2缩进空格数
useTabsBooleanfalse是否使用制表符缩进
singleQuoteBooleanfalse使用单引号代替双引号
arrowParens"always","avoid""always(V2.0.0)"箭头函数单个参数时是否要需要小括号
trailingComma"es5","none","all""es5(V2.0.0)"对象最后一项是否加上逗号

配置webstorm

打开设置>语言和框架>JavaScript>prettier，配置完prettier包路径并且勾选完执行“重新格式化代码”操作之后，webstorm的代码格式化就由prettier来接管了。

如果选下面保存时的选项，代码会在保存的时候自动执行格式化，非常方便。

需要注意的是，如果某些文件没有执行prettier格式化，检查下“为文件运行选项”内有没有当前文件名，比如vue文件就是没有的，需要手动加上。

配置webstorm