使用 Prettier 自動幫你 format 所有的程式碼

快速、無痛、很漂亮

為什麼使用 Prettier？

1. 只需使用 npm / yarn 安裝，無需其他 plugin 或是 IDE
2. 使用 commnad 即可
3. 可用於現有 code base
4. 做到寫 code 「千人一面」

先講結論

使用 Prettier + pre-commit + git add ( 搭配 grep 挑副檔名 )

安裝

1. 安裝 prettier

$ yarn add prettier --dev

Prettier 用來幫你把 source code 格式變得漂漂亮亮的！

2. 安裝 pre-commit

$ yarn add pre-commit --dev

pre-commit 用來幫你在 git commit 之前做一些事情，沒錯，我們這邊就是要做 format 拉！

設定在 commit 時自動 format code

增加 prettier format command 與 pre-commit command script 在 package.json 檔案

"script" : {
  "format" : "prettier --single-quote --no-semi --write './src/**/*.js'"
},
"pre-commit": [
  "format" 
]

基本設定目前已經完成，目前執行的結果會是

「commit 的時候觸發 format 指令，先 format code 後，才 commit」

但這樣會有另一個問題

Git 版控要被 commit 需要先被 add 到 stage 裡面，否則只會是 change，所以被 format 的 code 只會在 change 而沒有被一起 commit 進去！

解法

Prettier 官方文件是叫你使用 git add .接在 prettier 之後，但這樣會衍伸另一個問題「要是你有暫時不想 commit 的檔案，會被一起 commit 進去！」

那該怎麼解呢？

由於我們用 prettier 是用來 format 特定的檔案類型 ( 這邊以 js 為例 )，那麼我們只要能讓 git add 的時候能「挑特定副檔名」就可以了！

$ git ls-files ./src | grep '\.js$' | xargs git add

如果你有些檔案要避免被 format

如果你的 code 裡面有一些 lib 或是 minify 過的檔案需要避免 format，可以加入 .prettierignore 檔案讓 Prettier 不去爬這些目錄，就能避免不必要的 format。

結果

「commit 的時候觸發 format ，format 後的檔案加入 stage，並一起 commit 到版控」，結果範例的package.json

"script" : {
  "format" : "prettier --single-quote --no-semi --write './src/**/*.js'",
  "git-add-js": "git ls-files ./src | grep '\.js$' | xargs git add"
},
"pre-commit": [
  "format",
  "git-add-js"
]

地雷

pre-commit 有個小問題，如果你的 package.json 不在 git repository 的根目錄的話，會有「沒辦法正常運作」的問題

這個問題我目前是先以把 pre-commit 與 prettier 安裝在 git repository 根目錄的方式來解，如果有更好的解法也請告訴我，感謝～

以上

記錄一下，也希望有解決到你的問題！