[VS code] (引用) 開發工具Prettier設定一覽

引用自
https://hackmd.io/@chupai/HkNT0IMhr

Prettier - Code formatter

Prettier 可以一鍵格式化程式碼，讓所有程式碼都套用一定的規則，在團隊協作開發時達到程式碼的統一。

支持主流文件格式：

1. 設置

在 settings.json 設定檔將格化引擎改成 Prettier：

"editor.defaultFormatter": "esbenp.prettier-vscode"

如果想要不同文件使用不同格式化引擎，可以分別設置：

"[html]": {
  "editor.defaultFormatter": "vscode.html-language-features"
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

在 settings.json 設定檔設定 csscomb.formatOnSave 儲存自動格式化：

"editor.formatOnSave": true,

如果要排除某些文件，也可以分別設置：

"[css]": {
  "editor.formatOnSave": false
},
"[scss]": {
  "editor.formatOnSave": false
},
"[sass]": {
  "editor.formatOnSave": false
},

在根目錄下，建立 .prettierrc.json，在裡面設置選項：

{
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always"
}

2. 選項 Options

Print Width 單行輸出長度

設置 prettier 單行輸出（不折行）的（最大）長度。設定此選項可以讓你超過單行上限時自動換行。

通常程式碼規範指南都會限制單行最大長度為 100 或 120，但為了便於閱讀不建議使用超過 80。

• 預設：80
• printWidth: <int>

如果在格式化 Markdown 文件，不想拆行，需要設置 Prose Wrap 選項關閉它。

Tab Width 縮排空格

設置 Tab 鍵等於幾個空格數。

• 預設：2
• tabWidth: <int>

Tabs

設置 Tab 鍵使用 tab，而非空格。

• 預設：false
• useTabs: <bool>

Semicolons 分號

在語句末尾添加分號。

• 預設：true
• semi: <bool>

false 只在有可能導致 ASI 錯誤的行首添加分號。

Quotes 引號

使用單引號。

• 預設：false
• semi: <bool>

在 JSX 會忽略此選項，請見下方的 JSX Quotes。

如果是字串，會根據裡面引號來決定是單引號還是雙引號：

let str1 = 'I\'m double quoted';
let str2 = "This \"example\" is single quoted";

// after
let str1 = "I'm double quoted";
let str2 = 'This "example" is single quoted';

Quote Props 屬性的引號

物件的屬性名稱的引號。

• 預設："as-needed"
• quoteProps: "<as-needed|consistent|preserve>"

參數：

• "as-needed"：只必要加上引號的屬性才會有引號。
• "consistent"：如果至少一個屬性需要引號，全部都會統一加上引號。
• "preserve"：不格式化，依使用者的使用。

JSX Quotes

在 JSX 中使用單引號。

• 預設：false
• semi: <bool>

Trailing Commas

在任何可能的多行中輸入尾逗號。

• 預設：false
• trailingCommas: <none|es5|all>

參數：

• none：無尾逗號
• es5：添加 es5 中被支持的尾逗號（例如，object、array 等）
• all：所有可能的地方都被添加尾逗號（包括，函式參數）

Bracket Spacing

在物件字面值所使用的的大括號前後加空格。

• 預設：true
• bracketSpacing: <bool>

// true
{ foo: bar }
// false
{foo: bar}

JSX Brackets

在多行 JSX 元素最後一行的末尾添加 > 而使 > 單獨一行。

• 預設：false
• jsxBracketSameLinte: <bool>

<!-- true -->
<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}>
  Click Here
</button>

<!-- false -->
<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}
>
  Click Here
</button>

Arrow Function Parentheses

箭頭函式參數加上括號。

• 預設："avoid"
• arrowParens: "<avoid|always>"

// tavoid
let foo = x => {};

// always
let foo = (x) => {};

Range

只格式化某個文件的某一段。

• 預設：0、Infinity
• rangeStart: < int >、rangeEnd: < int >

參數不可以同 cursorOffset 共用。

Parser

指定要使用的解析器。

FilePath

指定用於推斷要使用的解析器的文件名。

Require pragma

必須有特殊註解放在開頭的文件才會格式化。

/**
 * @prettier
 */

或

/**
 * @format
 */

• 預設：false
• proseWrap: "requirePragma: <bool>

Insert Pragma

在文件的頂部插入一個 @format 的特殊註解，以表明改文件已經被 Prettier 格式化過了。

• 預設：false
• insertPragma: <bool>

Prose Wrap

• 預設："perserve"
• proseWrap: "<always|never|preserve>"

參數：

• always：超出 print width 限制就換行
• never：不會換行
• perserve：按照文件原樣換行

HTML Whitespace Sensitivity

指定 HTML 文件的全域空格敏感度。

• 預設："css"
• htmlWhitespaceSensitivity: "<css|strict|ignore>"

參數：

• "css"：根據 CSS 的 display 屬性值來決定。
• "strict"：空格被認為是敏感的
• "ignore"：空白被認為是不敏感的

Vue files script and style tags indentation

是否縮進 Vue 文件中 <script> 和 <style> 標記內的程式碼。

• 預設：false
• vueIndentScriptAndStyle: <bool>

End of Line

CRLF、LF 是用來表示換行的方式。CR（Carriage Return） 代表確認鍵 \r。

• CRLF：\r\n，只有在 Windows 系統在用的形式。
• LF：\n，UNIX 系統（包括　Linux, MacOS）。

也就是說只有 Windows 系統的換行多了一個 \r，通常我們都會在 VSCode 就統一設定使用 LF 為預設換行模式。

也可以使用 Prettier 來統一格式。

• 預設："auto"
• endOfLine: "<auto|lf|crlf|cr>"

參數：

• "auto"：保持原樣。
• "lf"：\n
• "crlf"：\r\n
• "cr"：\r