# Prettier JS 心得
Elantris

[TOC]

---

## 前言

開發時使用程式碼排版工具的好處除了自己看得舒服以外更重要的是整個團隊在編寫時有一個統一標準，避免因手動排版造成的人力浪費、生出一堆只是為了排版沒有實際產值的 commit，在初期就應取得團隊共識訂定一個大家都看得順眼的排版規則。

現行大多數編輯器都有支援 [EditorConfig](https://editorconfig.org/)、[Eslint Formatter](https://eslint.org/docs/latest/use/formatters/)、[Prettier](https://prettier.io/) 等排版工具，可以透過鍵盤快速鍵隨時排版，另外再搭配 [Husky](https://typicode.github.io/husky/) 等 CI 工具更能確保每一個 commit 當下所有程式碼樣貌的一致性。

## 設定檔
Prettier 的設定檔案可以放在非常多的地方，都能讓編輯器自動去找尋：

- `package.json` 裡的 `prettier: {}`
- 專案目錄下 `.prettierrc`，用 json 或 yml 格式
- 也可以直接指定副檔名：`.prettierrc.json`, `.prettierrc.yml`, `.prettierrc.yaml`, `.prettierrc.json5`, `.prettierrc.toml`
- 專案目錄下用 js 的形式，差別在於指定模組引入的方式
- `.prettier.js`, `prettier.config.js`：`export default` / `module.exports`
- `.prettier.mjs`, `prettier.config.mjs`：`export default`
- `.prettier.cjs`, `prettier.config.cjs`：`module.exports`

> [Configuration File · Prettier](https://prettier.io/docs/en/configuration)

## 排版規則
挑幾個除了預設之外我會特別去設定的 Prettier 排版規則來介紹：

- Print Width `printWidth`
- 單行最長字元數
- 現在都會建議建議 100 或 120 是最適合現代螢幕的寬度，讓開發者在閱讀多行程式碼時不會需要頻繁的滾動捲軸
- Tab Width `tabWidth`
- 縮排用幾個空白
- 前端程式碼很常出現多層結構，我習慣用 2 個空白
- Semicolons `semi`
- 行尾要不要有分號
- Quotes `singleQuote`
- 使用單引號或雙引號
- Trailing Commas `trailingComma`
- 在多行的逗號結構中是否在最後一行也加入逗號
- JS 的物件、陣列、函數參數在開發中很常有增有減，如果設定為 `none` 的話會因為在最後新增了一個 key 導致上面那行也要額外補上逗號，間接讓 commit 出現不必要的更新
- 在 prettier 3.0.0 之後預設 `all`

其他幾個規則可能也有些人會在意：

- Bracket Spacing
- 單行的 object 是否要在大括號旁邊加一個空白
- Bracket Line
- HTML, JSX, Vue, Angular 的結尾角括號要不要放在同一行
- 跟 trailing commas 類似，attribute 有增有減，預設 `false` 避免 commit 多一行更新
- Arrow Function Parentheses
- ES6 箭頭函數只有一個參數的時候要不要加小括號

## Plugins
- prettier-plugin-organize-imports
排序 imports
- prettier-plugin-tailwindcss
排序 Tailwind 的 className

## 我的設定檔

`.prettierrc`

{
  "printWidth": 120,
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
}