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

MadPecker 发布于2019-08-26 11:55 / 2873人阅读

摘要：都有个规则范畴格式化规则例减轻了对这整个类别规则的需求以一致的方式从头开始输出整个程序，所以程序员不可能再犯错误了。代码质量规则例不针对与此项。在这方面还是有无可替代的功劳译者建议配合使用来管理维护更好的代码输出。

以下内容为个人参照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

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

最后

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

微信：

支付宝：

GPU云服务器云服务器深度学习内容概要 code-1-usev-to-see-i Prettier Know

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107812.html

工程搭建---代码风格统一

摘要：为此我们需要安装这个是用于提交代码的钩子函数安装完之后，我们就需要在增加运行钩子函数。等钩子函数这样就简单的成功对代码进行效验了，当然这边更进一步的可以使用这个可以将取得所有被提交的文件依次执行写好的任务。一个项目是会有多个成员来开发的，因此统一开发规范是很有必要的，不然每个人都有自己的风格，同步之后代码都会报错。我这边是用Vscode编译器的。首先用vue-cli3.0创建一个工...

levius 2019-08-23 16:05 评论0 收藏0
使用REACT VR构建web虚拟现实

Building virtual reality experiences on the web with React VR Over the past year, virtual reality has made major strides toward becoming the next computing platform. With Oculus Rift, consumer-grade h...

anquan 2019-08-20 15:55 评论0 收藏0
You need to know curry

Functions are first-class citizen Functions are first-class citizen in JavaScript, as the same as other types(e.g. number, array, object). They can be used as arguments, as well as return value from o...

BigNerdCoding 2019-08-22 15:23 评论0 收藏0
【译】State and Lifecycle (State和生命周期)

摘要：结果如下打开试试下一步，我们将把组件功能自己设置定时器并且能每秒更新。这是一个设置定时器的好地方注意我们是怎么保存定时器的。我们将在这个生命周期的函数方法中卸载掉定时器最后，我们会每一秒跑方法。下面是react官方文档的个人翻译，如有翻译错误，请多多指出原文地址：https://facebook.github.io/re... Consider the ticking clock e...

dadong 2019-08-20 14:46 评论0 收藏0