コードスタイル | TypeScript

タブ文字を使用する

• このチェックボックスをオンにすると、タブ文字が使用されます：

  • Tab キー押下時

  • インデント用

  • コードを再フォーマットするため

• チェックボックスがオフの場合、WebStorm はタブではなくスペースを使用します。

スマートタブ

インデントは 2 つの部分で構成されます。 1 つの部分はコードブロックのネストに起因し、他の部分はアライメントによって決定されます。

• このチェックボックスが選択されている場合、ネストの結果生じる部分にはタブとスペースの両方が（必要に応じて）含まれますが、位置合わせによって定義される部分はスペースのみで構成されます。

• このチェックボックスをオフにすると、タブのみが使用されます。 これは、指定されたタブサイズに合うスペースのグループを再フォーマットした後、自動的にタブに置き換えられることを意味します。

タブサイズ

このフィールドで、タブに収まるスペースの数を指定します。

インデント

このフィールドでは、各インデントレベルに挿入されるスペースの数を指定します。

連続インデントの文字数

このフィールドでは、式、メソッド宣言、メソッド呼び出しで、配列の要素間に挿入するスペースの数を指定します。

空行でインデントを保持する

このチェックボックスが選択されている場合、WebStorm は空行のインデントを、あたかも何らかのコードが含まれているかのように保持します。 チェックボックスをオフにすると、WebStorm は空行のタブ文字とスペースを削除します。

チェーンメソッドをインデントする

関数の宣言では、チェーン内の二つ目以降のメソッドが別の行に表示されます。

• チェックボックスをオンにすると、チェーンの 2 番目以降のメソッドが 1 番目の呼び出しに揃えられます。

• チェックボックスをオフにすると、チェーンの 2 番目以降のメソッドは、呼び出されたオブジェクトと揃えられます。

グループ内のすべてのチェーン呼び出しをインデントする

このチェックボックスをオンにすると、最初に呼び出されたメソッドとそれ以降に呼び出されたメソッドがインデントされます。

このチェックボックスは、 チェーンメソッドをインデントする チェックボックスが選択されている場合にのみ使用できます。

次でハードラップ

このフィールドでは、要素の右側に必要なスペースの数を指定します。 デフォルト オプションを受け入れると、 グローバル設定の値が使用されます。

入力時に折り返す

このフィールドで、編集したテキストを指定の 次でハードラップ フィールドに収める方法を指定します。

• デフォルト: グローバル設定から 入力時に折り返す 値を使用するには、このオプションを選択します。

• はい: 右マージン フィールドの値を使用するには、このオプションを選択します。

• いいえ: このオプションを選択すると、行は右マージンで指定された値を超える可能性があります。

ビジュアルガイド

このフィールドには、複数の右マージンを指定します。 デフォルト値のままにするか、余白のスペース数を入力することができます。 複数のマージンを指定する場合は、コンマで区切って番号を入力します。

再フォーマット時に保持

チェックボックスを使用して、WebStorm がソースコードを再フォーマットするときに行う例外を設定します。 例: デフォルトでは、 改行 チェックボックスが選択されています。

コードに標準の規則よりも短い行が含まれている場合は、再フォーマットする前に 改行 チェックボックスを無効にすることで行を変換できます。

折り返しオプション

折り返しスタイルは、左側のペインで指定されたさまざまなコード構成体に適用されます（たとえば、メソッド呼び出し引数や代入ステートメントなど）。

• 折り返さない - このオプションが選択されている場合、特別なラッピングスタイルは適用されず、ネストされた位置合わせと波括弧の設定は無視されます。

• 長い場合は折り返す - このオプションを選択すると、右マージンを超える行が適切なインデントで折り返されます。

• 常に折り返す - このオプションを選択すると、リスト内のすべての要素が折り返され、1 行に 1 つの要素が正しくインデントされます。

• 長い場合は切り捨てる - 適切なインデントで 1 行に 1 つの要素が存在するように、右マージンを超えたリスト内の要素を折り返すには、このオプションを選択します。

アライメントオプション

• 複数行の場合は揃える - このチェックボックスをオンにすると、次の各行の同じ列でコード構成が開始されます。 それ以外の場合は、コード構造の位置は現在のインデントレベルによって決定されます。

• <character(s)> 次の行 に - 行が折り返されたときに、指定した文字を次の行に移動するには、このチェックボックスを選択します。

• 新しい行に 'else' を配置 - このチェックボックスを使用して、対応する文または文字を次の行に移動します。

• <character> の後に改行； - 指定した文字の後のコードを改行するには、このチェックボックスを選択します。

• 特殊な else if の扱い - このチェックボックスを選択すると、 else if ステートメントは同じ行に配置されます。

  それ以外の場合、 else if ステートメントは対応するインデントレベルの次の行に移動されます。

• ケースブランチをインデント - このチェックボックスを選択すると、 case ステートメントは対応するインデントレベルに配置されます。 それ以外の場合、 case ステートメントは switch と同じインデントレベルに配置されます。

• オブジェクト - リストからオブジェクトの整列方法を選択します：

  • 揃えない: 連続した行の属性は整列しません。

  • コロンの位置: 順次行の属性はコロンに揃えられます。

  • 値の位置: 連続した行の属性は値に対して整列されます。

• 変数宣言 - 等号のアライメントを設定するには、次のオプションのいずれかを選択します。

  • 揃えない: 等号は揃っていません。

  • 複数行の場合は揃える: 複数行の var ステートメントの等号は、追加のスペースを挿入することによって位置合わせされます。

  • グループ化したときに揃える: 複数の var ステートメントの等号は、追加のスペースを挿入することによって位置合わせされます。

• ES6 の import/export この 'from' 節を揃える： チェックボックスが選択されると、WebStorm は import および export ステートメントを ECMAScript 6 コード内で自動的に整列して、コードを読みやすく保守しやすくします。 プレビュー ペインで、コードフラグメントの配置と配置を比較します。

  

  このオプションがオンの場合、WebStorm は新しいコードをその場で整列します。 import および export の既存のステートメントは、 Ctrl+Alt+L を押して コードを再フォーマットすると整列されます。

波括弧配置オプション

空白行の指定

この領域では、再フォーマット後に保持する余白行数を指定します。

最小の空白行数

この領域では、 import ステートメントのブロックの後に、クラス、フィールド、メソッド、関数の周囲に余分な空行があるかどうかを構成します。 各オプションの横にあるフィールドで、残す余白の最小行数を指定します。

ステートメントの終了にセミコロン

• 使用 にステートメントを終了するためにセミコロンを 新しいコード内

• 使用 にステートメントを終了するためにセミコロンを 常に

• 使用しない にステートメントを終了するためにセミコロンを 新しいコード内

• 使用しない にステートメントを終了するためにセミコロンを 常に

引用符

• ダブル に 新しいコード内 引用符を使用する

• ダブル に 常に 引用符を使用する

• 単一 に 新しいコード内 引用符を使用する

• 単一 に 常に 引用符を使用する

末尾のコンマ

このリストを使用して、オブジェクト、配列、メソッド定義と呼び出しのパラメーターに 末尾のコンマを使用するかどうかを設定します。 利用可能なオプションは次のとおりです：

• 保持

• 削除

• 複数行の場合に追加

'public' 修飾子を使用する

このチェックボックスを使用して、 生成されたコードでパブリックアクセス修飾子を挿入または省略します。

例: 以下から public メソッドの生成中:

• チェックボックスを選択すると、生成されたコードに パブリックアクセス修飾子が自動的に挿入されます。

  class Test { public test():void { this.extracted(); } public extracted() { var x = 1; } }

• チェックボックスがオフの場合、コード生成時に パブリックアクセス修飾子は省略されます。

  class Test { public test():void { this.extracted(); } extracted() { var x = 1; } }

TypeScript 言語ハンドブック(英語) 、Private/Public Modifiers の章を参照してください。

命名規約

このエリアでは：

• 生成されたフィールドとプロパティの名前に自動的に追加される既定の接頭辞を設定または受け入れます。

• 生成されたファイルの名前のスタイルを選択してください。 例：WebStorm がクラスを新しい自動生成ファイルに移動することを提案するとき、このファイルの提案名は選択したスタイルに従いクラス名から生成されます。 クラスの名前を保持し、準拠するファイルを含むからさらに詳しく

コードのコメント化

この領域では、生成されたコメントのコードスタイルを設定します。

• JSDoc に型を含める: このチェックボックスを選択すると、 @param、 @return 、その他のタグのタイプが自動的に追加されます。 型はコード自体から取得されるため、型情報は TypeScript にとって無関係であることに注意してください。 チェックボックスはデフォルトでオフになっています。

• 最初の列に行コメントを入れる: このチェックボックスを選択すると、最初の列から行のコメントが始まります。 チェックボックスをオフにすると、コード内で行コメントが整列されます。

• 行コメント開始にスペースを追加する: このチェックボックスを選択すると、行コメント文字とコメント行の最初の文字の間にスペースが挿入されます。

  

  

• ブロックコメントの前後にスペースを追加する: ブロックコメントに先頭と末尾のスペースを追加するには、このチェックボックスを選択します。

  デフォルトでは、コードフラグメントをブロックコメントで囲むと、テキストはスペースなしで /* 文字を開いた直後に始まります。 */ 文字を閉じる前に、スペースも挿入されません。 このデフォルトのコードスタイルは、ESLint などの一部のリンターのルールと競合する可能性があります。

  

  

同じモジュールのメンバーのインポートをマージする

• このチェックボックスが選択されている場合、同じモジュールからインポートされたシンボルは、区切り文字としてコンマを使用して 1 つの インポートステートメントにリストされます。 メンバーは、インポートされた順にリストされます。 アルファベット順に配置するには、 インポートされたメンバーを並べ替える チェックボックスを選択して コード | インポートの最適化 を実行します。

• このチェックボックスをオフにすると、インポートされたシンボルごとに個別の インポート文が生成されます。

tsconfig.json からのパスを使用する

このチェックボックスをオンにすると、WebStorm は tsconfig.json ファイルをルートとしてインポートパスを計算します。 このチェックボックスをオフにすると、WebStorm はプロジェクトルートを基準にインポートパスを計算します。

例: プロジェクトが次のように構成されている場合:

チェックボックスが選択されていると、WebStorm は次の import 文を生成します：

チェックボックスをオフにすると、次の import 文が生成されます。

index.js が使用可能なときにディレクトリインポートを使用する (Node スタイルのモジュール解決)

次のような構造のプロジェクトがあるとします：

• このチェックボックスがオフの場合、例: ファイル src/lib/index.js は ./src/lib/index.js としてインポートされます。

• チェックボックスが選択されている場合、ファイル src/lib/index.js は ./src/lib としてインポートされます。

TypeScript オフィシャル Web サイト(英語)から TypeScript モジュール解決の詳細を参照してください。

ファイル拡張子を使用する

このフィールドでは、インポートステートメントのファイル拡張子を設定します。

• 自動 - このオプションを使用すると、WebStorm は常に次のファイル名に拡張子を追加します：

  • .vue ファイル。

  • 拡張子が .mts のファイル。

  • package.json の "type":"module" および tsconfig.json の "module":"node16" または "module":"nodenext" を含むプロジェクトのファイル。

• 常に .js - このオプションを使用すると、WebStorm はインポートステートメント内のファイル名に拡張子を自動的に追加します。 これは、完全なファイル名を必要とするブラウザー (Chrome など) で ES6 モジュールを使用する場合に重要です。 WebStorm は、この設定をコード補完でインポートステートメントを自動生成する場合や、 Alt+Enter でインポート生成を呼び出す場合の両方に適用します。

• しない - このオプションを使用すると、WebStorm はインポートステートメントを生成するとき常に拡張子のないファイル名を挿入します。

インポートで型修飾子を使用する

このフィールドでは、タイプのインポートステートメントでの type 修飾子の使用を構成します。 この設定は型にのみ適用され、どのオプションを選択しても型以外には type 修飾子が挿入されないことに注意してください。

このオプションを使用すると、 tsconfig.json で 「importsNot UsedAsValues」: " エラー "(英語) または 「逐語的モジュール構文」: true(英語) が指定されている場合に type 修飾子が追加されます。

それ以外の場合、優先されるインポートタイプがない場合、 type 修飾子は挿入されません。

このオプションを使用すると、 tsconfig .json で 「importsNot UsedAsValues」: " エラー "(英語) または 「逐語的モジュール構文」: true(英語) が指定されているかどうかに関係なく、常に type 修飾子が挿入されます。

このオプションを選択すると、 tsconfig.json の "importsNotUsedAsValues": "error" または "verbatimModuleSyntax": true フラグに関係なく、WebStorm は type 修飾子を使用しません：

tsconfig.json からのパスマッピングを使用する

このフィールドでは、 import ステートメントでパスのスタイルを構成します。

• 常に - このオプションを使用すると、WebStorm は常に tsconfig.json から パスマッピング を使用します。

• しない - このオプションを使用すると、WebStorm は生成されたインポートで常に相対パスを使用します。

• 指定されたパス以外のファイルのみ - このオプションを使用すると、WebStorm は同じパスマッピングが定義されたファイル間のインポート生成時に相対パスを使用します。 他のすべてのファイルでは、パスマッピングが使用されます。

以下の例では、ファイル animal.ts および bird.ts は、 tsconfig.json でパスマッピングが指定されている animated フォルダーのフォルダーに格納されています。 ファイル dog.ts はパスマッピングの外にあります。

パスマッピング @Lib は次のように構成されています。

その結果、 常に と しない の各オプションは、 bird.ts と dog.ts の両方に同じ方法で適用されます。 指定されたパス以外のファイルのみ オプションを選択すると、WebStorm は bird.ts で相対パスを、 dog.ts でパスマッピングを使った、異なるスタイルの import ステートメントを生成します。

Import ステートメントは @Lib パスマッピングを使用します。

Import ステートメントは相対パスを使用します。

WebStorm は、 bird.ts で相対パス、 dog.ts で @Lib パスマッピングを使った、異なるスタイルの import ステートメントを生成します。

正確にインポートしない

このフィールドで、WebStorm がシンボルの自動インポート時にスキップすべき正確なパスを指定します。 代わりに、WebStorm はシンボルをインポートするための代替パスを探します。

これは、モジュール全体ではなくサブモジュールをインポートできるモジュールで特に便利です。 例: より一般的な import {Observable} from 'rxjs' に import {Observable} from 'rxjs/Observable' のようなインポートを優先させるには、 rxjs をリストに追加します。

スキップするモジュールのリストを管理するには：

1. フィールドの右側にある をクリックします。

2. 開いた モジュールの変更 ダイアログで、 をクリックし、 モジュールを追加 ダイアログでモジュール名を指定します。 リストからモジュールを削除するには、モジュールを選択して をクリックします。

インポートされたメンバーを並べ替える

• このチェックボックスが選択されている場合、WebStorm はマージされた importステートメント内のインポートされたメンバーをアルファベット順にリストします。 メンバーは、インポートされた順序でコンマ区切りでリストされ、再ソートは コード | インポートの最適化 を実行した場合のみ行われることに注意してください。

• このチェックボックスがオフの場合、マージされた import文のメンバーは常にインポートされた順序でコンマ区切りでリストされます。

モジュール別にインポートを並べ替える

• このチェックボックスが選択されている場合、 コード | インポートの最適化 を実行すると、 importステートメントがモジュール名でアルファベット順に再ソートされます。

• このチェックボックスがオフの場合、 インポート文は常に生成された順序で表示され、この順序は コード | インポートの最適化 の実行後に変更されません。

グループ化ルール

このエリアを使用して、グループ化ルールを設定します。

• 対応する getter/setter とプロパティフィールドをグループ化する

• アロー関数で初期化されたフィールドをメソッドとグループ化する

• オーバーライドされたメソッドをまとめて保持する

  オーバーライドされたメソッドをクラスとインターフェースごとにグループ化するには、このチェックボックスを選択します。 順序 リストで、 順序を保持する または 名前で並べ替える オプションを選択します。

一致ルール

この領域を使用して、ルールのリストとして要素の順序を定義します。すべてのルールには、修飾子や型などの一致のセットがあります。

• : このボタンを使用してルールを追加します。 空のルール 領域が開きます。

• : このボタンを使用してリストからルールを削除します。

• : このボタンを使用して既存のルールを編集します。 このボタンを表示するには、編集するルールに移動してボタンをクリックします。 表示されるポップアップで、ルールフィールドを変更します。

• : これらのボタンを使用して、選択したルールを上下に移動します。

空のルール

このエリアを使用して、新しい一致ルールを作成するか、既存のルールを編集します。 次のフィルターから選択できます。

• タイプ: このフィルターを使用して、ルールのコンストラクター、メソッド、フィールド、プロパティを選択します。

  型キーワードをクリックすると、条件が無効になりますのでご注意ください。

• 修飾子: このフィルターを使用して、ルールの修飾子のタイプを選択します。

  修飾キーワードをクリックすると、その条件が無効になることに注意してください。

• 名前: このフィールドを使用して、ルール内のエントリ名を指定します。 このフィルターは、フィールド名、メソッド名、クラス名などのエントリ名のみに一致します。 フィルターは正規表現をサポートし、 標準的な構文(英語)を使用します。 一致は名前全体に対して実行されます。

• 順序: このリストを使用して、ルールのソート順を選択します。 このオプションは、複数の要素が同じ一致ルールを使用する場合に役立ちます。 この場合、 順序を維持を選択すると、再配置前に設定されたのと同じ順序が維持され、 名前で並べ替えを選択すると、同じ一致ルールを持つ要素が名前で並べ替えられます。

このアイコンは、 名前で並べ替えを 順序 リストから選択すると表示されます。 アイコンは、このルールの項目がアルファベット順にソートされていることを示します。