JS / TS フォーマッター
JavaScript、TypeScript、JSX/TSX を Prettier のオプションで整形・圧縮します。
コードは Prettier と Terser を使ってブラウザ内のローカルで整形され、サーバーにアップロードされることはありません。
スタイルも整形したいですか? CSS Formatter を試してください。
JS / TS フォーマッター について
この js フォーマッターは、JavaScript・TypeScript・JSX/TSX をブラウザ内で直接整形または圧縮します。JavaScript 整形ツールとしては、充実したオプションパネルとともに Prettier を実行し、圧縮には Terser を使って本番向けにコードを縮小します。Auto パーサーで構文を自動検出するか、特定の TypeScript フォーマッターが必要なときは JS/JSX または TS/TSX を強制できます。セミコロン、クォートスタイル、タブ幅、印字幅、末尾カンマをプロジェクトのスタイルに合わせて調整できます。乱雑なスニペットを整える開発者、バンドル出力を確認する QA エンジニア、手軽な prettier オンラインの代替を求める人向けに作られています。すべてはブラウザ内のローカルで処理されるため、ソースコードが端末から外に出ることも、サーバーにアップロードされることもありません。
機能
- Prettier で JavaScript・TypeScript・JSX/TSX を整形
- Terser で圧縮し、本番向けにコードを縮小
- Auto パーサー検出に加え、明示的な JS/JSX・TS/TSX モード
- セミコロン、シングル/ダブルクォート、タブ/スペースを切り替え
- 設定可能なタブ幅（2 または 4）と印字幅（80・100・120）
- 末尾カンマを none・es5・all から選択
- オプションを変えるたびに即座に整形
- すべてブラウザ内で動作
JS / TS フォーマッター の使い方
- 入力欄に JavaScript または TypeScript を貼り付けます。
- 整形には Beautify、圧縮には Minify を選びます。
- パーサーを選びます: Auto・JS / JSX・TS / TSX。
- タブ幅・クォート・セミコロン・末尾カンマなどのオプションを調整します。
- 結果パネルから整形済み出力をコピーします。
例
入力
const greet=(name)=>{return 'hi '+name}
出力
const greet = (name) => {
return 'hi ' + name;
};
デフォルトの Prettier オプション（2 スペースインデント、セミコロンあり）で整形。
よくあるエラーとトラブルシューティング
- 貼り付け後に出力が空、または構文エラーが表示される。 — スニペットが有効な JavaScript または TypeScript であることを確認してください。型注釈には TS / TSX、React 構文には JS / JSX にパーサーを切り替えます。
- Auto モードが TypeScript 固有の構文を誤って解析する。 — Auto はまず TypeScript パーサーを試し、Babel にフォールバックします。高度な型機能を使うファイルでは TS / TSX を明示的に強制してください。
- 圧縮された出力が読めない。 — それは仕様です。Terser は本番向けに空白を除去してコードを短縮します。読みやすい結果が欲しい場合は Beautify を使ってください。
- クォートやセミコロンが意図したものと違う。 — コピー前に Single quotes と Semicolons オプションを切り替えてください。変更するたびに Prettier が即座に再整形します。
よくある質問
- JS フォーマッターとは何で、何ができますか?
- JavaScript・TypeScript・JSX/TSX を整形または圧縮するブラウザベースのツールです。整形では充実したスタイルオプションとともに Prettier を実行し、圧縮では Terser を実行して本番向けにコードを縮小します。
- JS フォーマッターで TypeScript や JSX を整形するには?
- パーサーを JS / JSX・TS / TSX・Auto から選びます。Auto はまず TypeScript パーサーを試し、Babel にフォールバックするので、プレーンな JavaScript・JSX・TypeScript がすべて正しく整形されます。
- JS フォーマッターは Prettier と Terser を使いますか?
- はい。整形には Prettier、圧縮には Terser を使うため、出力は実際のビルドパイプラインで使うのと同じツールに一致します。
- JS フォーマッターで制御できるスタイルオプションは?
- シングル/ダブルクォートとセミコロンの切り替え、タブとスペースの切り替え、タブ幅 2 または 4 の設定、印字幅 80・100・120 の選択、末尾カンマ none・es5・all の選択ができます。
- JS フォーマッターは私のコードをどこかに送信しますか?
- いいえ。Prettier と Terser はどちらもすべてブラウザ内で動作するため、コードが端末から外に出ることも、サーバーにアップロードされることもありません。
関連ツール
すべての ArrayKit ツール