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格式化
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！