iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 27
1
Modern Web

Webpack with ASP.NET MVC系列 第 27

導入 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 專案來配置,才不會影響到現有的一些舊專案。

詳細使用方式可參考這裡


上一篇
導入 React-Styleguidist
下一篇
導入 ESLint
系列文
Webpack with ASP.NET MVC30

尚未有邦友留言

立即登入留言