Question 1

Prettier Config Generatorとは何ですか？

Accepted Answer

すべてのPrettierオプションを視覚的に設定し、生成された.prettierrcファイルを即座にコピーできる無料のインタラクティブWebツールです。

Question 2

Prettierとは何ですか？なぜ使うべきですか？

Accepted Answer

Prettierはコードベース全体で一貫したスタイルを強制するコードフォーマッターで、コードレビューでのスタイル議論をなくします。

Question 3

.prettierrcファイルとは何ですか？

Accepted Answer

プロジェクトのルートに配置される設定ファイルで、Prettierにコードのフォーマット方法を指示します。

Question 4

このツールを使って設定を生成するには？

Accepted Answer

メインページでPrettierオプションを選択すると、設定がリアルタイムで更新されます。"設定をコピー"をクリックしてJSONを.prettierrcファイルに貼り付けてください。

Question 5

Prettier Config Generatorは無料ですか？

Accepted Answer

はい、完全無料です。登録不要、アカウント不要、使用制限なしです。

Question 6

このツールはすべてのPrettierオプションをカバーしていますか？

Accepted Answer

はい、公式にサポートされているすべてのPrettierオプションが説明とデフォルト値とともに含まれています。

Question 7

生成した設定をコピーして使用するには？

Accepted Answer

デスクトップではサイドバーの"設定をコピー"ボタンをクリック、モバイルではフローティングボタンをタップしてください。

Question 8

.prettierrc、prettier.config.js、package.jsonのprettierキーの違いは？

Accepted Answer

3つともPrettierを設定する有効な方法です。.prettierrcはJSON/YAMLをサポート、prettier.config.jsはJavaScriptモジュール、package.jsonのprettierキーはすべてを1ファイルにまとめます。

Question 9

PrettierはTypeScript、React、Vueで使えますか？

Accepted Answer

はい、TypeScript、JSX/TSX、Vue単一ファイルコンポーネントなど多くの形式を内蔵サポートしています。

Question 10

PrettierをVS Codeと統合するには？

Accepted Answer

VS Codeマーケットプレイスから"Prettier - Code formatter"拡張機能をインストールし、formatOnSave: trueを設定してください。

Question 11

プロジェクト全体でPrettierを実行するには？

Accepted Answer

プロジェクトルートでnpx prettier --write .を実行してください。

Question 12

Prettierはどの言語とファイル形式をサポートしていますか？

Accepted Answer

JavaScript、TypeScript、JSX、CSS、HTML、Vue、JSON、YAML、Markdownなど。

Question 13

Prettierのフォーマット対象からファイルを除外するには？

Accepted Answer

プロジェクトルートに.prettierignoreファイルを作成してください。

Question 14

PrettierとESLintを一緒に使えますか？

Accepted Answer

はい、eslint-config-prettierをインストールしてください。

Question 15

printWidthオプションは何をしますか？

Accepted Answer

コードが収まるべき行の長さを設定します。デフォルトは80です。

Question 16

singleQuoteとjsxSingleQuoteの違いは？

Accepted Answer

singleQuoteはJS/TS文字列の引用符を制御し、jsxSingleQuoteはJSX属性を制御します。

Question 17

このサイトの検索機能はどう使いますか？

Accepted Answer

ページ上部の検索バーを使ってPrettierオプションをフィルタリングしてください。

Question 18

このサイトはダークモードに対応していますか？

Accepted Answer

はい、ヘッダーのテーマ切替ボタンでライト/ダーク/システムを切り替えられます。

Question 19

Prettierのデフォルト設定は何ですか？

Accepted Answer

printWidth: 80、tabWidth: 2、semi: true、singleQuote: false、trailingComma: "all"など。

Question 20

バグを報告したりプロジェクトに貢献するには？

Accepted Answer

GitHubリポジトリでissueまたはpull requestを開いてください。

Question 21

このツールはどのPrettierバージョンをサポートしていますか？

Accepted Answer

バージョンドロップダウンから任意のPrettier 3.xリリース（3.0〜3.6および「latest」）を選択できます。選択したバージョンのバンドルはjsDelivrからオンデマンドで読み込まれるため、オプション一覧はそのリリースの実際のスキーマと常に一致します。

Question 22

「あなたのコード」タブではどの言語をフォーマットできますか？

Accepted Answer

TypeScript、JavaScript、Flow、CSS、SCSS、Less、HTML、Vue、Angularテンプレート、JSON、JSON5、コメント付きJSON、Markdown、MDX、YAML、GraphQL。パーサーは入力から自動検出されますが、ドロップダウンで上書きできます。

Question 23

共有URLはどのように機能しますか？

Accepted Answer

共有ボタンをクリックすると、現在のPrettierバージョン、選択したオプション、コード、パーサーの上書きがLZ圧縮されてURLハッシュに入り、クリップボードにコピーされます。そのリンクを開くと、まったく同じ設定が復元されます。サーバーには何も送信されず、すべてブラウザ内で完結します。

Question 24

diffの横のトークン数は何を意味しますか？

Accepted Answer

選択したモデルにおいて、入力と出力が消費するAIトークン数を示します。GPT-4o / GPT-4 / GPT-3.5は公式のBPE tokenizerを使用して正確にカウントします。Claude、Gemini、Llama、Mistralは文字ベースの概算で、先頭に「~」が付きます。

Question 25

ページを更新しても作業内容は残りますか？

Accepted Answer

はい。Prettierバージョン、オプション選択、分割ビュー／tokenizerの設定はlocalStorageに保存されるため、再読み込みするとすべてが復元されます。ページを開いたときに共有URLハッシュがある場合は、そちらが優先されます。

Question 26

フォーマットエラーバーが時々表示されるのはなぜですか？

Accepted Answer

Prettierのパーサーが入力を解析できないとき——通常は選択したパーサーがコードと一致しない場合（例：CSSを選んだのにJSXを貼り付けた）——エラーメッセージがdiffの上に赤いバーで表示されます。コードに合わせてパーサーを切り替えるとエラーは消えます。

Question 27

JavaScript 以外の言語に対しても設定をプレビューできますか？

Accepted Answer

はい。Preview tab には diff 切り替えの隣に独自の parser dropdown があり、各 parser には専用設計のサンプルが付属しています — CSS、SCSS、Less、HTML、Vue、Angular、JSON / JSON5 / JSONC、Markdown、MDX、YAML、GraphQL、さらに TypeScript / JS。parser を切り替えると、対応するサンプルが現在のオプションで再フォーマットされるため、proseWrap、htmlWhitespaceSensitivity、vueIndentScriptAndStyle のような言語固有のオプションも効果を示せます。あなたの選択はリロード後も保持されます。

よくある質問