/ REACT WEBPACK ASP.NET MVC

導入 Prettier

什麼是 Prettier

Prettier

Prettier is an opinionated code formatter with support for:

  • JavaScript, including ES2017
  • JSX
  • Flow
  • TypeScript
  • CSS, Less, and SCSS
  • JSON
  • GraphQL
  • Markdown, including GFM
  • YAML

Prettier 是程式碼格式化工具，可設定為存檔時自動格式化，不用再浪費時間手動格式化程式碼。同時也能夠統一團隊程式碼風格，並且可以根據團隊規範，去調整相關設定規則。一般常見的團隊規範如下：

  1. 加分號還是不加分號？
  2. 使用單引號還是雙引號？
  3. 縮排用 TAB 還是空格？
  4. 要空幾格？

使用 Prettier 這種自動格式化工具，才能確保團隊規範的落實。下面是 Prettier 格式化的範例圖

也能支援 JSX

CSS 樣式檔也能格式化

將 Prettier 導入專案

我們可以將 Prettier 結合 GIT，提交前將程式碼格式化。也可以結合編輯器，直接在存檔時就格式化。這邊介紹的方式是使用 VSCODE 來設置 Prettier

如何安裝

在 VSCODE 的擴充功能面板搜尋 Prettier 就可以找到，我們安裝 Prettier - Code formatter 這個版本。

Prettier

在 VSCODE 設定檔新增下方的配置

.vscode/settings.json
{
  'editor.formatOnSave': true,
  'prettier.singleQuote': true,
  'prettier.semi': false,
  'prettier.printWidth': 120,
  'prettier.trailingComma': 'es5',
  'prettier.tabWidth': 4
}

formatOnSave 儲存時自動格式化 singleQuote 使用單引號 semi 結束是否加分號 printWidth 行寬 trailingComma 尾隨逗號 tabWidth 縮排空幾格

這邊要注意 VSCODE 有分為 使用者設定 與 工作區設定，Prettier 我們設定在工作區設定，by 專案來配置，才不會影響到現有的一些舊專案。

詳細使用方式可參考這裡

2019 IT 邦鐵人賽文章連結