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

链接: http://www.fly63.com/article/detial/6230