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

资源搜索网站大全 http://www.szhdn.com 广州VI设计公司https://www.houdianzi.com

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格式化