prettier浅出

1.两大linter提及

• eslint 为js而设计的可插拔的检查程序
• tslint 为ts语言而设计的可扩展的检查工具（将在2019年取消更新，建议使用eslint）

两种linter均可以实现fix功能，所谓fix就是将原代码转化为符合必定规则的新代码。虽然linter工具fix以后的代码，解决了大部分问题，但可能有些地方并不符合咱们的阅读代码的习惯，好比一行代码过长。

在强迫症的影响下，不一样的人对本身的代码进行不一样程度的”美化“，甚至遇到他人代码时也会顺手美化一把。

最终致使项目中的代码风格不能统一。

2.prettier简介

prettier是一种保证代码一致性、兼具美化效果的代码格式化工具

2.1 not only js

前有jslint，然后因为eslint过于成功，致使了jslint已经无人问津，这也让咱们误觉得eslint只专一于js
下面列举了它所支持的其余语言

• javascript、jsx
• flow、typescript
• json
• css、less、scss
• graphql
• markdown
• yaml

2.2 IDE

有人的地方就有江湖，有编辑器的地方就有prettier，目前流行的ide都能支持prettier

• vscode
• webstorm
• atom
• visual studio
• sublime

以上列举了前端比较经常使用的几个工具，须要肯定所使用的的编辑器是否支持prettier是否支持，请移步官网

2.3 parser

prettier针对不一样的语言，所使用的的parser有多个，例如编译graphql时所使用的就是graphql/language。
而编译js的目前有两个，即babylon（默认）、flow，因为babylon的bug较少，对编译工做支持度较好，因此默认状况下选用babylon便可。
babylon即babel6的编译工具，在babel7中已改名为@babel/parser

3.eslint融合

eslint做为强大的linter工具，与vscode配合后能下降代码问题的风险，在coding的过程当中就发现潜在问题，提升代码质量。

3.1 eslint-config-prettier

eslint的config能够继承自第三方包的config，config中定义了rules的开关规则，eslint-config-prettier主要定义了prettier格式化后致使eslint报错的那些规则

3.2 eslint-plugin-prettier

eslint与prettier的格式化须要分别进行，若是想要让eslint fix的同时，也能兼顾prettier的规则进行格式化，就须要使用到eslint-plugin-prettier这个插件。

它的主要做用就是专门定义了eslint fix的prettier规则

3.3 融合写法

在.eslintrc文件中加入如下配置

{
  "extends": ["plugin:prettier/recommended"]
}

这段代码有三个做用

• 继承prettier的config规则
• 开启rules的 "prettier/prettier": "error"
• eslint fix的同时执行prettier格式化