マイツール

コード整形

コードを貼り付けると自動で整います。言語は自動判定し、押すボタンはありません。

使い方

  1. コードを入力欄に貼り付けてください。入力するそばから整形され、押すボタンはありません。
  2. 言語はコードから判定されます。判定が違う場合は一覧から選んでください。スペース 2 つか 4 つ、80・100・120 列の幅を選ぶとすぐに組み直されます。
  3. 結果をコピーするか、適切な拡張子（.js、.ts、.json、.py など）でダウンロードします。

例

入力

function greet(user){if(!user){return "こんにちは、ゲストさん";}const tags=["new","active"];return `こんにちは、${user.name}さん！`;}
export default greet;

整形後

function greet(user) {
  if (!user) {
    return "こんにちは、ゲストさん";
  }
  const tags = ["new", "active"];
  return `こんにちは、${user.name}さん！`;
}
export default greet;

既定のルール（スペース 2 つ、80 列）で整形した例です。Prettier はセミコロンと二重引用符を補いますが、テンプレートリテラルとゲスト向けの文言は変わりません。

ルール・制限・既知の問題

  • 整形は空白と、整形エンジン自身の正規化（引用符、セミコロン、末尾のカンマ）を変えます。コードを実行したり、キーを並べ替えたり、識別子を改名したりはしません。文字列の中身は保たれます。
  • エンジン: JavaScript、TypeScript、JSON、CSS、SCSS、Less、HTML、Vue、GraphQL は Prettier、Python は Ruff（Black 互換）を使います。現在の言語のエンジンだけを初回利用時にダウンロードし、ブラウザがキャッシュします。
  • 自動判定はヒューリスティックです。タグで始まる断片は JSX でも HTML と判定されることがあるため、その場合は JavaScript か TypeScript を手動で選んでください。JSON に見えるが有効な JSON でないオブジェクトは JavaScript として扱います。
  • 手動で選んだ言語が優先されます。CSS を選んだのに勝手に SCSS として整形されることはありません。TypeScript は .ts を試し、次に .tsx を試します。
  • JSON は Prettier の json パーサーを使うため、短いオブジェクトは 1 行のままになることがあります。厳密な検証、キーの順序、圧縮が必要な場合は JSON ツールボックスを使ってください。重複キーは JSON.parse と同様に最後の値が残ります。
  • Prettier の既定スタイルは固定です（二重引用符、セミコロン、有効な箇所の末尾カンマ）。.prettierrc や .editorconfig は読み込まず、引用符やセミコロンのオプションもありません。Python は二重引用符を使い、マジック末尾カンマを尊重します（Ruff / Black）。
  • HTML の空白は htmlWhitespaceSensitivity: css に従うため、インライン要素の前後の空白が元と異なることがあります。Markdown、YAML、XML には対応していません。それぞれ Markdown エディター、設定ファイル変換、XML 整形を使ってください。
  • 出力の改行は LF で末尾に改行は付かず、整形は何度行っても同じ結果になります。20 万文字を超えると、入力が止まって約 0.6 秒後に結果が更新されます。整形は Web Worker で実行され、テキストがアップロードされたり、URL に入ったり、保存されたりすることはありません。

コードが読みやすくなったあとによく使われるツールです。

JSON ツールボックス

SQL 整形

XML 整形