TypeScript Formatter

概要

• 1行に詰め込まれたTypeScriptを、Prettierを使って読みやすい形式に整形するツールです。

• インターフェース・型エイリアス・ジェネリクスなど、TypeScript特有の型注釈を含むコードにも対応しています。

• JavaScript Formatterと同じPrettierエンジンを使用しており、パーサーのみTypeScript用に切り替えて処理します。

使い方

1. 1

   テキストエリアに整形したいTypeScriptを入力します。

2. 2

   「整形する」ボタンをクリックします。

3. 3

   Prettierのルールで整形された結果が下部に表示されます。「コピー」ボタンで結果をクリップボードにコピーできます。

入力例・出力例

interface Foo{a:string;b:number}

interface Foo {
  a: string;
  b: number;
}

利用シーン

• ミニファイされたTypeScriptコードを、デバッグのために読みやすく整形する

• 型定義ファイル（.d.ts）や他所からコピーしたコードのインデントを、プロジェクトのスタイルに合わせて統一する

• コードレビューに掲載する型定義やロジックのスニペットを、一貫したスタイルに整える

よくある質問

注意点

• 構文として不正なTypeScriptを入力すると整形に失敗します。

• 型チェック（型エラーの検出）は行いません。あくまで構文の整形のみを行うツールです。

• 非常に大きなコードを入力すると、ブラウザの処理が重くなる場合があります。