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>
翻譯不易，若您以爲對您有幫助，歡迎打賞

微信：

支付寶：