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 来管理维护更好的代码输出。

最后

若有任何问题和建议欢迎发送至邮箱讨论：<Tommy.White.h.li@gmail.com>
翻译不易，若您以为对您有帮助，欢迎打赏

微信：

支付宝：