開発者ツール

JavaScript ビューティファイアー

ブラウザで乱雑な JavaScript を Prettier でフォーマットします。パーサー、幅、インデント、引用符、セミコロン、末尾のカンマ、および埋め込みコードの処理を選択します。

JavaScript フォーマッタ

ファイルの入力、貼り付け、ロード、またはオプションの変更を行うと、出力は Prettier で自動的に更新されます。フォーマットはこのブラウザで実行されます。

Prettier オプション
現在の形式

-

出力バイト
入力バイト
0
バイトが追加されました
0
入力行
0
出力行
0

有効な JavaScript を貼り付けて、自動フォーマットされた出力を表示します。

このデバイスに保存されました

最近の美化結果はこのブラウザにのみ残ります。

No data
保存された美化結果はまだありません。

JavaScript を安全に美化する方法

このフォーマッタの機能

Prettier のフォーマット

このツールはブラウザーで Prettier を使用するため、貼り付けられたスニペットは多くのプロジェクトで使用されているのと同じ書式設定ルールに一致します。

実際の Prettier オプション

Prettier 自体のパーサー、印刷幅、タブ、セミコロン、引用符、末尾のカンマ、括弧オプションを使用します。

ブラウザローカルプラグイン

JavaScript、TypeScript、HTML、CSS、GraphQL、Markdown、および YAML パーサー プラグインは、ブラウザーのフォーマット用にローカルにバンドルされています。

よくある間違い

間違ったパーサーの選択

JavaScript パーサーで TypeScript または TSX が失敗した場合は、パーサーを TypeScript / TSX に切り替えます。

カスタム ブレース スタイルを期待しています

Prettier は独自の意見を持っています。中括弧または空白文字のスタイルの選択肢をすべて公開するわけではありません。

型チェッカーとして使用する

Prettier はコードを解析して出力します。コードの型チェックやプロジェクトのビルドの置き換えは行いません。

ヒント

最初に貼り付けてください

コードを貼り付けるか、オプションを変更すると、出力は現在の Prettier 設定で自動的に更新されます。

プロジェクトに合わせてください

プロジェクトで使用しているのと同じ印刷幅、タブ、セミコロン、引用符、および末尾のカンマの選択肢を使用します。

便利なスニペットを保存する

オプションを比較する場合、または後でこのブラウザーで同じスニペットを再利用する場合は、結果を保存します。