Prettier document you need to know【1】 -- 概要内容

以下内容为个人参照Prettier官网部分文档翻译+理解，用以罗列部分you need to know，文档内容经供参考，详细内容参考官网

安装

（由于node.js的火热和自带npm，所以只放置npm下载方式）

//using npm to download prettier

npm install --save-dev --save-exact prettier
# --save-exact指代在package.json文件指定安装模块的确切版本。
# 或 全局环境安装
npm install --global prettier

Prettier是什么

Prettier是选择式的代码格式化工具，支持：

• JS 包括ES2017
• TS
• JSX
• CSS,LESS,SASS
• ...

它移除了所有原始格式并且保证所有的输出代码符合一种一致的风格
Prettier获取你的代码并从头重新输出通过计算代码行长度
例如，以下

foo(arg1, arg2, arg3, arg4);

它合适一行显示，所有保持了原样。然而我们可能遇到这种场景

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

我们可能会因为它过长而手动或使用其他工具将它分解在多行显示，但是Prettier会为你做这样的艰苦工作

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

更多细节参照官网

为什么使用Prettier

这里不再翻译文档，采用自身体会阐述：

• 曾几何时你是否遭遇过在前端代码中大家使用的Javascript等格式不同导致源文件在没有新feature加入下却被修改并提交至远端。在当你去查看某一文件的history时发现文件有相应的修改并伴有commit comment，你疑惑的去跟踪修改记录，后来却发现仅仅是原文件格式被他人覆盖提交。

还有更多好处被Prettier写下，参考官文。

Prettier vs. Linters

Linters都有2个规则范畴
格式化规则： 例： max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style...
Prettier减轻了对这整个类别规则的需求！Prettier以一致的方式从头开始输出整个程序，所以程序员不可能再犯错误了。

代码质量规则 例： no-unused-vars, no-extra-bind, no-implicit-globals, prefer-promise-reject-errors...
Prettier 不针对与此项。Linters在这方面还是有无可替代的功劳

译者建议 ：配合使用 Jshint + Prettier 来管理维护更好的代码输出。

最后

如有任何问题和建议欢迎发送至邮箱讨论：<[e-mail]>
翻译不易，若您觉得对您有帮助，欢迎打赏

微信：

支付宝：