# 使用Prettier協作一致化程式碼排版風格

{%hackmd hackmd-dark-theme %}

tags: `前端`

## 需求

自動排版成符合設定檔規則的程式碼風格。

## 安裝

`npm install prettier --save-dev`
(--save-dev只在開發或測試時需要的套件

* 參考

> [[NodeJs] npm --save 到底是什麼? --save-dev 不一樣嗎?：dependencies v.s devDependencies](https://medium.com/itsems-frontend/nodejs-npm-dependencies-devdependencies-8934f641c8ef)

### 1. vscode的setting.json設定

* 快捷鍵：`Ctrl+Shift+P`
* 搜尋：`Preferences: Open User Settings`

加入以下選項即可，隨個人環境設定有所不同

//要應用到格式化file格式
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  ...
//使用prettier套件及套用自動儲存設定
  "editor.formatOnSave": true,
  "prettier.configPath": ".prettierrc",
  "editor.defaultFormatter": "esbenp.prettier-vscode"

* setting.JSON位置


### 2. 打開vscode的Format On Save(自動儲存)

使儲存時自動套用prettier


### 3. .prettierrc文件設定格式化選項

* 參考

> [Airbnb JavaScript Style Guide() {](https://github.com/airbnb/javascript)

//.prettierrc文件
{
  "arrowParens": "always",
  "bracketSpacing": false,
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "printWidth": 100,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "endOfLine": "auto",
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "useTabs": true
}

P.S 補充說明：

{
  "arrowParens": "always", // 總是在箭頭函數參數周圍添加括號
  "bracketSpacing": false, // 不在對象文字和數組文字中的括號內添加空格
  "htmlWhitespaceSensitivity": "css", // HTML的空格敏感性設置為CSS
  "insertPragma": false, // 不在文件頂部插入Prettier註釋
  "jsxBracketSameLine": false, // 不將JSX的結束括號與內容放在同一行
  "printWidth": 100, // 行寬限制為100個字符
  "proseWrap": "preserve", // 保留prose（文本）的格式
  "quoteProps": "as-needed", // 只在需要時為對象文字的鍵添加引號
  "requirePragma": false, // 不要求文件包含Prettier註釋
  "endOfLine": "auto", // 根據環境自動檢測換行符
  "semi": true, // 在語句末尾添加分號
  "singleQuote": true, // 單引號作為字符串引號
  "tabWidth": 2, // 每個縮進級別的空格數
  "trailingComma": "all", // 在多行對象文字和數組文字末尾添加尾隨逗號
  "useTabs": true // 使用制表符進行縮進
}

* 位置

放在專案package.json同層目錄


以上設定好即可順利套用！

---

## ＊補充：npm指令全局套用

在package.json裡scripts新增指令即可，以下是套用所有.vue的檔案

"format": "prettier --write \"src/**/*.vue\""

接著在terminal執行 `npm run format` 即可一次套用全局檔案