よくある質問

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

はい。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 のような言語固有のオプションも効果を示せます。あなたの選択はリロード後も保持されます。