コードスタイル: TypeScript

このページを使用して、TypeScript ファイルのフォーマットオプションを設定します。これらの設定を変更すると、プレビューペインに、コードへの影響が表示されます。

タブとインデント

タブ文字を使用する	このチェックボックスをオンにすると、タブ文字が使用されます。 `Tab` キー押下時インデント用コードを再フォーマットするためチェックボックスがオフの場合、WebStorm はタブではなくスペースを使用します。
スマートタブ	インデントは 2 つの部分で構成されます。1 つの部分はコードブロックのネストに起因し、他の部分はアライメントによって決定されます。このチェックボックスが選択されている場合、ネストの結果生じる部分にはタブとスペースの両方が（必要に応じて）含まれますが、alignment によって定義される部分はスペースのみで構成されます。このチェックボックスをオフにすると、タブのみが使用されます。これは、指定されたタブサイズに合うスペースのグループを再フォーマットした後、自動的にタブに置き換えられることを意味します。タブ文字を使用するチェックボックスが選択されている場合は、スマートタブチェックボックスが使用可能です。
タブサイズ	このフィールドで、タブに収まるスペースの数を指定します。
インデント	このフィールドでは、各インデントレベルに挿入するスペースの数を指定します。
連続インデントの文字数	このフィールドでは、式、メソッド宣言、メソッド呼び出しで、配列の要素間に挿入するスペースの数を指定します。
空行でインデントを保持する	このチェックボックスをオンにすると、空白行にインデントがあるように WebStorm にインデントが保持されます。チェックボックスをオフにすると、WebStorm は空白行のタブ文字とスペースを削除します。
チェーンメソッドをインデントする	関数の宣言では、チェーンの 2 番目以降のメソッドが別の行に表示されます。チェックボックスをオンにすると、チェーンの 2 番目以降のメソッドが 1 番目の呼び出しに揃えられます。チェックボックスをオフにすると、チェーンの 2 番目以降のメソッドは、呼び出されたオブジェクトと揃えられます。
グループ内のすべてのチェーン呼び出しをインデントする	このチェックボックスをオンにすると、最初に呼び出されたメソッドとそれ以降に呼び出されたメソッドがインデントされます。このチェックボックスは、チェーンメソッドをインデントするチェックボックスが選択されている場合にのみ使用できます。

スペース

このタブを使用して、WebStorm にスペースを自動的に挿入する場所を指定します。関連する場所の説明の横にあるチェックボックスを選択し、プレビューペインで結果を確認します。

折り返しと波括弧

このタブでは、WebStorm がソースコードの再フォーマット時にさまざまなコード構成に適用する例外、ブレース配置、配置オプションをカスタマイズします。プレビューペインで結果を確認します。

次でハードラップ

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

入力時に折り返す

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

デフォルト : グローバル設定から入力時に折り返す値を使用するには、このオプションを選択します。
はい : 右マージンフィールドの値を使用するには、このオプションを選択します。
いいえ : このオプションを選択すると、行は右マージンで指定された値を超える可能性があります。

ビジュアルガイド

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

整形時の保持

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

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

折り返しオプション

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

折り返さない - このオプションを選択すると、特殊なラッピングスタイルは適用されません。ネストされたアライメントと波括弧の設定は無視されます。
長い場合は折り返す - このオプションを選択すると、右マージンを超える行が適切なインデントで折り返されます。
常に折り返す - このオプションを選択すると、リスト内のすべての要素が折り返され、1 行に 1 つの要素が正しくインデントされます。
長い場合は切り捨てる - 適切なインデントで 1 行に 1 つの要素が存在するように、右マージンを超えたリスト内の要素を折り返すには、このオプションを選択します。

アライメントオプション

複数行の場合は揃える - このチェックボックスをオンにすると、次の各行の同じ列でコード構成が開始されます。それ以外の場合は、コード構造の位置は現在のインデントレベルによって決定されます。
<文字> 次の行に - 行が折り返されたときに、指定した文字を次の行に移動するには、このチェックボックスを選択します。
新しい行に 'else' を配置 - このチェックボックスを使用して、対応する文または文字を次の行に移動します。
<文字> の後の改行 - 指定した文字の後のコードを改行するには、このチェックボックスを選択します。
特殊な else if の扱い - このチェックボックスを選択すると、else if ステートメントは同じ行に配置されます。
それ以外の場合、else if ステートメントは対応するインデントレベルの次の行に移動されます。
インデントケースブランチ - このチェックボックスを選択すると、case ステートメントは対応するインデントレベルに配置されます。それ以外の場合、case ステートメントは switch と同じインデントレベルに配置されます。
オブジェクト - リストから、オブジェクトの配置方法を選択します。
- 揃えない : 連続した行の属性は整列しません。
- コロンの位置 : 順次行の属性はコロンに揃えられます。
- 値の位置 : 連続した行の属性は値に対して整列されます。
変数宣言 - 等号のアライメントを設定するには、次のオプションのいずれかを選択します。
- 揃えない : 等号は揃っていません。
- 複数行の場合は揃える : 複数行の var ステートメントの等号は、追加のスペースを挿入することによって位置合わせされます。
- グループ化するときに整列する : 複数の var ステートメントの等号は、追加のスペースを挿入することによって位置合わせされます。
ES6 の import/export 'from' 節を揃える : チェックボックスが選択されている場合、WebStorm は ECMAScript 6(英語) コード内の import および export ステートメントを自動的に整列させ、コードを読みやすく維持しやすくします。プレビューペインで、コードフラグメントの配置と配置を比較します。
このオプションをオンにすると、WebStorm は新しいコードをその場で整列させます。Ctrl+Alt+L を押してコードを再フォーマットした後、既存の import および export ステートメントが整列されます。

波括弧配置オプション

波括弧配置スタイル

このリストを使用して、クラス宣言、メソッド宣言、関数宣言、およびその他のタイプの宣言での左中括弧の位置を指定します。使用可能なオプションは次のとおりです。

行末に配置 : このオプションを選択すると、宣言括弧を宣言行の末尾に配置します。
折り返されている場合は次の行に配置 : このオプションを選択すると、複数行の宣言行の後の行頭に開き括弧が配置されます。
次の行に配置 : このオプションを選択すると、宣言行の後の行の先頭に左中括弧が配置されます。
シフトして次の行に配置 : このオプションを選択すると、宣言の行が対応するインデントレベルに移動した後の行に左中括弧が配置されます。
次の行をそれぞれシフト : このオプションを選択すると、宣言の行が対応するインデントレベルに移動した後の行に開き括弧が配置され、次の行も次のインデントレベルに移動します。

波括弧を強制する

このリストから、if、for、while、do () while ステートメントの括弧の導入方法を選択します。使用可能なオプションは次のとおりです。

強制しない : このオプションを選択すると、中括弧の挿入が自動的に抑制されます。
複数行の場合 : ステートメントが複数の行にまたがっている場合に中括弧を自動的に挿入するには、このオプションを選択します。WebStorm はステートメント全体の行数を分析しますが、その条件だけではありません。
if (true) return false;
WebStorm は自動的に中括弧を挿入します:
if (true) { return false; }
常時 : このチェックボックスを選択すると、WebStorm は常に自動的に中括弧を挿入します。

空白行

このタブを使用して、再フォーマット後に WebStorm が保持してコードに挿入する空白行の場所と数を定義します。結果はプレビューペインに表示されます。

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

句読点

このタブのリストを使用して、終了セミコロン、一重引用符と二重引用符、末尾のコンマの自動挿入でディレクティブを作成します。

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

セミコロンを使用して新しいコードのステートメントを終了する
セミコロンを使用してステートメントを常に終了する
新しいコードのステートメントを終了するためにセミコロンを使用しないでください
常にステートメントを終了するためにセミコロンを使用しないでください

引用符

新しいコードで二重引用符を使用する
常に二重引用符を使用する
新しいコードで単一引用符を使用する
常に単一引用符を使用する

末尾のコンマ

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

保持
除去
複数行の場合に追加

コード生成

このタブで、生成されたコードのコードスタイルを設定します。

'public' 修飾子を使用する

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

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

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

チェックボックスを選択すると、生成されたコードにパブリックアクセス修飾子が自動的に挿入されます。
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 {ClassName} from 'directory_2/file_2' チェックボックスをオフにすると、次の import 文が生成されます。 import {ClassName} from '../directory_2/file_2'
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 の「importsNot UsedAsValues」: " エラー "(英語) または「逐語的モジュール構文」: true(英語) フラグに関係なく、WebStorm は `type` 修飾子を使用しません。
tsconfig.json からのパスマッピングを使用する	このフィールドでは、`import` ステートメントでパスのスタイルを構成します。常に - このオプションを使用すると、WebStorm は常に tsconfig.json からのパスマッピングを使用(英語)します。決して - このオプションを使用すると、WebStorm は生成されたインポートで常に相対パスを使用します。指定されたパス以外のファイルのみ - このオプションを使用すると、WebStorm は、同じパスマッピングが定義されているファイル間でインポートを生成するときに相対パスを使用します。他のすべてのファイルでは、パスマッピングが使用されます。以下の例では、ファイル animal.ts および bird.ts は、tsconfig.json でパスマッピングが指定されている animated フォルダーのフォルダーに格納されています。ファイル dog.ts はパスマッピングの外にあります。パスマッピング `@Lib` は次のように構成されています。 "baseUrl": ".", "paths": { "@lib/": ["./lib/objects/earth/animated/"] } その結果、常時となしの各オプションは、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` をリストに追加します。スキップするモジュールのリストを管理するには: フィールドの右側にあるをクリックします。開いたモジュールの変更ダイアログで、をクリックし、モジュールの追加ダイアログでモジュール名を指定します。リストからモジュールを削除するには、モジュールを選択してをクリックします。
インポートされたメンバーを並べ替える	このチェックボックスが選択されている場合、WebStorm は、マージされたインポート文のインポートされたメンバーをアルファベット順にリストします。メンバーは、コード \| インポートの最適化を実行した場合にのみ、インポートおよび再ソートされた順序でコンマ区切りでリストされていることに注意してください。このチェックボックスがオフの場合、マージされたインポート文のメンバーは、インポートされた順序で常にコンマ区切りでリストされます。
モジュール別にインポートを並べ替える	このチェックボックスが選択されている場合、コード \| インポートの最適化を実行すると、インポート文がモジュール名でアルファベット順に再ソートされます。このチェックボックスがオフの場合、インポート文は常に生成された順序で表示され、この順序はコード \| インポートの最適化の実行後に変更されません。

配置

このタブでは、好みに合わせて TypeScript コードを並べ替える一連のルールを定義します。

グループ化ルール	このエリアを使用して、グループ化ルールを設定します。プロパティフィールドに対応する getter/setter をグループ化するメソッドとアロー関数でフィールド初期化をグループ化するオーバーライドされたメソッドをまとめるオーバーライドされたメソッドをクラスとインターフェースごとにグループ化するには、このチェックボックスを選択します。順序リストで、順序を維持または名前順オプションを選択します。
一致ルール	この領域を使用して、ルールのリストとして要素の順序を定義します。すべてのルールには、修飾子や型などの一致のセットがあります。 : このボタンを使用してルールを追加します。空のルール領域が開きます。 : このボタンを使用してリストからルールを削除します。 : このボタンを使用して既存のルールを編集します。このボタンを表示するには、編集するルールに移動してボタンをクリックします。表示されるポップアップで、ルールフィールドを変更します。 : これらのボタンを使用して、選択したルールを上下に移動します。
空のルール	このエリアを使用して、新しい一致ルールを作成するか、既存のルールを編集します。次のフィルターから選択できます。タイプ : このフィルターを使用して、ルールのコンストラクター、メソッド、フィールド、プロパティを選択します。タイプキーワードを 2 回クリックすると、条件が無効になることに注意してください。修飾子 : このフィルターを使用して、ルールの修飾子のタイプを選択します。修飾キーワードを 2 回クリックすると、条件が無効になることに注意してください。名前 : このフィールドを使用して、ルールのエントリ名を指定します。このフィルターは、フィールド名、メソッド名、クラス名などのエントリ名のみに一致します。フィルターは正規表現をサポートし、標準の構文(英語)を使用します。一致は名前全体に対して実行されます。順序 : このリストを使用して、ルールのソート順を選択します。このオプションは、複数の要素が同じ一致ルールを使用する場合に役立ちます。この場合、順序を維持を選択すると、再配置前に設定されたのと同じ順序が維持され、名前で並べ替えを選択すると、同じ一致ルールを持つ要素が名前で並べ替えられます。
	このアイコンは、順序リストから名前で並べ替えを選択すると表示されます。アイコンは、このルールの項目がアルファベット順にソートされていることを示します。