用 Prettier 统一团队的代码风格~

#1

js 存在的问题

所有使用文本语法的编程语言都难免遇到个问题, 大家有不一样的写代码的风格, 最终写出不一样的代码.

通过团队有一些代码规范作为约束, 然而主要是人工的约束, 其实习惯上还是不一样, 只是说尽量遵守. 特别是 js 大家对应括号分号空格的时候有疑问, 实际代码免不了麻烦, 最终求助 ESLint 来增加约束.

配置 ESLint 还有不少麻烦, 遵循 ESLint 的写法挺累的, 挺容易就会写错, 然后跑一遍 lint 才回来改, 比如少了分号什么的.

Prettier 是什么

Prettier 相当于是强制给代码做格式化啦, 比如 Go 有 gofmt, ReasonML 有 refmt, Prettier 就是 JavaScript 的一个格式化工具, 专门为类似的目的设计.

Prettier is an opinionated JavaScript formatter inspired by refmt with advanced support for language features from ES2017, JSX, and Flow. It removes all original styling and ensures that all outputted JavaScript conforms to a consistent style

ReactConf 上作者 jlongster 做了一个分享, 快速讲解了下项目的初衷很好处, 简单说就是更容易地实现团队代码的一致性.

不看视频也可以看文字版本的博客的介绍:

http://jlongster.com/A-Prettier-Formatter

由于我使用的是 Sublime Text, 所以我在装了 plugin, 配置了每次 Command S 保存文件时进行一次格式化:

Prettier 能解决哪些问题

主要就是自动格式化代码, 强行保证项目代码的风格一致. 而且由于是自动进行格式化, 写 js 的时候也就能更早发现语法问题, 而且由程序自动进行调整, 甚至报错.

不足的地方

有些代码会报错. 感觉可以再智能一点. 再者 Prettier 检查代码对于变量未定义之类的问题是无知的, 事后依然需要 ESLint 做一次检查. 我觉得可能用 Flow 检查还更重要一些.

现在配置方面不是那么灵活, 不清楚具体好不好. 有待观察. 如果团队配置不一样, 很容易出现多余的 diff. 但是配置太少可能风格又不够满足团队需求的.

#2

加了一篇文章翻译 https://segmentfault.com/a/1190000008861384

1 Like
#3

这么好的东西,不要吝啬点赞。