オプション · Prettier

Prettier にはいくつかのフォーマットオプションが付属しています。

オプションに関する Prettier のスタンスの詳細については、オプションに関する考え方を参照してください。

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

実験的な三項演算子

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

有効なオプション

true - 条件の後に疑問符を付ける、好奇心旺盛な三項演算子を使用します。
false - 三項演算子のデフォルトの動作を保持します。結果と同じ行に疑問符を保持します。

デフォルト	CLI による上書き	API による上書き
`false`	`--experimental-ternaries`	`experimentalTernaries: <bool>`

印刷幅

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

可読性のために、80文字を超える使用は推奨しません。

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

Prettier の printWidth オプションは同じようには機能しません。これは、許可されている行の長さの上限ではありません。これは、Prettier に大まかに行の長さをどのくらいにしたいかを伝える方法です。Prettier は短い行と長い行の両方を作成しますが、一般的に指定された printWidth を満たすように努力します。

コンピューターは愚かであることを忘れないでください。人間は行を分割するタイミングなどについて、（暗黙の）判断を下すことができますが、何をすべきかを明示的に指示する必要があります。

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

デフォルト	CLI による上書き	API による上書き
`80`	`--print-width <int>`	`printWidth: <int>`

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

(Markdown をフォーマットするときに行の折り返しをさせたくない場合は、Prose Wrap オプションを設定して無効にできます。)

タブ幅

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

デフォルト	CLI による上書き	API による上書き
`2`	`--tab-width <int>`	`tabWidth: <int>`

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

タブ

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

デフォルト	CLI による上書き	API による上書き
`false`	`--use-tabs`	`useTabs: <bool>`

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

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

セミコロン

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

有効なオプション

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

デフォルト	CLI による上書き	API による上書き
`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' になります。

詳細については、文字列の理論的根拠を参照してください。

デフォルト	CLI による上書き	API による上書き
`false`	`--single-quote`	`singleQuote: <bool>`

プロパティの引用符

オブジェクトのプロパティを引用符で囲むタイミングを変更します。

有効なオプション

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

デフォルト	CLI による上書き	API による上書き
`"as-needed"`	`--quote-props <as-needed\|consistent\|preserve>`	`quoteProps: "<as-needed\|consistent\|preserve>"`

Prettier は、Angular 式、TypeScript、および Flow では数値プロパティ名を引用符で囲まないことに注意してください。これは、これらの言語では文字列キーと数値キーの区別が重要であるためです。参照：Angular、TypeScript、Flow。また、Prettier は Vue の数値プロパティを引用符で囲みません (それについての issue を参照してください)。

JSX 引用符

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

デフォルト	CLI による上書き	API による上書き
`false`	`--jsx-single-quote`	`jsxSingleQuote: <bool>`

末尾のカンマ

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

複数行のカンマ区切りの構文構造で可能な限り末尾のカンマを出力します。（たとえば、単一行の配列は末尾のカンマを取得しません。）

有効なオプション

"all" - 可能な限り末尾のカンマを追加します（関数のパラメータや呼び出しを含む）。この形式でフォーマットされたJavaScriptコードを実行するには、ES2017（Node.js 8以上またはモダンブラウザ）をサポートするエンジン、またはダウンレベルコンパイルが必要です。これにより、TypeScriptの型パラメータでの末尾カンマも有効になります（2018年1月にリリースされたTypeScript 2.7以降でサポートされています）。
"es5" - ES5で有効な場所（オブジェクト、配列など）に末尾カンマを追加します。TypeScriptおよびFlowの型パラメータでの末尾カンマ。
"none" - 末尾カンマを追加しません。

デフォルト	CLI による上書き	API による上書き
`"all"`	`--trailing-comma <all\|es5\|none>`	`trailingComma: "<all\|es5\|none>"`

括弧内のスペース

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

有効なオプション

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

デフォルト	CLI による上書き	API による上書き
`true`	`--no-bracket-spacing`	`bracketSpacing: <bool>`

括弧の行

複数行の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>

デフォルト	CLI による上書き	API による上書き
`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>

デフォルト	CLI による上書き	API による上書き
`false`	`--jsx-bracket-same-line`	`jsxBracketSameLine: <bool>`

アロー関数の括弧

v1.9.0で最初に利用可能になり、v2.0.0でデフォルト値がavoidからalwaysに変更されました。

単一のアロー関数のパラメータを括弧で囲みます。

有効なオプション

"always" - 常に括弧を含めます。例: (x) => x
"avoid" - 可能であれば括弧を省略します。例: x => x

デフォルト	CLI による上書き	API による上書き
`"always"`	`--arrow-parens <always\|avoid>`	`arrowParens: "<always\|avoid>"`

一見すると、括弧を避ける方が視覚的なノイズが少なく、より良い選択のように見えるかもしれません。しかし、Prettierが括弧を削除すると、型注釈、追加の引数、またはデフォルト値を追加したり、その他の変更を加えたりするのが難しくなります。括弧の一貫した使用は、実際のコードベースを編集する際に優れた開発者エクスペリエンスを提供し、オプションのデフォルト値を正当化します。

範囲

ファイルの一部分のみをフォーマットします。

これらの2つのオプションを使用して、指定された文字オフセット（それぞれ包括的および排他的）で始まるコードと終わるコードをフォーマットできます。範囲は拡張されます

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

デフォルト	CLI による上書き	API による上書き
`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"（@babel/parser経由）v1.16.0までは"babylon"という名前でした
"babel-flow"（"babel"と同じですが、あいまいさを避けるためにFlow解析を明示的に有効にします）v1.16.0で最初に利用可能になりました
"babel-ts"（"typescript"に似ていますが、BabelとそのTypeScriptプラグインを使用します）v2.0.0で最初に利用可能になりました
"flow"（flow-parser経由）
"typescript"（@typescript-eslint/typescript-estree経由）v1.4.0で最初に利用可能になりました
"espree"（espree経由）v2.2.0で最初に利用可能になりました
"meriyah"（meriyah経由）v2.2.0で最初に利用可能になりました
"acorn"（acorn経由）v2.6.0で最初に利用可能になりました
"css"（postcss経由）v1.7.1で最初に利用可能になりました
"scss"（postcss-scss経由）v1.7.1で最初に利用可能になりました
"less"（postcss-less経由）v1.7.1で最初に利用可能になりました
"json"（@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"（graphql/language経由）v1.5.0で最初に利用可能になりました
"markdown"（remark-parse経由）v1.8.0で最初に利用可能になりました
"mdx"（remark-parseおよび@mdx-js/mdx経由）v1.15.0で最初に利用可能になりました
"html"（angular-html-parser経由）1.15.0で最初に利用可能になりました
"vue"（"html"と同じパーサーですが、vue固有の構文もフォーマットします）1.10.0で最初に利用可能になりました
"angular"（"html"と同じパーサーですが、angular-estree-parserを介してangular固有の構文もフォーマットします）1.15.0で最初に利用可能になりました
"lwc"（"html"と同じパーサーですが、引用符で囲まれていないテンプレート属性に対してLWC固有の構文もフォーマットします）1.17.0で最初に利用可能になりました
"yaml"（yamlおよびyaml-unist-parser経由）1.14.0で最初に利用可能になりました

デフォルト	CLI による上書き	API による上書き
なし	`--parser <string>`	`parser: "<string>"`

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

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

ファイルパス

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

たとえば、以下はCSSパーサーを使用します

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

このオプションは、CLIおよびAPIでのみ役立ちます。構成ファイルで使用することは意味がありません。

デフォルト	CLI による上書き	API による上書き
なし	`--stdin-filepath <string>`	`filepath: "<string>"`

プラグマの要求

v1.7.0で最初に利用可能になりました

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

次のコメントが最初のコメントとして記述されているファイルは、--require-pragmaを指定するとフォーマットされます

/**
 * @prettier
 */

または

/**
 * @format
 */

デフォルト	CLI による上書き	API による上書き
`false`	`--require-pragma`	`requirePragma: <bool>`

プラグマ挿入

v1.8.0 で最初に利用可能

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

「組み合わせて」とは「同時に」という意味ではないことに注意してください。2つのオプションを同時に使用する場合、--require-pragma が優先されるため、--insert-pragma は無視されます。この考え方は、大規模なコードベースでPrettierを段階的に導入する際、移行プロセスに参加する開発者は --insert-pragma を使用し、それ以外のチームや自動化ツールは、すでに移行済みのファイルのみを処理するために --require-pragma を使用するというものです。この機能は、Facebookの導入戦略に触発されたものです。

デフォルト	CLI による上書き	API による上書き
`false`	`--insert-pragma`	`insertPragma: <bool>`

Prose Wrap

v1.8.2 で最初に利用可能

デフォルトでは、Prettierはmarkdownテキストの折り返しを変更しません。これは、一部のサービスが改行に敏感なレンダラー（例：GitHubのコメントやBitBucket）を使用しているためです。Prettierにプロセを印刷幅に合わせて折り返すようにするには、このオプションを "always" に変更します。Prettierにすべてのプロセブロックを1行に強制し、代わりにエディター/ビューアーのソフト折り返しに依存させたい場合は、"never" を使用できます。

有効なオプション

"always" - プロセが印刷幅を超える場合に折り返します。
"never" - 各プロセブロックを1行にアンラップします。
"preserve" - 何もしないで、プロセをそのままにします。v1.9.0 で最初に利用可能

デフォルト	CLI による上書き	API による上書き
`"preserve"`	`--prose-wrap <always\|never\|preserve>`	`proseWrap: "<always\|never\|preserve>"`

HTML空白感度

v1.15.0 で最初に利用可能。Handlebarsでは 2.3.0 で最初に利用可能

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

有効なオプション

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

デフォルト	CLI による上書き	API による上書き
`"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タグをインデントします。

デフォルト	CLI による上書き	API による上書き
`false`	`--vue-indent-script-and-style`	`vueIndentScriptAndStyle: <bool>`

改行コード

v1.15.0で最初に利用可能、デフォルト値はv2.0.0で auto から lf に変更

歴史的な理由により、テキストファイルには2つの一般的な改行形式が存在します。それは \n (または Line Feed の LF) と \r\n (または Carriage Return + Line Feed の CRLF) です。前者はLinuxおよびmacOSで一般的であり、後者はWindowsで普及しています。なぜそうなのかについての詳細は、Wikipedia にあります。

異なるオペレーティングシステムからプロジェクトで共同作業する場合、共有のgitリポジトリで混在した改行コードを使用することになりがちです。また、Windowsユーザーが以前にコミットされたファイルの改行コードを LF から CRLF に誤って変更することも可能です。これを行うと、大きな git diff が生成されるため、ファイルの行ごとの履歴 (git blame) を調べることが難しくなります。

Prettierでカバーされているファイルで、gitリポジトリ全体にLinux形式の改行コードのみが含まれていることを確認したい場合は、以下を行います。

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

すべてのオペレーティングシステムの最新のテキストエディターは、\n (LF) が使用されている場合、改行コードを正しく表示できます。ただし、Windows用の古いバージョンのメモ帳では、\r\n (CRLF) のみに対処できるため、そのような行を1つにまとめて表示します。

有効なオプション

"lf" – Line Feedのみ (\n)。LinuxおよびmacOS、およびgitリポジトリ内で一般的
"crlf" - Carriage Return + Line Feed 文字 (\r\n)。Windowsで一般的
"cr" - Carriage Return 文字のみ (\r)。ごくまれに使用
"auto" - 既存の改行コードを維持します（1つのファイル内の混合値は、最初の行の後で使用されているものを調べることで正規化されます）

デフォルト	CLI による上書き	API による上書き
`"lf"`	`--end-of-line <lf\|crlf\|cr\|auto>`	`endOfLine: "<lf\|crlf\|cr\|auto>"`

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

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

v2.1.0 で最初に利用可能

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

Prettierが、別のファイル内の文字列内に、フォーマット方法を認識しているコードを配置したと思われるケース（たとえば、htmlというタグが付いたJavaScriptのタグ付きテンプレートやMarkdownのコードブロックなど）を識別すると、デフォルトでそのコードをフォーマットしようとします。

場合によっては、この動作が望ましくない場合があります。特に、文字列がコードとして解釈されることを意図していなかった場合です。このオプションを使用すると、デフォルトの動作 (auto) とこの機能を完全に無効にする (off) を切り替えることができます。

有効なオプション

"auto" – Prettierが自動的に識別できる場合に埋め込みコードをフォーマットします。
"off" - 埋め込みコードを自動的にフォーマットしません。

デフォルト	CLI による上書き	API による上書き
`"auto"`	`--embedded-language-formatting=<off\|auto>`	`embeddedLanguageFormatting: "<off\|auto>"`

属性を1行に1つ

v2.6.0 で最初に利用可能

HTML、Vue、およびJSXで属性を1行に1つ強制します。

有効なオプション

false - 属性を1行に1つ強制しません。
true - 属性を1行に1つ強制します。

デフォルト	CLI による上書き	API による上書き
`false`	`--single-attribute-per-line`	`singleAttributePerLine: <bool>`