程式碼格式化似乎是一個無關緊要的問題，但它會影響程式碼的質量和正確性、如何控制版本以及如何與他人協作。但是，如果你不想陷入每一個大括號的細節中，那麼可以嘗試將問題外包給開源工具Prettier。

格式化很重要

軟體開發團隊在歷史上浪費了無數個小時來爭論最大的行長度或者括號應該放在哪一行。不管個人喜好如何，大多數人至少同意一件事：程式碼格式在整個專案中應該是一致的。

Prettier是一個專門為實現這一點而設計的工具。給它一些程式碼，它將返回相同的程式碼，以一致的方式格式化。Prettier集成了文字編輯器、命令列工具和線上演示。

說正確的語言

首先，你想知道Prettier是否與你通常使用的語言相容。Prettier目前專注於一組主要用於前端web開發的核心語言，包括：

• JavaScript語言
• HTML格式
• CSS格式
• 薩斯
• 降價
• 亞馬爾

還透過外掛對其他語言提供開放式支援。

使用線上遊樂場嘗試更漂亮的遊戲

在嘗試安裝更漂亮的之前，你可能想看看操場。使用web介面，您可以貼上一些示例程式碼，並觀察Prettier將如何對其進行轉換。這是一個很好的方法，可以讓你瞭解這個工具的實際功能，但是如果你的需求比較輕鬆的話，它也可以作為你使用Prettier的主要方法。

預設情況下，操場應該看起來像兩個基本的文字編輯器面板，一個在左側用於輸入，一個在右側顯示Prettier的輸出。最初您將看到一些示例程式碼，但您可以簡單地刪除所有這些程式碼並貼上到自己的程式碼中。

例如，嘗試輸入以下JavaScript：

(function (){ window.alert('ok')}())

更漂亮的人應該把它變成：

(function () { window.alert("ok");})();

請注意，預設情況下，Prettier所做的更改包括：

• 將單引號字串轉換為雙引號字串
• 新增分號
• 將縮排轉換為兩個空格

左下角有一個按鈕，可以檢視選項。在前面的示例中，嘗試調整選項卡寬度，在Common下切換--single quote標誌，或者在JavaScript下切換--no半標誌。

配置選項

Prettier自稱“固執己見”，這是一種經過深思熟慮的設計選擇，意味著為了簡單和一致性而犧牲了對細節的控制。它的設計目的是讓您先設定，然後忘記，而不是專注於程式碼的每一個最後的格式化細節。（對於對每個最後的格式化細節都有更細粒度控制的替代方法，請嘗試eslint。）

然而，作者也認識到，有些決策的功能影響不僅僅是程式碼的外觀。有些選項（包括用於遺留目的的選項）仍然存在，因此您至少應該瞭解它們的作用，即使您在預設狀態下使用Prettier。

管理更漂亮的選項的最佳方法是將它們儲存在配置檔案中。有很多方法可以組織它，但是首先要建立一個名為的檔案。prettierrc.json檔案在本地專案目錄中。它可以在標準JSON物件中包含任何受支援的選項，例如。

{ "tabWidth": 8}

無論是透過命令列還是支援的文字編輯器執行，Prettier都會讀取相同的配置檔案。

基本安裝和命令列工具

使用紗線或npm，安裝應簡單明瞭。對於紗線：

$ yarn global add prettier

對於npm：

$ npm install --global prettier

在全球範圍內安裝Prettier後，您應該能夠鍵入：

$ prettier

預設情況下，您將獲得一個幫助文字螢幕，該螢幕將確認工具已安裝並正常執行。

清理檔案

要重新格式化檔案，請使用類似以下命令：

$ prettier --write filename.js

這將覆蓋原始檔案，這通常是最方便的方法。或者，您可能只想讓prettier處理專案中的每個檔案：

$ prettier --write .

Prettier將執行在當前目錄下的所有檔案中，格式化它識別的所有檔案。

也可以將結果列印到標準輸出，而不是更改原始檔案，這樣可以將輸出儲存到其他檔案，或將其重定向到其他位置：

$ prettier test.js > test2.js

檢查檔案

若要在不進行任何更改的情況下獲得更漂亮的程式碼清潔度報告，請將--check標誌與單個或多個檔名一起使用：

$ prettier --check .

根據Prettier的配置，對於每個與預期格式不匹配的檔案，您將獲得一行輸出：

Checking formatting...[warn] .prettierrc[warn] .prettierrc.json[warn] Code style issues found in the above file(s). Forgot to run Prettier?

命令列選項

如果需要，Prettier的標準選項可以作為命令列選項使用。下面是一個--single quote標誌如何影響輸出的示例：

$ prettier tmp.jsfunction example() { c***ole.log("hello, world");}$ prettier --single-quote tmp.jsfunction example() { c***ole.log('hello, world');}

尋求幫助

命令列工具透過--help標誌提供有關任何選項的資訊性幫助：

$ prettier --help trailing-comma--trailing-comma <es5|none|all> Print trailing commas wherever possible when multi-line.Valid opti***: es5 Trailing commas where valid in ES5 (objects, arrays, etc.) none No trailing commas. all Trailing commas wherever possible (including function arguments).Default: es5

使用文字編輯器

一旦安裝了Prettier，就可以在各種場景中使用它，這取決於您已經使用的工具集。很可能，你會使用一個文字編輯器。Prettier為大多數流行的應用程式提供了繫結，下面是如何設定其中三個：

崇高的文字

JsPrettier是一個極好的文字外掛，它使Prettier在編輯器中可用。儘管安裝JsPrettier有幾種不同的方法，但我們建議使用包控制方法。您需要已經安裝了Prettier，然後開啟Sublime Text的命令面板並選擇“Package Control:Install Package”：

然後搜尋“jsprettier”並單擊以安裝：

一旦安裝了JsPrettier，您可以右鍵單擊任何開啟的檔案來格式化它。您還可以在JsPrettier的設定中將auto\u format\u on\u save的值設定為true，這將導致JsPrettier在您將相容檔案儲存為崇高文字時自動清除它們。

原子

Atom的安裝與Sublime Text非常相似：只需使用編輯器的內建包管理器安裝更漂亮的Atom：

安裝後，使用方法很熟悉：快捷方式或選單項允許您按需格式化檔案，而Atom設定允許您在儲存檔案時自動執行Prettier。

維姆

Vim是一個非常強大的基於命令列的編輯器，不適合初學者。使用vim變得更漂亮是相當複雜的，但仍然只有幾個步驟：

mkdir -p ~/.vim/pack/plugins/startgit clone https://github.com/prettier/vim-prettier \ ~/.vim/pack/plugins/start/vim-prettier

Git可能是下載必要檔案的最簡單方法，但是任何讓vim prettier進入start目錄的方法都應該可以完成這項工作。

一旦安裝，當檔案儲存在vi中時，Prettier將自動執行。也可以隨時透過Prettier命令手動執行：

這將產生一個乾淨的檔案：

將prettier整合到您的專案中

使用諸如Prettier之類的程式碼格式化程式可以幫助維護更易於閱讀的程式碼庫。它還可以幫助避免關於在編碼時使用哪種特定樣式的爭論——只是將這些決策外包給更漂亮的人！

最後，可以設定一個git鉤子，以確保程式碼在提交到專案儲存庫時總是得到清理。單個開發人員可以隨意格式化他們的程式碼，但是中心副本將始終是乾淨和一致的。