程式碼排版是開發中很重要的小事，但如果每次刪減或補上空白、縮排等等都人工手動調整，那真的超級花時間，幸好，我們可以把這些瑣事交給工具來處理。另外，如果共同開發的同事是另一種風格的話，專案裡會充斥著雜亂的寫法，所以我們需要有一致的程式碼風格，但請謹記不要花無謂的時間在爭論什麼樣的程式碼風格比較好，重點只在「一致性」，其他的就交給工具，開發者的時間要專注在重要的邏輯上。

現在就開始將專案的自動排版交給 Prettier 吧！

安裝與執行 Prettier

npm install --dev-dependency prettier

這時候，會在 package.json 中的 devDependencies 看到 prettier，我們在專案中執行 prettier 會對應到node_modules/.bin/prettier 路徑中取用。

如果專案中有一個要排版的檔案 src/example.js ，現在可以下指令試試：

example.js

npx prettier src/example.js

我們只會在 console 中看到排版過的檔案，但原本的檔案內容不會被更動，如果想要 prettier 幫我們自動更新並儲存，可以加上 --write：

npx prettier --write src/example.js

現在我們可以在 package.json 加入新的 script ：

"scripts": {
    ...
    "format": "prettier --write \"**/*.+(js|json)\""
},

在 --write 後面加入一個 glob \"**/*.+(js|json)\"，這個專案底下所有的 .js 與 .json 檔案，你也可以自己加上其他 prettier 有支援的檔案類型，例如 HTML 或 CSS 。

執行一下 npm run format 發現 Prettier 已自動幫我們更新檔案，且會在 console 中列出所有 Prettier 幫我們檢查過的檔案。

如果有不想被 Prettier 排版的檔案呢？可以加入 .prettierignore 檔案，或是使用跟 昨日文章 ESLint 設定一樣，加入 -ignore-path .gitignore ，指定 .gitignore 檔案讓 Prettier 作為忽略的參照：

"scripts": {
    ...
    "format": "prettier --ignore-path .gitignore --write \"**/*.+(js|json)\""
},

自訂 Prettier 配置

在專案根目錄新建 .prettierrc，Prettier 會依照檔案裡的配置來排版。

那有哪些配置可以設定呢？

Prettier 提供一個很棒的平台 prettier playground：

在左側依需要勾選 options，可以即時預覽 format 後的結果，設置完成後，點選 Copy config JSON ，把複製的內容貼到專案中的 .prettierrc 檔案內，即完成專案的配置了。

--parser 的欄位可以不用調整，Prettier 會依據專案來自動配置

在 VSCode 中使用 Prettier 的 Extension 輔助開發

如果是使用 VSCode 開發，可以安裝Prettier 的 Extension：Prettier Formatter for Visual Studio Code。自訂 VSCode 預設的 formatter 為 Prettier，以及設定每次存擋就自動排版，不需要再每次手動輸入 script npm run format。

在 VSCode settings.json 中加入配置：

settings.json

{
  "editor.defaultFormatter": "esbenp.pretter-vscode",
  "editor.formatOnSave": true,
  ...
}

另外，如果想要在存擋前先 format 整個檔案看看結果，MAC 版本的 VSCode 預設的快捷鍵為： command + shift + p

使用 eslint-config-prettier 自動關閉 ESLint 不必要的規則

昨日文章 我們使用 ESLint 來檢查錯誤，今天我們使用 Prettier 自動排版，那這兩個工具之間會不會有重複或是衝突的規則發生呢？

現在，謹記使用工具來輔助開發的重要準則：使用工具的目的是要能更專注於重要的開發工作上，如果工具讓我們多做了不必要的事，那就本末倒置了。

例如這個行末不只一個分號 ( 雖然這應該是不太容易發生的錯誤，除非睡著了 XD ) 的情況：

const cat = 'hello kitty';;;;;;;

VSCode 的 ESLint Extension 會幫我們標上紅色波浪警示，這時候，你看到可能會馬上手動去修掉這個 bug ( 這算是個好習慣吧 )，但其實我們等等使用 Prettier 排版時，Prettier 就會幫我們自動修正了。所以剛剛看到的紅色波浪警示，就像是個沒有必要的警示；手動去修正的這個動作，也是個沒有必要的工作，我們可以手動去關閉 ESLint 規則：

.eslintrc

"rules": {
  ...
  "no-extra-semi": "off"
}

但這樣就要每次都手動關閉規則，好險 Prettier 有一個套件 eslint-config-prettier 可以自動幫我們判斷並關閉 ESLint 沒有必要的規則：

npm install --save-dev eslint-config-prettier

在 .eslintrc 裡，將 eslint-config-prettier 加在 extends 的最後：

.eslintrc

"extends": ["eslint:recommended", "eslint-config-prettier"],
  ...

這樣就大功告成了，不用再自己手動關閉沒有必要的規則了。