Prettier の設定一覧

この記事を書いたときの Stable は v2.0.5 です。

Prettier の Option は全部で20個

1. Print Width
2. Tab Width
3. Tabs
4. Semicolons
5. Quotes
6. Quotes Props
7. JSX Quotes
8. Trailing Commas
9. Bracket Spacing
10. JSX Brackets
11. Arrow Function Parentheses
12. Range
13. Parser
14. File Path
15. Require Pragma
16. Insert Pragma
17. Props Wrap
18. HTML Whitespace Sensitivity
19. Vue file script and style tags indentation
20. End of Line

Print Width

1行で表示する文字数をいくつにするかを設定する項目です。デフォルトでは 80 に設定してあります。

Tab Width

インデントのサイズを設定する項目です。デフォルトでは 2 に設定してあります。

Tabs

インデントにスペースの代わりにタブを使うかどうかを設定する項目です。

false だとスペースを、 true だとタブを使います。デフォルトでは false に設定してあります。

Semicolons

文のあとにセミコロンを付けるかどうかを設定する項目です。

true だとすべての文の最後にセミコロンを付けます。 false だと文の最後にセミコロンは付きません。デフォルトでは true に設定してあります。

Quotes

文字列などをクォートで囲むとき、シングルクォートで囲むかどうかを設定する項目です。

false だとダブルクォート、 true だとシングルクォートで囲みます。デフォルトでは false に設定してあります。

Quote Props

オブジェクトのプロパティ名をクォートで囲むかどうかを設定する項目です。

設定の選択肢は3つあります。

• "as-needed" - 必要なときにだけクォートで囲む
• "consistent" - ひとつでもクォートが必要なものがあればすべてのプロパティ名をクォートで囲む
• "preserve" - 入力したままの状態にする

デフォルトでは "as-needed" に設定してあります。

Quote Props の例

const myObject = {
  "hoge": "fuga"
};

上記の場合、プロパティ名 "hoge" はクォートで囲まなくても大丈夫なので、"as-needed" と "consistent" の場合はクォートが外れて hoge だけになります。"preserve" の場合だけ入力したままなので "hoge" とクォートで囲まれたままになります。

const myObject = {
  "hoge": "fuga",
  "foo-bar": "baz"
};

上記の場合、 "foo-bar" はハイフンを含むプロパティ名になっているので "foo-bar" はクォートで囲む必要があります。

"as-needed" の場合は "foo-bar" はそのままクォートで囲まれたプロパティ名で "hoge" のほうはクォートが必要ないので外れます。

"consistent" の場合は "foo-bar" がクォートで囲む必要があるプロパティ名なので統一感を持たせるために "hoge" もクォートで囲まれたままになります。

"preserve" の場合は入力されたままなので上記のままです。

JSX Quotes

JSX内のクォートをシングルクォートで囲むかどうかを設定する項目です。

false だとダブルクォート、 true だとシングルクォートで囲みます。デフォルトでは false に設定してあります。

Trailing Commas

複数行のときの末尾のカンマを付けるかどうかを設定する項目です。
（たとえば1行で書かれた配列では末尾のカンマは付けません）

設定の選択肢は3つあります。

• "es5" - ES5 で有効なところには末尾のカンマを付けます
• "none" - 末尾のカンマは付けません
• "all" - 末尾のカンマを可能なところはすべて付けます

デフォルトでは "es5" に設定してあります。

Bracket Spacing

オブジェクトリテラルの {} （ブラケット）内の前後にスペースを入れるかどうかを設定する項目です。

true だとスペースが入り、false だとスペースが入りません。デフォルトでは true に設定してあります。

• true - Example { foo: bar }
• false - Example {foo:bar}

JSX Brackets

JSX要素を複数行で記述するとき、要素の閉じタグ > を最後の行に含んで表示するかどうかを設定する項目です。

true だと最後の行に、false だと改行して新しい行に > が記述されます。デフォルトでは false に設定してあります。

• true - Example

  <button
  className="hoge"
  onClick={handleClick}>
  Click here
  </button>

• false - Example

  <button
  className="hoge"
  onClick={handleClick}
  >
  Click here
  </button>

Arrow Function Parentheses

アロー関数の引数がひとつのときにカッコで囲むかどうかを設定する項目です。

always だとカッコで囲み、avoid だとカッコを省略します。デフォルトでは always に設定してあります。

参照ページ：Options Prettier