言語を選び、Prettier でソースを整形します。結果を比較・コピーでき、コードは実行されません。
ブラウザ内でローカルに実行拡張エディターはこのページのみで読み込まれます。起動できない場合は、同じローカルフォーマッターがフォールバック欄で引き続き利用できます。
整形は空白とレイアウトを変更します。広範囲のコード変換を適用する前には、必ずプロジェクトのコピーを保管してください。
このワークスペースは JavaScript、TypeScript、JSON、CSS、HTML、Markdown、YAML、GraphQL の 8 言語を、ページ内で動く Prettier 3.9.6 で整形します。言語を選び、左の欄にコードを入れて「コードを整形」を押すと、右の欄に結果が出ます。
拡張エディターは Monaco 0.56.0 で、ページ本体のあとにこのサイトから読み込まれます。プレーンテキストの欄はすぐ使え、エディターが起動しない場合もそのまま使えます。両方あわせて約 1.8 MB のファイルを kivtools.com から配信し、貼り付けた内容はどこにも送信されません。
JavaScript と TypeScript は Babel と TypeScript のパーサーを通るため、JSX や型の構文もそのまま扱え、<T,> のようなジェネリクスも機能します。JSON、CSS、HTML、Markdown、YAML、GraphQL にはそれぞれ専用のパーサーがあり、たとえば閉じ忘れた HTML タグは補完され、圧縮された CSS は 1 行 1 宣言で出力されます。どの言語にも「サンプルを読み込む」のサンプルがあります。
オプション画面はないため、Prettier の既定値がそのまま使われます。インデントは 2 スペース、JavaScript と TypeScript では二重引用符とセミコロン、複数行の構文では末尾カンマ、印刷幅は 80 桁です。このページが変えるのは空白とレイアウトだけです。コードの実行、依存関係のインストール、プロジェクトの .prettierrc の読み込みは行わないため、独自オプションを設定したプロジェクトのスクリプトで整形した結果とは異なることがあります。
JSON 欄は Prettier の JSON パーサーであり、RFC 8259 の厳密な検証器ではありません。このページで実測したところ、単一引用符の文字列、引用符なしのキー、末尾カンマ、// コメント、16 進数、Infinity を含む文書もエラーにならず整形されました。単一引用符、引用符なしのキー、末尾カンマは出力で書き換えられますが、コメント、0x10、Infinity はそのまま残ります。
つまり、ここではきれいに整形できても、ほかの場所では拒否される文書があります。{"a":1} // note はコメント付きのまま、{"a":Infinity} は Infinity のまま返ります。API、設定ファイル、他の言語へ渡す前には、コメントや末尾カンマを拒否する「JSON整形ツール」ページで確認してください。
Prettier もエディターもこのサイトから配信され、整形はブラウザー内で行われます。ソースも結果もどこにも送信されず、ネットワークが切れても動作します。エディターが起動しない場合も、同じフォーマッターがプレーンテキストの欄で使えます。
処理はタブ内で行われるため、大きなファイルは端末のメモリに制限されます。ここでは 112 KB の JavaScript ファイルが約 0.2 秒で整形できましたが、数 MB のファイルはタブを固まらせることがあります。出力で置き換える前にファイルをバージョン管理下に置いてください。フォーマッターは書かれたとおりではなく、Prettier が出力する形に構文を書き換えます。