多人协作中统一的代码风格有利于项目的发展这是共识，但是采用什么标准来统一代码这选择就相对纷杂。项目刚开始使用了ESLint来规范代码，但是ESLint默认是支持JavaScript，加上配置可以支持TypeScript，而样式的支持则需要再配置StyleLint，所以后面在项目中引入了Prettier这个统一的方案。

因为最开始使用的ESLint的standard来规范JavaScript和TypeScript代码所以切换到Prettier的时候不方便做大的改动，所以Prettier的采用目的是规范JavaScript和TypeScript脚本之外的文件，例如：CSS | LESS | HTML | JSON | Markdown等文件。

但是在使用Prettier的时候出现了如下问题：

No parser and no filepath given, using 'babel' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred.

这个问题的描述其实很清楚了，就是说需要指定一个parser或者提供一个文件名来帮助Prettier推断使用哪个parser。这个问题是我在使用Prettier的api的时候发现的，我的使用方式是prettier.check(source, config)这里的srouce是一个string类型这是源码，源码直接提供给Prettier，那么这个source到底是什么类型的文件Prettier并不清楚，是JavaScript呢还是CSS呢还是其他的什么呢？这时候需要在第二个参数config中给Prettier提供一个filepath字段给Prettier推断源码类型的线索，这样就解决了这个问题。

Prettier有什么好处？

在Prettier的官网有介绍Prettier的好处以及与lint的区别，总结如下：

Prettier是一个固执的武断的样式格式化工具，怎么理解这句话呢？

Prettier是一个有主见的代码格式化工具，不会像ESLint一样给你很多配置项，让你去选择。Prettier的格式是固定的，只有少部分可以配置，并且这些配置也是因为一些不可抗力保留下来，可以预见的是这些配置不会急剧扩展，因为每增加一个配置就离Prettier减少样式争论的初衷越远。

Prettier不会修改AST

Prettier做的事情只是print，也就是将AST根据自己的规则打印出来，并且Prettier是从头到尾打印整个AST，而不是遇到一个节点判断是否合理，不合理就改掉，合理就保留，它是打印整个AST，从头到尾。

Prettier不会告诉你哪里错了

Prettier不会告诉你哪个语法不符合规范，然后在编辑器中标红，然后告诉你怎么改，而是直接帮你格式化。在使用prettier --check检查文件时也不会直接告诉哪里有问题，而是告诉你哪些文件没有没有运行Prettier，其实这就意味着你只要运行了Prettier那么就不会存在这个问题。但是用过ESLint的同学都知道ESLint的--fix可不是这样的，很多问题修复不了，需要自己手动修复。

Prettier只关注代码风格

相对于ESLint既关注代码风格也可以关注代码质量（例如：标识符声明了没使用，var 转const等）来说Prettier只关注代码风格，不关注代码质量，所以需要代码质量控制还是需要配合lint类工具。

Prettier因为只做代码风格检查所以可以没有上下文，也就意味着可以检查代码片段，也就是说 a = 1 这样的代码Prettier是可以通过。但是在ESLint中这个代码片段是不合法的，因为在使用a的时候必须要先声明标识符a。通过Prettier的这个特性就可以真正的实现代码风格的增量检查，而不是文件的增量检查。

Prettier支持很多语言风格指导

Prettier不只包含了JavaScript和TypeScript的代码风格还有很多其它语言的风格，上面就提到了CSS | LESS | HTML | JSON | Markdown还有很多其它语言的扩展。

代码风格之Prettier简介相关推荐

VS Code 自动修改和保存代码风格 == eslint+prettier
最近因为用到VS Code,需要统一所有人的代码风格(前端语言js/html/css等,或者后端语言 go/python等也可以这么用). 所以参考了一些网络资料,记录下设置步骤,以便后续查阅. St ...
代码风格统一：使用husky, prettier, eslint在代码提交时自动格式化，并检查代码。...
引言这个需求主要是组内成员用的编辑器不统一,代码风格也各异,所以在修改代码时,如果格式化了代码,在code review阶段很难分辨修改了的代码.当然,代码风格统一还有其他好处,这里就不不多废话了. ...
使用 Eslint + husky + lint-staged + Prettier 提高前端项目质量、统一项目代码风格
使用 Eslint + husky + lint-staged + Prettier 提高前端项目质量.统一项目代码风格 Eslint 代码检查,编辑器启用 Eslint 之后,不符合规范的会自动进行 ...
前端通过eslint+prettier+husky统一代码风格
背景多人协作项目,会遇到每个人都有自己的代码风格.所以需要通过工具来统一代码风格. husky是什么? 当您提交或推送时,您可以使用 husky 来检查您的提交消息.运行测试.检查代码等Husky ...
使用ESLint+Prettier来统一前端代码风格
Prettier 简单使用 ESLint 与 Prettier配合使用首先肯定是需要安装 prettier ,并且你的项目中已经使用了 ESLint ,有 eslintrc.js 配置文件. npm ...
图像迁移风格保存模型_CV之NS：图像风格迁移(Neural Style 图像风格变换)算法简介、关键步骤配图、案例应用...
CV之NS:图像风格迁移(Neural Style 图像风格变换)算法简介.过程思路.关键步骤配图.案例应用之详细攻略目录图像风格迁移算法简介图像风格迁移算法过程思路 1.VGG对比NS 图像风 ...
【代码规范】prettier
prettier 每个开发人员都有自己的撸码风格,例如: 示例一 function foo(items) {return items.filter(item => item.checked).m ...
统一代码风格工具 editorConfig
为什么80%的码农都做不了架构师?>>> editorConfig简介按照名字解释就是编辑器配置,可以帮助开发者在不同的编辑器和IDE之间定义和维护一致的代码风格.比如文件缩 ...
CV之NS：图像风格迁移(Neural Style 图像风格变换)算法简介、过程思路、关键步骤配图、案例应用之详细攻略
CV之NS:图像风格迁移(Neural Style 图像风格变换)算法简介.过程思路.关键步骤配图.案例应用之详细攻略目录图像风格迁移算法简介图像风格迁移算法过程思路 1.VGG对比NS 图像风 ...

代码风格之Prettier简介