使用Prettier格式化JavaScript代碼
假如你有過編程經驗的話,你應該很清楚,很難做到既讓代碼簡潔明了,又使不同的代碼書寫風格在一個項目中保持一致性。即便你花了很多時間達到了這個目的,其它的開發人員也會提交他們的修改或者禁用某些標誌以方便他們快速提交代碼,從而讓你的努力功虧一簣。
在格式化代碼上浪費時間是一件很枯燥的事情,Prettier的目標便是解決這個問題。它將用簡單的設定來協助你克服格式化帶來的困擾。
Prettier可以做什嗎?
Prettier是一個很有特色的代碼格式化工具,它可以使整個程式碼程式庫的格式化過程自動化。因此在設定好Prettier之後,你不再需要與同事討論代碼格式化規則、分號、分行符號等問題了。它會匯入你所有代碼,刪除所有格式,並根據其樣式規則重新格式化代碼。
在Prettier環境下,所有的javascript代碼都會轉換為抽象文法樹,然後被重新格式化。因此,它確保不會對編寫的代碼進行任何破壞更改。對你來說,所有的東西都會被神奇地格式化,這你並不用擔心。
例如:
foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());
會被被格式化為
foo(
reallyLongArg(),
omgSoManyParameters(),
IShouldRefactorThis(),
isThereSeriouslyAnotherOne()
);
如果你想讓體驗一下,可以使用playground來試試。總結一下:
與ESLint的差異
這是最常見的問題之一,簡明的回答是ESLint只是一個代碼品質工具(確保沒有未使用的變數、沒有全域變數,等等)。而Prettier只關心格式檔案(最大長度、混合標籤和空格、引用樣式等)。你可以將ESLint和Prettier結合起來使用,以獲得雙贏的組合。
Editorconfig的作用
Prettier 1.9版本之前會從editorconfig中讀取配置值,推薦的配置選項包括:indent_style、indent_size/tab_width和max_line_length。
如何設定
如上所述,Prettier的自動化程式會將整個程式碼程式庫格式化。以下是你可以使用Prettier的情境:
- 編輯器外掛程式
- CLI
- Pre-commit hooks
在編輯器中使用
進入網站的互動頁面並下載相應的外掛程式,在你的IDE/編輯器中安裝它。這應該是一個非常簡單的過程。對於Visual Studio Code,你只需要從市場下載便可。之後,在使用者佈建中添加了一個喜好設定("editor.formatOnSave": true)。這樣便可以起效了。我還根據我的需要設定了"prettier.singleQuote": true,其它的編輯器屬性也可以在這裡設定。
在項目中使用
你需要先安裝Prettier的CLI。我們將把它添加為dev依賴項, (yarn add prettier --dev --exact or npm install --save-dev --save-exact prettier)。Prettier推薦在項目中安裝恰當的版本,因為Prettier會在補丁發布時引入代碼格式的變化。安裝成功後,要針對某個特定檔案啟動並執行話,只需要運行命令yarn prettier --write index.js,這樣便可在目前的目錄產生index.js檔案。
你可以根據需要配置Prettier的其他選項,通常使用設定檔來做。也可以將這些添加到.prettierrc檔案中並放置在項目的根資料夾下。可用選項可以在網站上找到。
然後,你可以將這個命令添加到你的NPM指令碼中,並將src檔案夾作為一個glob傳遞給它,而不是一個單獨的檔案。格式化指令碼是這樣的:prettier --write './src/**/*.{ts,js,css,json}'。
如果你沒有使用這種複雜的配置,也沒用.prettierrc 檔案,你也可以使用命令列參數指定選項配置。
然後你可以將其作為構建步驟的一部分進行調用。所有的改變也都會生效的。
在項目中,你可以更進一步將Prettier代碼整合為一個pre-commit hook。你需要安裝husky來配合lint-stage /pretty-quick使用(如果你正在使用其他工具,比如ESLint,請使用lint-stage)。從NPM安裝這些包作為dev依賴項之後,你可以將以下配置添加到package.json檔案中:
pretty-quick:
"scripts": {
"precommit": "pretty-quick --staged”
}lint-staged:
"scripts": {
"precommit": "lint-staged",
"lint-staged": {
"*.{ts,js,css,json}": [
"prettier --write",
"git add"
]
}
}
要注意的是,當你將prettier作為一個pre-commit hook運行時,它會破壞你項目的狀態。一個解決方案(gocarsno在Reddit上建議的)是在提交之前儲存所有尚未載入的變更(git stash -k)。
你可以更進一步在項目的構建步驟中添加另一個檢查。Facebook是這樣做的,我是在一個員工會議演講中知道這件事的。你可以在檔案上的CI/CD伺服器上運行Prettier,如果Prettier的檔案輸出與簽入的檔案不同,那麼伺服器編譯就會失敗。你可以選擇這樣做,這取決於你依賴它的程度。
你還在等什麼?趕緊去配置使用Prettier吧!別再人工格式化項目代碼了,讓機器為你做這事。
分享這篇文章,我也是為了讓更多的人發現Prettier的魅力。
英文原文連結:Using Prettier to format your JavaScript code
本文永久更新連結地址:https://www.bkjia.com/Linux/2018-03/151124.htm