TypeScript コード フォーマッタ

TypeScriptは、型注釈、インターフェース、ジェネリクス、列挙型、その他の型システム機能でJavaScriptを拡張します。TypeScriptフォーマッターは、すべての標準JavaScriptフォーマットに加えて、型注釈のコロン（const x: string）、ジェネリクスの山括弧（Array）、インターフェースと型エイリアスの宣言、列挙型のフォーマットのような型固有の構文を処理する必要があります。標準のJavaScriptフォーマッターは、これらのTypeScript固有の構造を破損または無視する可能性があります。

どちらのアプローチも有効であり、広く使用されています。TypeScript（JavaScriptと同様）には自動セミコロン挿入（ASI）があり、解析時にセミコロンを追加するため、ほとんどの場合省略しても機能します。セミコロンを省略するチームは、コードがきれいになり、キーストロークが少なくなると主張します。セミコロンを含めるチームは、明示性とまれなASIのエッジケースを回避できると主張します。重要なのは一貫性です。1つのスタイルを選択し、プロジェクト全体でそれを強制してください。ほとんどの主要なスタイルガイド（Airbnb、Google）にはセミコロンが含まれていますが、StandardJSは省略しています。

一貫したインポート順序は、コードの可読性を向上させ、マージコンフリクトを減らします。インポートがアルファベット順にソートされ、論理的にグループ化されている（サードパーティパッケージが最初、次に内部モジュール）場合、開発者は特定のインポートをすばやく見つけ、重複を回避できます。順序付けられていないインポートは、不要なgit diffも引き起こします。2人の開発者が異なる位置にインポートを追加すると、実際のコード変更が同一であってもマージコンフリクトが発生します。

末尾カンマは、配列、オブジェクト、関数パラメータ、型パラメータの最後の要素の後に追加されるカンマです。末尾カンマを使用すると、新しいアイテムを追加する際に、変更が1行だけでなく2行（新しい行と前の最後の行へのカンマの追加）になるため、git diffがきれいになります。また、アイテムの並べ替えも容易になります。ES5は配列とオブジェクトで末尾カンマを許可し、ES2017とTypeScriptは関数パラメータでも許可します。

最も一般的な選択肢は80、100、120文字です。80文字は、ターミナルの幅の制限に由来する従来の標準であり、Prettierのデフォルトのままです。100文字は、TypeScriptの冗長な型注釈を過度の折り返しなしで収容できる、人気のある現代的な妥協点です。120文字は、ワイドモニターではうまく機能しますが、小さい画面やサイドバイサイドのdiffビューでは可読性が低下する可能性があります。チームの典型的な画面設定とコードレビューワークフローに基づいて選択してください。