TypeScriptフォーマッター
JavaScriptフォーマッターのプリセット
型注釈、ジェネリクス、デコレータ、インターフェースを完全にサポートしてTypeScriptを整形します。JavaScriptではなくTypeScriptのパーサーを使うため、型構文はエラーとして扱われるのではなく理解されます。
- ファイルは端末の外に出ません
- 無料、登録不要
- 透かしなし
- 一度読み込めばオフラインでも動作します
JavaScriptフォーマッターの使い方
- 1
コードを貼り付け
JavaScript、TypeScript、またはJSX。
- 2
スタイルを設定
インデント、セミコロン、引用符の好みです。
- 3
結果をコピー
エディタでPrettierが行うのとまったく同じように整形されます。
TypeScriptがJavaScriptのパーサーを再利用するのではなく独自のパーサーを必要とする理由
TypeScriptはJavaScriptのスーパーセットですが、それが追加する型レベルの構文 — インターフェース、`extends`で制約されたジェネリクス、デコレータ、`as`型アサーション、そして独立した型のみの宣言 — は、プレーンなJavaScriptの文法では何の意味も持たず、JavaScript専用のパーサーは完全に有効なTypeScriptを直接失敗させてしまいます。JavaScript用パーサーに自身の文法のスーパーセットを無理やり受け入れさせようとするのではなく、TypeScript専用のパーサーを使うことで、ジェネリクスとインターフェースだらけのファイルは、JavaScript自体にはない機能を使った瞬間に構文エラーとして拒否されるのではなく、正しく整形されます。
TypeScript内のJSX、特に
JSX構文とTypeScriptの型注釈を組み合わせた`.tsx`ファイルは、ある特定の点で解析が本当に曖昧です: `<Foo>value`のような山括弧の型アサーションは、どの方言を読んでいるか教えられていないパーサーにとって、JSX要素タグの開始と同一に見えます。TypeScript-with-JSXの解析モードを選ぶことで、この曖昧さを正しく解決します。そのため、汎用のJavaScriptパーサーがそれを解決してくれると想定するのではなく、事前に正しい方言を選ぶことが、この2つを混在させるコンポーネントファイルにとって特に重要です。
デコレータは今も進化中の構文の一部
デコレータ — Angularやいくつかのバックエンドフレームワーク（TypeScript上に構築）でよく見られる`@Component`スタイルの注釈 — は、言語の標準化プロセスにおいていくつかの異なる提案段階を経ており、異なるコードベースは、いつ書かれたか、どのコンパイラオプションを使っているかによって、わずかに異なるバージョンのその構文をターゲットにすることがあります。デコレータ構文を正しく解析するには、具体的にTypeScript対応のパーサーが必要です。プレーンなJavaScriptのパーサーがクラスやメソッドの前に`@`を見つけると、頼るべき定義された意味を持たず、直接ファイルを拒否します。
よくある質問
これはローカルでPrettierを実行するのと同じですか？
はい — これはPrettier自体であり、Nodeではなくブラウザ内で実行されています。同じオプションで、同じファイルに対して`npx prettier`とバイト単位で同一の出力が得られます。
なぜもっとシンプルなフォーマッターを使わないのですか？
ナイーブなフォーマッターは本物のコードを壊してしまうためです。テンプレートリテラルや正規表現内の波括弧、JSX、そして自動セミコロン挿入はすべて、言語を実際に解析することを要求します。50ファイルに1つの割合でファイルを黙って破損させるフォーマッターは、ないよりも悪いものです。
TypeScriptとJSXで動作しますか？
はい。型注釈、ジェネリクス、デコレータ、JSXすべて解析されます。整形するだけで、型チェックやコンパイルは行わないことに注意してください。
なぜ整形が失敗したのですか？
コードに構文エラーがあります — Prettierは印刷する前に解析しなければなりません。メッセージには最初の問題の行と列が含まれており、通常それを見つけるのに十分です。
コードはサーバーに送信されますか？
いいえ。Prettierはブラウザにダウンロードされてそこで実行されます。独自のコードがあなたの端末から出ることは決してありません — これはほとんどのオンラインフォーマッターには当てはまらないことです。