Prettier設定ジェネレーター

ステップ 1 / 2

printWidth

tabWidth

trailingComma

arrowParens

endOfLine

singleQuote

semi useTabs bracketSpacing jsxSingleQuote

整形

Prettierでよく使う10項目の値を選び、生成された設定をコピーできます。出力形式はJSON、YAML、CommonJS形式のJavaScriptです。プロジェクトの検査、Prettierによる設定の検証、プラグインやオーバーライドの追加は行いません。

設定ファイルの生成手順

1

レイアウトを設定

行の長さ、タブ幅、タブかスペースか、セミコロン、引用符の形式を選びます。
2

構文の詳細を設定

末尾のカンマ、波括弧内の空白、アロー関数の括弧、改行コード、JSXの引用符を選びます。
3

ファイル形式を選択

.prettierrc.json、.prettierrc.yaml、またはmodule.exportsを使うCommonJS形式の.prettierrc.jsを生成します。
4

コピーして確認

出力をプロジェクトに保存し、インストール済みのPrettierでnpx prettier --check .を実行します。

項目	選択できる値
`printWidth`	40–200
`tabWidth`	1–8
`useTabs`, `semi`, `bracketSpacing`, `jsxSingleQuote`	`true`または`false`
`singleQuote`	`true`または`false`
`trailingComma`	`none`、`es5`、`all`
`arrowParens`	`always`または`avoid`
`endOfLine`	`lf`、`crlf`、`cr`、`auto`

数値欄は上記の範囲内に制限されます。その他の欄では、記載された値だけを選択できます。日常的によく使う設定を対象としており、Prettierが対応する全項目を網羅しているわけではありません。

JSONは.prettierrc.jsonに使えるJSONオブジェクトを生成します。
YAMLは.prettierrc.yamlに使えるキーと値の行を生成します。
JavaScriptは同じオブジェクトをmodule.exports = { ... };で囲み、CommonJS形式の.prettierrc.jsとして出力します。

Prettierはほかの設定ファイル名やモジュール形式にも対応しています。このジェネレーターが作るのは上記3形式だけです。Prettier自体は実行しないため、コピーしたファイルをプロジェクトにインストール済みのバージョンで確認してください。

各設定欄はサーバー側のフィールドであるため、ページの更新時に値がサーバーへ送信されます。2段階表示ではページのURLにも値が含まれる場合があります。通常、Prettierの設定に機密情報は含まれませんが、この欄や共有URLに秘密のデータを入力しないでください。

いいえ。フォームに表示される10項目だけを生成します。ほかの対応項目は、インストール済みバージョンのドキュメントを確認して手動で追加してください。

いいえ。設定テキストを作るだけで、Prettierは実行しません。ファイルを保存し、プロジェクトでnpx prettier --check .を実行してください。

いいえ。出力は階層のない1つのオブジェクトです。必要な場合は、オーバーライドやプラグイン固有の項目を手動で追加してください。

このツールが生成するのはCommonJS形式だからです。ESモジュール形式の設定が必要なプロジェクトでは、エクスポート方法とファイル名を適切に変更してください。