オプション

非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。エラーを見つけましたか？問題を報告 →

Prettierにはいくつかのフォーマットオプションが用意されています。

Prettierのオプションに対する考え方については、オプション哲学をご覧ください。

オプションを変更する場合は、設定ファイルを使用することをお勧めします。これによりPrettier CLI、エディター統合、およびその他のツールが使用中のオプションを認識できます。

実験的三項演算子

デフォルトの動作になる前に、Prettierの新しい三項演算子フォーマットをお試しください。

有効なオプション:

true - 条件式の後に疑問符を配置する「curious ternaries」形式を使用
false - 三項演算子のデフォルト動作を維持（結果節と同じ行に疑問符を保持）

Default	CLI Override	API Override
`false`	`--experimental-ternaries`	`experimentalTernaries: <bool>`

実験的演算子位置

有効なオプション:

"start" - バイナリ式が改行する場合、演算子を新しい行の先頭に配置
"end" - デフォルト動作。バイナリ式が改行する場合、演算子を前の行の末尾に配置

Default	CLI Override	API Override
`"end"`	`--experimental-operator-position <start\|end>`	`experimentalOperatorPosition: "<start\|end>"`

印刷幅

プリンターが折り返しを行う行の長さを指定します。

警告

可読性のため80文字を超える使用は非推奨です:

コーディングスタイルガイドでは、最大行長ルールが100または120に設定されることがよくあります。しかし、人間がコードを書く際、すべての行で最大列数に達しようとはしません。開発者は可読性のために長い行を空白で分割することが多く、実際の平均行長は最大値を大幅に下回ります。

PrettierのprintWidthオプションは異なる動作をします。これは厳密な上限ではなく、Prettierに対して行の長さの大まかな目安を伝える方法です。Prettierはより短い行や長い行も作成しますが、指定されたprintWidthを満たすよう努めます。

コンピューターは愚直であることを忘れないでください。人間が（行を折り返すタイミングなどで）暗黙の判断を下せる一方で、コンピューターには明示的な指示が必要です。

言い換えると、printWidthをESLintのmax-lenのように使用しようとしないでください。これらは同じものではありません。max-lenは許可される最大行長を示すだけですが、printWidthは一般的に望まれる長さを指定します。

Default	CLI Override	API Override
`80`	`--print-width <int>`	`printWidth: <int>`

.editorconfigファイルでmax_line_lengthを設定すると、上書きされない限りPrettierの印刷幅が設定されます。

(Markdownフォーマット時の行折り返しを無効にするには、文章折り返しオプションを設定してください。)

タブ幅

インデントレベルごとのスペース数を指定します。

Default	CLI Override	API Override
`2`	`--tab-width <int>`	`tabWidth: <int>`

.editorconfigファイルでindent_sizeまたはtab_widthを設定すると、上書きされない限りPrettierのタブ幅が設定されます。

タブ

スペースの代わりにタブで行をインデントします。

Default	CLI Override	API Override
`false`	`--use-tabs`	`useTabs: <bool>`

.editorconfigファイルでindent_styleを設定すると、上書きされない限りPrettierのタブ使用が設定されます。

(タブは_インデント_に使用されますが、Prettierは三項演算子などの_整列_にスペースを使用します。この動作はSmartTabsとして知られています。)

セミコロン

ステートメントの末尾にセミコロンを出力します。

有効なオプション:

true - すべてのステートメントの末尾にセミコロンを追加
false - ASIの失敗を引き起こす可能性のある行の先頭にのみセミコロンを追加します。

Default	CLI Override	API Override
`true`	`--no-semi`	`semi: <bool>`

引用符

二重引用符の代わりに一重引用符を使用します。

注記：

JSXの引用符はこのオプションの影響を受けません → jsx-single-quote を参照
引用符の数が他方を上回る場合、使用頻度が少ない引用符が文字列のフォーマットに使用されます（例："I'm double quoted" → "I'm double quoted"、"This \"example\" is single quoted" → 'This "example" is single quoted'）。

詳細は文字列の設計思想を参照してください。

Default	CLI Override	API Override
`false`	`--single-quote`	`singleQuote: <bool>`

プロパティの引用符

オブジェクト内のプロパティを引用符で囲む条件を変更します。

有効なオプション:

"as-needed" - 必要な箇所のみオブジェクトプロパティを引用符で囲みます。
"consistent" - オブジェクト内の少なくとも1つのプロパティに引用符が必要な場合、全てのプロパティを引用符で囲みます。
"preserve" - 入力されたオブジェクトプロパティの引用符使用を尊重します。

Default	CLI Override	API Override
`"as-needed"`	`--quote-props <as-needed\|consistent\|preserve>`	`quoteProps: "<as-needed\|consistent\|preserve>"`

PrettierはAngular式・TypeScript・Flowでは数値プロパティ名の引用符を外しません（これらの言語では文字列キーと数値キーの区別が重要です）。参照：Angular、TypeScript、Flow。またVueでも引用符を外しません（関連Issue）。

JSX引用符

JSX内で二重引用符の代わりに一重引用符を使用します。

Default	CLI Override	API Override
`false`	`--jsx-single-quote`	`jsxSingleQuote: <bool>`

末尾カンマ

デフォルト値がv3.0.0で es5 から all に変更されました

複数行のカンマ区切り構文構造で可能な限り末尾カンマを挿入します（単一行の配列には適用されません）。

有効なオプション:

"all" - 可能な限り末尾カンマを挿入（関数パラメータと呼び出しを含む）。実行にはES2017をサポートする環境（Node.js 8+ またはモダンブラウザ）またはダウンレベルコンパイルが必要です。TypeScriptの型パラメータにも適用されます（2018年1月リリースのTypeScript 2.7以降でサポート）。
"es5" - ES5で有効な箇所（オブジェクト、配列等）に末尾カンマを挿入。TypeScriptとFlowの型パラメータにも適用。
"none" - 末尾カンマなし。

Default	CLI Override	API Override
`"all"`	`--trailing-comma <all\|es5\|none>`	`trailingComma: "<all\|es5\|none>"`

ブラケット間スペース

オブジェクトリテラルのブラケット間にスペースを挿入します。

有効なオプション:

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

Default	CLI Override	API Override
`true`	`--no-bracket-spacing`	`bracketSpacing: <bool>`

オブジェクトの折り返し

v3.5.0 で初めて利用可能になりました

オブジェクトリテラルが1行に収まる場合と複数行にまたがる場合の、Prettier の折り返し方法を設定します。

デフォルトでは、Prettier は最初のプロパティの前に改行がある場合にオブジェクトを複数行でフォーマットします。作者はこのヒューリスティックを利用して文脈に応じた可読性の向上を図れますが、いくつかの欠点もあります。詳細は複数行オブジェクトを参照してください。

有効なオプション:

"preserve" - 開始ブレースと最初のプロパティの間に改行がある場合、複数行のまま維持
"collapse" - 可能な場合は単一行に収める

Default	CLI Override	API Override
`"preserve"`	`--object-wrap <preserve\|collapse>`	`objectWrap: "<preserve\|collapse>"`

ブラケットの行配置

複数行のHTML要素（HTML、JSX、Vue、Angular）の閉じタグ > を、次の行に単独で配置する代わりに最後の行の末尾に配置します（自己閉じタグには適用されません）。

有効なオプション:

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>

Default	CLI Override	API Override
`false`	`--bracket-same-line`	`bracketSameLine: <bool>`

[非推奨] JSXブラケット

危険

このオプションは v2.4.0 で非推奨となりました。代わりに --bracket-same-line を使用してください。

複数行のJSX要素の閉じタグ > を、次の行に単独で配置する代わりに最後の行の末尾に配置します（自己閉じタグには適用されません）。

有効なオプション:

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>

Default	CLI Override	API Override
`false`	`--jsx-bracket-same-line`	`jsxBracketSameLine: <bool>`

アロー関数の括弧

v1.9.0 で初めて利用可能、デフォルト値は v2.0.0 で avoid から always に変更

単一のアロー関数パラメータを括弧で囲むかどうか

有効なオプション:

"always" - 常に括弧を含める。例: (x) => x
"avoid" - 可能な場合は括弧を省略。例: x => x

Default	CLI Override	API Override
`"always"`	`--arrow-parens <always\|avoid>`	`arrowParens: "<always\|avoid>"`

一見すると、括弧を省略すると視覚的なノイズが減り良い選択に見えます。しかし、Prettierが括弧を削除すると、型注釈の追加、引数の追加、デフォルト値の設定、その他の変更が難しくなります。実際のコードベースを編集する際の開発者体験を考慮すると、括弧を一貫して使用する方が優れており、これがオプションのデフォルト値の根拠です。

範囲指定

ファイルの一部のみをフォーマット

これらのオプションを使用すると、指定した文字オフセット（それぞれ包含と排他的）で始まり終わるコードのみをフォーマットできます。範囲は以下のように拡張されます:

後方: 選択されたステートメントを含む最初の行の先頭まで
前方: 選択されたステートメントの終端まで

Default	CLI Override	API Override
`0`	`--range-start <int>`	`rangeStart: <int>`
`Infinity`	`--range-end <int>`	`rangeEnd: <int>`

パーサー

使用するパーサーを指定

Prettier は入力ファイルパスからパーサーを自動的に推測するため、この設定を変更する必要は通常ありません。

babel と flow の両パーサーは同じJavaScript機能セット（Flow型注釈を含む）をサポートしています。エッジケースで挙動が異なる可能性があるため、問題が発生した場合は babel の代わりに flow を試してください。同様のことが typescript と babel-ts にも当てはまります。babel-ts は TypeScript でまだサポートされていない JavaScript 機能（提案段階）をサポートする可能性がありますが、不正なコードに対する許容度が低く、typescript パーサーよりも実戦検証が少ないです。

有効なオプション:

"babel" (via @babel/parser) v1.16.0以前は"babylon"という名称
"babel-flow" ("babel"と同じだがFlowパースを明示的に有効化し曖昧さ回避) v1.16.0で追加
"babel-ts" ("typescript"と類似だがBabelとTypeScriptプラグインを使用) v2.0.0で追加
"flow" (via flow-parser)
"typescript" (via @typescript-eslint/typescript-estree) v1.4.0で追加
"espree" (via espree) v2.2.0で追加
"meriyah" (via meriyah) v2.2.0で追加
"acorn" (via acorn) v2.6.0で追加
"css" (via postcss) v1.7.1で追加
"scss" (via postcss-scss) v1.7.1で追加
"less" (via postcss-less) v1.7.1で追加
"json" (via @babel/parser parseExpression) v1.5.0で追加
"json5" ("json"と同じパーサだがjson5形式で出力) v1.13.0で追加
"jsonc" ("json"と同じパーサだが「コメント付きJSON」として出力) v3.2.0で追加
"json-stringify" ("json"と同じパーサだがJSON.stringify形式で出力) v1.13.0で追加
"graphql" (via graphql/language) v1.5.0で追加
"markdown" (via remark-parse) v1.8.0で追加
"mdx" (via remark-parse および @mdx-js/mdx) v1.15.0で追加
"html" (via angular-html-parser) v1.15.0で追加
"vue" ("html"と同じパーサだがVue固有の構文もフォーマット) v1.10.0で追加
"angular" ("html"と同じパーサだがangular-estree-parser経由でAngular固有構文もフォーマット) v1.15.0で追加
"lwc" ("html"と同じパーサだがLWC固有構文（引用符なしテンプレート属性）をフォーマット) v1.17.0で追加
"mjml" (パーサーは"html"と同じですが、MJML固有の構文もフォーマットします) バージョン3.6.0で初めて導入されました
"yaml" (yaml および yaml-unist-parser 経由) バージョン1.14.0で初めて導入されました

Default	CLI Override	API Override
None	`--parser <string>`	`parser: "<string>"`

注意: デフォルト値はv1.13.0まで"babylon"でした。

注意: カスタムパーサーAPIはv3.0.0で削除されました。代わりにプラグインを使用してください（移行方法）。

ファイルパス

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

たとえば、次のように指定するとCSSパーサーが使用されます：

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

このオプションはCLIとAPIでのみ有効です。設定ファイルで使用することは適切ではありません。

Default	CLI Override	API Override
None	`--stdin-filepath <string>`	`filepath: "<string>"`

プラグマの要求

バージョン1.7.0で初めて導入されました

Prettierは、ファイル先頭にプラグマと呼ばれる特別なコメントを含むファイルのみをフォーマットするように制限できます。これは、フォーマットされていない大規模なコードベースをPrettierに段階的に移行する場合に非常に便利です。

ファイルの最初のコメントとして以下が含まれている場合、--require-pragmaが指定されたときにフォーマットされます：

/**
 * @prettier
 */

または

/**
 * @format
 */

Default	CLI Override	API Override
`false`	`--require-pragma`	`requirePragma: <bool>`

プラグマの挿入

バージョン1.8.0で初めて導入されました

Prettierはファイル先頭に、ファイルがPrettierでフォーマットされたことを示す特別な@formatマーカーを挿入できます。これは--require-pragmaオプションと組み合わせて使用すると効果的です。ファイル先頭に既にdocblockがある場合、このオプションは@formatマーカーを含む改行を追加します。

「組み合わせて」とは「同時に」という意味ではないことに注意してください。両方のオプションを同時に使用すると、--require-pragmaが優先され、--insert-pragmaは無視されます。この設計は、大規模なコードベースでPrettierを段階的に導入する際に、移行プロセスに関わる開発者は--insert-pragmaを使用し、それ以外のチームメンバーや自動化ツールは--require-pragmaを使用して移行済みファイルのみを処理するシナリオを想定しています。この機能はFacebookの[採用戦略]に着想を得ています。

Default	CLI Override	API Override
`false`	`--insert-pragma`	`insertPragma: <bool>`

無視プラグマのチェック

バージョン3.6.0で初めて導入されました

Prettierは、ファイル先頭にプラグマと呼ばれる特別なコメントを含む個別ファイルがフォーマットをスキップできるようにします。

これらのマーカーをチェックするとフォーマット時にわずかなオーバーヘッドが発生するため、デフォルトでは有効になっていません。

ファイルの最初のコメントとして以下が含まれている場合、--check-ignore-pragmaが指定されたときにフォーマットされません：

/**
 * @noprettier
 */

または

/**
 * @noformat
 */

Default	CLI Override	API Override
`false`	`--check-ignore-pragma`	`checkIgnorePragma: <bool>`

文章の折り返し

バージョン1.8.2で初めて導入されました

デフォルトでは、PrettierはGitHubコメントやBitBucketなど改行を重視するレンダラーを使用するサービスのため、Markdownテキストの折り返しを変更しません。プリント幅で文章を折り返すには、このオプションを"always"に変更してください。すべての文章ブロックを単一行に強制し、エディタ/ビューアのソフト折り返しに依存する場合は"never"を使用します。

有効なオプション:

"always" - プリント幅を超える場合、文章を折り返します。
"never" - 各文章ブロックを折り返さず単一行にします。
"preserve" - 何もせず、テキストをそのまま保持します。v1.9.0で初めて利用可能

Default	CLI Override	API Override
`"preserve"`	`--prose-wrap <always\|never\|preserve>`	`proseWrap: "<always\|never\|preserve>"`

HTML空白文字の感度

最初の実装 v1.15.0。Handlebars対応はv2.3.0

HTML、Vue、Angular、Handlebarsにおけるグローバルな空白文字の感度を指定します。詳細は空白文字に敏感なフォーマットを参照してください。

有効なオプション:

"css" - CSSのdisplayプロパティのデフォルト値を尊重します。Handlebarsではstrictと同様に扱われます。
"strict" - すべてのタグ周囲の空白（またはその欠如）が重要とみなされます。
"ignore" - すべてのタグ周囲の空白（またはその欠如）が重要ではないとみなされます。

Default	CLI Override	API Override
`"css"`	`--html-whitespace-sensitivity <css\|strict\|ignore>`	`htmlWhitespaceSensitivity: "<css\|strict\|ignore>"`

Vueファイルのscript/styleタグのインデント

最初の実装 v1.19.0

Vueファイル内の<script>および<style>タグ内のコードをインデントするかどうか。

有効なオプション:

false - Vueファイル内のscriptタグとstyleタグをインデントしません。
true - Vueファイル内のscriptタグとstyleタグをインデントします。

Default	CLI Override	API Override
`false`	`--vue-indent-script-and-style`	`vueIndentScriptAndStyle: <bool>`

行末文字

最初の実装 v1.15.0。デフォルト値はv2.0.0でautoからlfに変更

歴史的な理由により、テキストファイルには2種類の行末スタイルが存在します。 \n（LF：Line Feed）と\r\n（CRLF：Carriage Return + Line Feed）です。前者はLinuxやmacOSで一般的で、後者はWindowsで広く使われています。詳細な背景はWikipediaで解説されています。

異なるOSのユーザーが共同で作業する場合、Gitリポジトリ内で行末スタイルが混在することがあります。 Windowsユーザーが誤ってコミット済みファイルの行末をLFからCRLFに変更することもあります。これによりgit diffの出力が大きく変わり、ファイルの行単位の履歴(git blame)の確認が困難になります。

Prettierが扱うファイルすべてでLinuxスタイルの行末（LF）を強制したい場合：

PrettierのendOfLineオプションをlfに設定（v2.0.0以降はデフォルト）
Prettierを実行するpre-commitフックを設定
CIパイプラインで--checkフラグを使用してPrettierを実行。Travis CIを使用する場合は.travis.ymlでautocrlfオプションをinputに設定
リポジトリの.gitattributesに* text=auto eol=lfを追加。この変更後、Windowsユーザーはリポジトリを再クローンする必要がある場合があります（Gitがチェックアウト時にLFをCRLFに変換しないようにするため）

すべてのOSの最新テキストエディタは\n(LF)の行末を正しく表示できます。ただし古いWindowsのメモ帳は\r\n(CRLF)にしか対応しておらず、LFの行を1行に表示してしまうことに注意してください。

有効なオプション:

"lf" – Line Feedのみ (\n)。Linux/macOSおよびGitリポジトリ内で一般的
"crlf" - キャリッジリターン + ラインフィード文字 (\r\n)、Windowsで一般的
"cr" - キャリッジリターンのみ (\r)、非常に稀に使用される
"auto" - 既存の改行コードを維持（1つのファイル内に混在する改行コードは、最初の行以降で使用されている改行コードに基づいて正規化されます）

Default	CLI Override	API Override
`"lf"`	`--end-of-line <lf\|crlf\|cr\|auto>`	`endOfLine: "<lf\|crlf\|cr\|auto>"`

.editorconfigファイルでend_of_lineを設定すると、上書きされない限りPrettierの改行コード設定が適用されます。

埋め込み言語のフォーマット

初回導入バージョン: v2.1.0

ファイル内に埋め込まれた引用コードをPrettierがフォーマットするかどうかを制御します。

Prettierは、別のファイル内の文字列中にフォーマット可能なコードが埋め込まれていると識別した場合（例: JavaScriptのhtmlタグ付きテンプレートリテラルやMarkdownのコードブロック）、デフォルトでそのコードをフォーマットしようとします。

この動作が望ましくない場合があります（特に文字列をコードとして解釈する意図がない場合）。このオプションではデフォルト動作（auto）と機能完全無効化（off）を切り替えられます。

有効なオプション:

"auto" – Prettierが自動識別した埋め込みコードをフォーマット
"off" - 埋め込みコードの自動フォーマットを完全に無効化

Default	CLI Override	API Override
`"auto"`	`--embedded-language-formatting=<off\|auto>`	`embeddedLanguageFormatting: "<off\|auto>"`

1行1属性

初回導入バージョン: v2.6.0

HTML/Vue/JSXで1行に1つの属性を強制

有効なオプション:

false - 1行に複数属性を許可
true - 1行に1属性を強制

Default	CLI Override	API Override
`false`	`--single-attribute-per-line`	`singleAttributePerLine: <bool>`

実験的三項演算子​

実験的演算子位置​

印刷幅​

タブ幅​

タブ​

セミコロン​

引用符​

プロパティの引用符​

JSX引用符​

末尾カンマ​

ブラケット間スペース​

オブジェクトの折り返し​

ブラケットの行配置​

[非推奨] JSXブラケット​

アロー関数の括弧​

範囲指定​

パーサー​

ファイルパス​

プラグマの要求​

プラグマの挿入​

無視プラグマのチェック​

文章の折り返し​

HTML空白文字の感度​

Vueファイルのscript/styleタグのインデント​

行末文字​

埋め込み言語のフォーマット​

1行1属性​

実験的三項演算子

実験的演算子位置

印刷幅

タブ幅

タブ

セミコロン

引用符

プロパティの引用符

JSX引用符

末尾カンマ

ブラケット間スペース

オブジェクトの折り返し

ブラケットの行配置

[非推奨] JSXブラケット

アロー関数の括弧

範囲指定

パーサー

ファイルパス

プラグマの要求

プラグマの挿入

無視プラグマのチェック

文章の折り返し

HTML空白文字の感度

Vueファイルのscript/styleタグのインデント

行末文字

埋め込み言語のフォーマット

1行1属性