コード整形

JavaScript、TypeScript、JSON、HTML、CSS等のコード整形（リアルタイム）

言語:
タブ幅:
行幅:
末尾カンマ:

入力

出力

💡 Tip: Prettierを使用してリアルタイムにコードを整形します（500ms遅延）。構文エラーがある場合は整形できません。

使い方

基本操作

  • 言語を選択します（JavaScript、TypeScript、JSON、HTML、CSSなど）
  • CodeMirrorエディタに整形したいコードを入力またはペーストします
  • ファイル読み込み: コードファイルをアップロードまたはドラッグ&ドロップして直接読み込み
  • 入力すると自動的に整形されます（500ms後）
  • シンタックスハイライトとコード補完が利用できます

整形オプション

  • インデント: タブ幅（1-8スペース）、タブを使用するかスペースか
  • 行幅: コードが自動的に折り返される文字数（40-120文字）
  • セミコロン: JavaScript/TypeScriptで文末にセミコロンを追加
  • シングルクォート: ダブルクォートの代わりにシングルクォートを使用
  • 末尾カンマ: オブジェクトや配列の末尾にカンマを追加

対応言語

  • JavaScript / TypeScript - 最新の構文に対応
  • JSON - JSONCではなく標準JSON形式
  • HTML - HTMLテンプレートの整形
  • CSS / SCSS - スタイルシートの整形
  • Markdown - ドキュメントの整形
  • YAML - 設定ファイルの整形

CodeMirror機能

  • シンタックスハイライト - コードを色分けして読みやすく表示
  • コード補完 - Ctrl+Spaceで候補を表示
  • 括弧の自動補完 - 括弧を入力すると自動で閉じ括弧が挿入
  • ダークモード対応 - システムテーマに自動追従
  • 軽量 - Monaco Editorより約1/6のサイズ

ファイル操作

  • ダウンロード: 入力・出力それぞれをファイルとして保存できます
  • 入力と交換: 整形結果を入力に戻して再整形できます
  • ファイル名は選択した言語の拡張子が自動的に付きます

エラー処理

  • 構文エラーがある場合は整形できず、エラーメッセージが表示されます
  • エラー箇所を修正すると自動的に再整形されます

サンプル

JavaScript整形（圧縮コード → 整形）

入力:

function hello(name){console.log("Hello, "+name+"!");return true;}

出力 (2スペース、セミコロンあり):

function hello(name) {
  console.log("Hello, " + name + "!");
  return true;
}

TypeScriptのオプション比較

入力:

const user={name:"田中",age:30};

ダブルクォート + セミコロンあり:

const user = { name: "田中", age: 30 };

シングルクォート + セミコロンなし:

const user = { name: '田中', age: 30 }

JSON整形

入力 (圧縮):

{"users":[{"id":1,"name":"Alice"},{"id":2,"name":"Bob"}]}

出力 (2スペースインデント):

{
  "users": [
    {
      "id": 1,
      "name": "Alice"
    },
    {
      "id": 2,
      "name": "Bob"
    }
  ]
}

HTML整形

入力 (1行):

<div><h1>タイトル</h1><p>本文です。</p></div>

出力:

<div>
  <h1>タイトル</h1>
  <p>本文です。</p>
</div>

CSS整形

入力:

.button{background:blue;color:white;padding:10px 20px;}

出力:

.button {
  background: blue;
  color: white;
  padding: 10px 20px;
}