Prettierの設定オプションについてまとめてみた

はじめに

コードスタイルを整えるためにprettierをよく使ってはいたのですが、
雰囲氣で使っていたところもあったので、設定できるオプションについてまとめてみました。

使用バージョン：prettier 2.7.1
動作確認はVSCodeにて行なっています。
Vueでの実装について確認していますので、JSX関係はほぼ公式の内容となっています。

さらに詳細を知りたい場合は公式サイトをご確認ください。
Prettier オプション

個人的おすすめ設定

.prettierrc.yaml

printWidth: 100

以上！

折り返しの幅だけは、ちょっと広めにしたいです。
他のオプションについては、調べてみると意外とデフォルトの設定であることが多く、
設定上記載しなくても私的には十分なものでした。

バージョンアップによって、デフォルト値が変わるものもあったりするので、明示的に定義しておくのも良いかと思います。
別な切り口として、チーム開発においては、スキルセットや習熟度が異なるメンバーで開発しますので、
デフォルト値も含めて設定ファイルに定義しておくことで、それ自体がコーディング規約にもなりますので、
マネジメント観点でもありかもしれないと思います。

デフォルト値含めると以下のようになります。

.prettierrc.yaml

printWidth: 100
tabWidth: 2
useTabs: false
semi: true
singleQuote: false
quoteProps: "as-needed"
trailingComma: "es5"
bracketSpacing: true
bracketSameLine: false
arrowParens: "always"
requirePragma: false
insertPragma: false
htmlWhitespaceSensitivity: "css"
vueIndentScriptAndStyle: false
endOfLine: "lf"
embeddedLanguageFormatting: "auto"
singleAttributePerLine: false

オプション

printWidth　折り返し

長い行を折り返す位置を指定します。

デフォルト	CLI	API
80	--print-width {int}	printWidth: {int}

例

# 120文字で折り返し
printWidth: 120

• 指定した文字数を超えたら折り返します。
• 日本語など全角文字は2文字でカウント
• インデントは1つにつきtabWidthの数値分でカウント
  • インデントが2個なら4文字分（tabWidthがデフォルト値の場合）

tabWidth　インデントのサイズ

インデントのサイズを指定します。
スペースでインデントの場合、指定数分のインデントとなります。
タブでインデントの場合、見た目上は変化ありませんが、printWidthの折り返しタイミングの数値に影響があります。

デフォルト	CLI	API
2	--tab-width {int}	tabWidth: {int}

例

# タブのサイズを4文字にする
tabWidth: 4

useTabs　タブでインデント

タブでインデントを行います。
デフォルトは半角スペースでインデントです。

デフォルト	CLI	API
false	--use-tabs	useTabs: {bool}

例

# タブでインデントする
useTabs: true

semi　行末にセミコロン

行末にセミコロンを付与します。
デフォルトではセミコロンを付与します。

デフォルト	CLI	API
true	--no-semi	semi: {bool}

例

# 行末のセミコロンをなしにする
semi: false

singleQuote　シングルクォーテーションで囲む

文字列の囲みをダブルクォーテーションではなく、シングルクォーテーションにします。

デフォルト	CLI	API
false	--single-quote	singleQuote: {bool}

例

# シングルクォーテーションで囲む
singleQuote: true

文字列中にシングルクォーテーションが含まれる場合は、ダブルクォーテーションで囲むなど割と柔軟にフォーマットしてくれます。
文字列中のシングルクォーテーションとダブルクォーテーションの使用頻度で選択されます。
使用頻度が多い方を生かして少ない方の引用符で囲む方式。

singleQuote: trueの例

// シングルクォーテーションが含まれる場合、ダブルクォーテーションのままで変換されない
const s = "I'm double quoted"
// シングルクォーテーションに変換される
const s = "This \"example\" is single quoted" // 変換前
const s = 'This "example" is single quoted' // 変換後

// 文中に ' が1つ、 " が２つで、 " の方が多いのでシングルクォーテーションで囲まれる
const s = "I'm double quoted. This \"example\" is single quoted" // 変換前
const s = 'I\'m double quoted. This "example" is single quoted' // 変換後

// 文中に ' と " が同じ数含まれる場合、設定に従ってシングルクォーテーションで囲まれる
const s = "I'm I'm double quoted. This \"example\" is single quoted" // 変換前
const s = 'I\'m I\'m double quoted. This "example" is single quoted' // 変換後

quoteProps オブジェクトのプロパティ引用符

オブジェクトのプロパティを引用符で囲むルールについての取り決めを設定します。

デフォルト	CLI	API
as-needed	--quote-props {as-needed	consistent

• "as-needed" - 必要な場合にのみ、引用符で囲みます。

• "consistent" - オブジェクト内の要素で1つでも引用符が必要な場合は、すべてのプロパティに付与します。

• "preserve" - 引用符の入力使用を尊重します。

• '-'を含むプロパティ名は引用符で囲む必要があります。

下記の場合

interface Customer {
  'code': string;
  name: string;
  'e-mail': string;
}

"as-needed"

引用符の必要性がないプロパティは引用符が消える。（ｃｏｄｅ）
引用符の必要なプロパティは引用符はそのまま。（e-mail）

interface Customer {
  code: string;
  name: string;
  'e-mail': string;
}

"consistent"

引用符の必要なプロパティがあるのですべてが引用符で囲まれます。
引用符の必要なプロパティがない場合は引用符が消えます。

interface Customer {
  'code': string;
  'name(: string;
  'e-mail': string;
}

"preserve"

記述した引用符の状態を維持します。

interface Customer {
  'code': string;
  name: string;
  'e-mail': string;
}

jsxSingleQuote JSXでの引用符

JSXにおいてダブルクォーテーションの代わりにシングルクォーテーションを使用します。

デフォルト	CLI	API
false	--jsx-single-quote	jsxSingleQuote: "{bool}"

例

# シングルクォーテーションを使用
jsxSingleQuote: true

trailingComma 末尾のカンマ

複数要素の末尾の後ろにカンマを付与するかどうか

デフォルト	CLI	API
"es5"	--trailing-comma {es5	none

例

# 末尾のカンマはなし
trailingComma: "none"

• "es5" - ES5で有効な末尾のカンマ。TypeScriptの型パラメーターに末尾のカンマはありません。
• "none" - 末尾のカンマはありません。
• "all" - 可能な限り末尾のカンマを付与。

※　allの場合、動作環境によってはjavascriptが動作しない可能性があります。
Trailing Commas

const test = {
  a: 'a',
  b: 'b', // ←末尾のカンマ
};

es5の場合

const test = {
  a: 'a',
  b: 'b', // ←末尾のカンマが消えない。ついていない場合は付与する
};

const test = { a: 'a', b: 'b' }; // １行で書いた場合、末尾のカンマが消える

es5の場合はGo言語のカンマの振る舞いに近いと感じました。
複数要素の末尾が改行で終えているとカンマが必要で、同一行で要素が閉じられていれば不要

noneの場合はカンマが消えるので例は割愛します。

bracketSpacing 要素とカッコの間のスペース

オブジェクト内の要素と括弧の間にスペースを出力します。

デフォルト	CLI	API
true	--no-bracket-spacing	bracketSpacing: {bool}

例

# スペースを入れない
bracketSpacing: false

true - 例: { foo: bar }
false - 例: {foo: bar}

bracketSameLine 閉じカッコを同一行に

HTMLタグの閉じカッコを同一行に含めるかどうか

デフォルト	CLI	API
false	--bracket-same-line	bracketSameLine: {bool}

例

# 含める場合
bracketSameLine: true

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>

arrowParens アロー関数の引数をカッコで囲む

アロー関数のパラメーターをカッコで囲みます

デフォルト	CLI	API
"always"	--arrow-parens {always	avoid}

• "always" - 常に括弧を含めます。例：(x) => x
• "avoid" - 可能な場合は括弧を省略します。例：x => x 引数が1つの場合くらいか？

rangeStart rangeEnd フォーマット範囲の指定

フォーマットする範囲を行番号で指定。
※設定を入れてもVS Code上はファイル内全てをフォーマットしてしまいました。
　CLIならちゃんと効いてくれるかも？要検証

デフォルト	CLI	API
0	--range-start {int}	rangeStart: {int}
Infinity	--range-end {int}	rangeEnd: {int}

※　rangeEndのデフォルト値「Infinity」は文字列ではなく、数値の上限がないという意味なので、指定するのは数値で指定しましょう。

rangeEnd: Infinity ・・・ NG
rangeEnd: 99999999　　・・・ OK

例

# 10行目から100行目までフォーマット
rangeStart: 10
rangeEnd: 100

parser パーサー指定

使用するパーサーを指定します。
Prettier はファイルパスからパーサーを自動的に推測するため、
理由がない限りあえてこの設定を変更する必要はありません。

デフォルト	CLI	API
なし	--parser {string}	parser: "{string}"
なし	--parser ./my-parser	parser: require("./my-parser")

※指定可能なパラメータは公式ページで確認してみてください。
Parser

例

# @babel/parserを使用
parser: "babel"

filepath パーサ推測のためのファイルパス

使用するパーサーを推測するために使用するファイル名を指定します。

デフォルト	CLI	API
なし	--stdin-filepath {string}	filepath: "{string}"

例

次の例では CSS パーサーを使用します。

cat foo | prettier --stdin-filepath foo.css

# CSS パーサーを使用
filepath: "foo.css"

requirePragma　プラグマ付きファイルをフォーマット対象とする

プラグマを含むファイルのみにフォーマットを行います。

デフォルト	CLI	API
false	--require-pragma	requirePragma: {bool}

プラグマは、ファイルの先頭に記述する下記のようなコメントです。

/** @prettier */
または、
/** @format */

HTMLやVueファイルの場合

<!-- @prettier -->
または、
<!-- @format -->

• 設定をtrueにしフォーマットすると、想定通りフォーマットされなくなります。
• プラグマを追加してフォーマットすると、フォーマットされるようになります。
  -　rangeStart rangeEndに任意の値を設定している場合、プラグマがあってもフォーマットが効かないようです。設定なしか、明示的にデフォルト値と同じ値を設定している場合であればフォーマットされます。

例

# 
requirePragma: true

insertPragma プラグマを挿入

プラグマを挿入します。

デフォルト	CLI	API
false	--insert-pragma	insertPragma: {bool}

例

# プラグマを挿入する
insertPragma: true

• ファイルの先頭にブロックコメントがある場合は、そのブロックコメント内にプラグマが挿入されます。
• requirePragmaがtrueの場合、insertPragmaは無視されます。
  本機能を利用してプラグマを挿入したい場合は、一時的にオフにするとよいでしょう。
• 新規サービスでは不要ですが。prettierを導入しようとして差分が出過ぎるようなソースに段階的に適用していくにはよい設定ですね。

proseWrap

マークダウンテキストの折り返しを設定します。
マークダウンといいつつ、htmlやvueファイルでも効いてくれます。

デフォルト	CLI	API
"preserve"	--prose-wrap {always	never

例

# 常に折り返す設定
proseWrap: "always"

• "always" - 文字列がprintWidthを超える場合は折り返す。
• "never" - 文字列の各ブロックを 1 行に広げます。
• "preserve" - 何もせず、文章をそのままにしておきます。

"always"の場合、printWidthのサイズより短めに自信で入れた改行も無視してprintWidthのサイズで折り返しされてしまいます。

htmlWhitespaceSensitivity HTML 空白の感度

HTML 空白の感度

デフォルト	CLI	API
"css"	--html-whitespace-sensitivity {css	strict

• "css" - CSSのdisplayプロパティのデフォルト値を尊重します。strictと同じ扱いのハンドル用。
• "strict" - すべてのタグの周りの空白 (またはその欠如) は重要であると見なされます。
• "ignore" - すべてのタグの周りの空白 (またはその欠如) は重要ではないと見なされます。

例

下記のタグの場合

<span class="dolorum atque aspernatur">Est molestiae sunt facilis qui rem.</span>

css

<span class="dolorum atque aspernatur"
  >Est molestiae sunt facilis qui rem.</span
>

折り返しが発生する場合、タグの後ろ「>」も含めて改行し、文字列が続きます。

strict

<span class="dolorum atque aspernatur"
  >Est molestiae sunt facilis qui rem.</span
>

ignore

折り返しが発生する場合、特に考慮せず文字列のみ改行されます。

<span class="dolorum atque aspernatur">
  Est molestiae sunt facilis qui rem.
</span>

vueIndentScriptAndStyle scriptタグとstyleタグのインデント

Vueファイルにおいて script タグと style タグの中を１つインデントします。

デフォルト	CLI	API
false	--vue-indent-script-and-style	vueIndentScriptAndStyle: {bool}

例

インデントなし（デフォルト）

<script setup lang="ts">
import { reactive } from 'vue';

... 何か処理

</script>

インデントあり

<script setup lang="ts">
  // インデントされる
  import { reactive } from 'vue';

  ... 何か処理

</script>

endOfLine 改行コードの指定

改行コードの指定

デフォルト	CLI	API
"lf"	--end-of-line {lf	crlf

例

# 120文字で折り返し
endOfLine: "auto"

• "lf" – ラインフィード ( \n)、Linux と macOS および git リポジトリ内で共通
• "crlf" - キャリッジリターン + ラインフィード ( \r\n)、Windows で一般的
• "cr" - キャリッジリターン ( \r)、めったに使用されません
• "auto" - 既存の行末を維持します (1 つのファイル内の混合値は、最初の行の後に使用されているものを調べることによって正規化されます)

embeddedLanguageFormatting 組み込み言語のフォーマット

組み込み言語のフォーマットを有効にします。

デフォルト	CLI	API
"auto"	--embedded-language-formatting=off	embeddedLanguageFormatting: "off"

例

# 組み込み言語のフォーマットをしない
embeddedLanguageFormatting: "off"

langで指定した形式にフォーマットしてくれます。

<custom lang="json">
{
"a": 1,
"b": 2
}
</custom>

変換後

<custom lang="json">
{
  "a": 1,
  "b": 2
}
</custom>

singleAttributePerLine 属性の改行

HTML、Vue、JSXにおいて、属性を１行づつ改行します。

デフォルト	CLI	API
false	--single-attribute-per-line	singleAttributePerLine: {bool}

例

下記のように属性を複数持つような場合、tabWidthで折り返しますが、
この設定を有効にすることで、1つの属性で改行されるようになります。

<template>
  <div class="q-pa-md">
    <q-table title="Treats" :rows="rows" :columns="columns" row-key="name" :separator="separator" />
  </div>
</template>

変換後

<template>
  <div class="q-pa-md">
    <q-table
      title="Treats"
      :rows="rows"
      :columns="columns"
      row-key="name"
      :separator="separator"
    />
  </div>
</template>