Prettier document you need to know【1】 -- 提要內容

2019年8月24日 72次阅读 来源: TommY

以下內容為個人參照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>
翻譯不容易，若您以為對您有協助，迎接打賞

微信：《Prettier document you need to know【1】 -- 提要內容》

支付寶：《Prettier document you need to know【1】 -- 提要內容》

    原文作者：TommY
    原文地址: https://segmentfault.com/a/1190000015087866
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞