01
構文を先に選ぶ
型注釈があればTS、型付きのJSXならTSXを選びます。山括弧は構文によって解釈が変わります。
- 例ボタンは選択中の構文に合う断片を読み込みます。
HTML / CSS Dev Tools
JavaScript整形
構文モードを選び、元のコードと整形結果を並べて確認します。
JavaScript整形
元のコード
コードはこのブラウザー内で処理し、送信しません。
整形結果
コードを入力するか例を読み込んでください。
記事やIssueからコピーした断片の字下げが崩れていると、差分の確認に時間がかかります。JavaScript整形なら元のコードを左に残し、JSからTSXまで右側で読み直せます。
このJavaScript整形は構文を解析してから出力します。テンプレート文字列、JSX、型注釈を空白の置換だけで処理せず、解析できない箇所は行と列で示します。 JSフォーマッターやJS Beautifierを探している場合にも使えます。
JavaScript整形を使う理由
構文を明示してから出力するため、意図しない変換を見つけやすくなります。
元の断片を残して比較
インデント、引用符、セミコロン、行幅、末尾カンマを変えても入力は残ります。JavaScript整形は古い結果を無効にし、再計算後だけコピーできます。
結果を取り違えないための三つの確認
02
表示する書式を決める
入力が止まって350ミリ秒後に自動整形します。設定変更後も再計算し、自動を切ると手動ボタンが現れます。
- 手動モードではCtrl/Cmd+Enterでも実行できます。
03
状態を見てから出力する
入力や設定を変えるとコピーとダウンロードが無効になります。解析に失敗した場合は最初の行と列を確認してください。
- 構文チェックはTypeScriptの型検査ではありません。
構文解析と書式設定の内容
四つの構文モード
JavaScript、JSX、TypeScript、TSXを対応するPrettierパーサーで整形します。 TypeScript整形では型注釈を保持します。
書式を個別に調整
空白二つか四つ、Tab、引用符、セミコロン、行幅、末尾カンマを変更できます。入力の上書きはしません。
検査とJS圧縮
構文チェックは別の操作です。純粋なJSだけTerserで圧縮し、結果を.min.jsとして保存できます。 JavaScript圧縮はJSモードだけです。
解析できる範囲と制限
- 型の正しさは判定しない
- 構文解析が成功しても型エラーがないとは限りません。プロジェクトのtsconfig.jsonや依存関係は読み込みません。
- 圧縮は純粋なJSのみ
- JSX、TS、TSXは先に手元のビルド環境でJSへ変換してください。これらのモードでは圧縮ボタンを無効にします。
- 不完全なコードを推測しない
- 括弧や文字列が閉じていなければ行と列を表示します。JavaScript整形は欠けたコードを補わず、実行もしません。
- 設定ファイルは読まない
- 画面にある設定のみ使用します。リポジトリの.prettierrc、プラグイン、ESLint規則は反映されません。
JavaScript整形のよくある質問
TypeScriptやJSXも処理できますか？
本ページは表示されたPrettier設定でコードを整えます。ESLintの規則検査や修正、プロジェクト全体の型検査は行いません。
データはサーバーに送信されますか？
はい。型注釈だけならTS、JSXを含む型付きコードならTSXを選びます。構文を保ったまま整形し、JSへの変換は行いません。
PrettierやESLintとの違いは何ですか？
いいえ。処理は現在のブラウザー内で行い、入力コードをこのツールからサーバーへ送りません。
コードはどこかにアップロードされますか？
まずモードを選び、断片を入力してください。JavaScript整形は選択した構文で解析し、エラーがあれば行と列を示します。
Prettierの代わりに使ってもいいですか？
完全な代替ではありません。.prettierrcやプラグインは自動取得しないため、チームの設定と合わせたい場合はプロジェクト側のPrettierを使ってください。
解決しませんでしたか？