如何在 VSCode 內使用 Prettier 自動排版

VSCode 自動排版前端程式碼

▍安裝

到 VSCode 外掛下載區下載 Prettier — Code formatter

▍設定排版規格

每個人或是每個團隊的排版風個都不一樣，Prettier 提供了客製化排版設定檔案讓我選擇府和個人或是團隊想要的排版方式。

檔案格式非常多元，有 .prettierrc.json .prettierrc.json .prettierrc.ymal 好幾種，我們以 json 格式來說明。

{
  "trailingComma": "es5", // 尾隨逗號
  "tabWidth": 4,          // 程式碼縮排要使用幾個空格
  "semi": false,          // 程式碼尾端是否加上分號
  "singleQuote": true     // 使用單引號
}

上面舉 trailing comma 來說，給 none 值，一般的物件就會排版後會如下：

const person = {
  name: '小明',
  age: 20
}

如果 trailing comma 設定 es5 ，則會在物件最後一行加上逗號 :

const person = {
  name: '小明',
  age: 20, // 自動加上逗號
}

▍在 VSCode 中套用 prettier 規格設定檔

要如何讓 VSCode 使用我們設定的 .prettierrc.json 檔案呢？

在專案根目錄底下建立 .vscode/settings.json ，該設定檔案會覆蓋掉原本 VSCode 內建的設定。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 使用我們自訂的 prettier 排版規則
  "editor.formatOnSave": true, // 存檔時自動排版 
  "editor.formatOnPaste": true // 貼上時自動排版
}

如果你只想在特定語言檔案做自動排版，VSCode 也提供相關設定，以下是只有在 .tsx 檔案下才做自動存檔。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": false,
  "editor.formatOnPaste": false,
  "[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true
  }
}

喜歡文章的話可以拍幾下手給我一點回饋！🙏 讓我在寫作上更有動力！😎