WebStorm 2019.2ヘルプ

コードスタイルTypeScript

WindowsとLinux用のファイル | 設定 | エディター | コード・スタイル | TypeScript
macOS用 WebStorm | 環境設定 | エディター | コード・スタイル | TypeScript
Ctrl+Alt+S the Settings/Preferences icon


このセクションを使用して、TypeScriptファイルのフォーマットオプションを構成します。これらの設定を変更すると、変更の結果がプレビューペインに表示されます。

タブとインデント

タブ文字を使用

  • チェックボックスが選択されている場合、タブ文字はインデントとコードの再フォーマットに使用されます。

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

スマート・タブ

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

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

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

タブ・サイズ

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

インデント

このフィールドでは、各インデントレベルに挿入されるスペース(またはタブ文字を使用チェックボックスが選択されている場合はタブ)の数を指定します。

連続インデントの文字数

このフィールドでは、式、メソッド宣言、およびメソッド呼び出しで、配列の要素間に挿入するスペース(またはタブ文字を使用チェックボックスが選択されている場合はタブ)の数を指定します。

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

このチェックボックスをオンにすると、空白行にインデントがあるようにWebStormにインデントが保持されます。チェックボックスをオフにすると、WebStormは空白行のタブ文字とスペースを削除します。

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

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

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

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

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

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

スペース

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

折り返しおよび括弧

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

次でハードラップ

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

入力時に折り返す

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

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

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

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

ビジュアル・ガイド

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

再フォーマット時の保持

チェックボックスを使用して、WebStormがソースコードを再フォーマットするときに発生する例外を設定します。例:デフォルトでは、改行チェックボックスが選択されています。標準の規約より短い行がコードに含まれている場合は、再フォーマットする前に改行チェックボックスを無効にすることによって変換できます。

折り返しオプション

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

折り返しなし

このオプションを選択すると、特殊な折り返しスタイルは適用されません。ネストされたアライメントと波括弧の設定は無視されます。

長い場合は折り返す

適切なインデントで右マージンを超える行を折り返すには、このオプションを選択します。

常に折り返す

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

長い場合に切り捨てる

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

アライメントオプション

複数行のときに再配置する

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

次のラインの<character(s)>

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

新しい行で 'else'

このチェックボックスを使用して、対応する文または文字を次の行に移動します。

<character>後の新しい行

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

特殊な else if の扱い

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

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

インデントケースブランチ

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

オブジェクト

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

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

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

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

変数宣言

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

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

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

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

ES6インポート/エクスポート

'from' 節をそろえる : このチェックボックスが選択されていると、WebStormはECMAScript 6(英語)コード内の import ステートメントと export ステートメントを自動的に整列させ、コードを読みやすく維持しやすくします。プレビューペインで、コードフラグメントの外観と配置の有無を比較します。

ws_align_import_export_es6.png

このオプションをオンにすると、WebStormは新しいコードをオンザフライで整列させます。既存の importexport ステートメントは、Ctrl+Alt+Lを押してコードを再フォーマットした後に整列されます(詳細はソースコードの再フォーマットのセクションを参照)。

波括弧配置オプション

波括弧配置スタイル

このリストを使用して、クラス宣言メソッド宣言関数宣言、およびその他の種類の宣言における開き括弧の位置を指定します。利用可能なオプションは以下のとおりです。

  • 行末 : このオプションを選択すると、宣言括弧を宣言行の末尾に配置します。

  • 折り返されている場合は次の行 : このオプションを選択すると、複数行の宣言行の後の行頭に開き括弧が配置されます。

  • 次の行 : このオプションを選択すると、宣言行の後の行の先頭に左中括弧が配置されます。

  • 次の行にシフト : このオプションを選択すると、宣言の行が対応するインデントレベルに移動した後の行に左中括弧が配置されます。

  • 次の行をそれぞれシフトした : このオプションを選択すると、宣言の行が対応するインデントレベルに移動した後の行に開き括弧が配置され、次の行も次のインデントレベルに移動します。

強制波括弧

このリストから、if , for , whileおよび do () while ステートメントの中括弧の導入方法を選択してください。利用可能なオプションは以下のとおりです。

  • 強制しない : このオプションを選択すると、中括弧の挿入が自動的に抑制されます。

  • 複数行の場合 : ステートメントが複数の行にまたがっている場合に中括弧を自動的に挿入するには、このオプションを選択します。WebStormはステートメント全体の行数を分析しますが、その条件だけではありません。

    if (true) return false;

    WebStormは自動的に中括弧を挿入します:

    if (true) { return false; }
  • 常時 : このチェックボックスを選択すると、WebStormは常に自動的に中括弧を挿入します。

ブランク行

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

空白行の指定

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

最小の空白行数

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

句読点

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

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

  • セミコロンを使用 して新しいコードの文を終了する

  • ステートメントをに終了させるにはセミコロンを使用してください

  • 新しいコードでは、セミコロンを使って文を終了しないでください:

  • に文を終了させるためにセミコロンを使用しないでください

引用符

  • 新しいコード二重引用符を使用する

  • 二重引用符を使用する

  • 新しいコード重引用符を使用する

  • 重引用符を使用する

末尾のコンマ

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

  • 保持
  • 除去
  • 複数行のときに追加

コード生成

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

'public' 修飾子を使用する

このチェックボックスを使用すると、パブリックアクセス修飾子を生成コードに挿入または省略することができます:
例:以下のパブリックメソッドの生成中:

class Test { public test():void { var x = 1; } }
  • チェックボックスをオンにすると、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にとって無関係であることに注意してください。チェックボックスはデフォルトでクリアされています。

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

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

インポート

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

  • このチェックボックスをオンにすると、同じモジュールのインポートされたシンボルが、1つのimport文にカンマをセパレータとして表示されます。メンバーは、インポートされた順にリストされます。アルファベット順に並べ替えるには、インポートされたメンバーをソートするチェックボックスをオンにしてコード | インポートの最適化を実行します。

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

tsconfig.json に相対パスを使用する

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

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

ws ts import example

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

import {ClassName} from 'directory_2/file_2'

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

import {ClassName} from '../directory_2/file_2'

ディレクトリー・インポートを使用する (ノードスタイルのモジュール解決)

モジュール名に .js ファイル拡張子を使用する

このチェックボックスをオンにすると、WebStormは .js 拡張をインポートステートメント内のES6モジュールの名前に自動的に追加します。これは、完全なファイル名を必要とするブラウザでES6モジュールを使用する場合(Chromeなど)には重要です。WebStormは、コード補完上で自動的にインポートステートメントを生成するとき、または Alt+Enterでインポート生成を呼び出すときに、この設定を適用します。

正確にインポートしない

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

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

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

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

  2. 開いているモジュールの変更ダイアログボックスで、Add icon をクリックし、モジュールの追加ダイアログボックスでモジュール名を指定します。一覧からモジュールを削除するには、モジュールを選択して icons general remove svgをクリックします。

インポートされたメンバーをソートする

  • このチェックボックスをオンにすると、WebStormはインポートされたメンバーをマージされたインポートステートメントでアルファベット順に一覧表示します。メンバーは、コード | インポートの最適化を実行したときにのみインポートされ、並べ替えられた順にカンマで区切られて表示されます。

  • このチェックボックスをオフにすると、マージされたインポートステートメントのメンバーは、インポートされた順に常にコンマ区切りで表示されます。

モジュール別にインポートをソートする

  • このチェックボックスをオンにすると、コード | インポートの最適化を実行すると、import文がモジュール名順にアルファベット順にソートされます。

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

配置

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

グループ化ルール

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

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

一致ルール

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

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

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

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

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

空のルール

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

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

    タイプキーワードを2回クリックすると、条件が無効になることに注意してください。

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

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

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

  • 順序 : このリストを使用して、ルールのソート順を選択してください。このオプションは、複数の要素が同じ一致規則を使用している場合に便利です。この場合、秩序を保ちますを選択しても並べ替え前の設定と同じ順序が保持され、名前順を選択すると同じ一致規則を持つ要素が名前順に並べ替えられます。

the Sort Alphabetically button

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

次からセット

該当する場合、リンクはページの右上隅に表示されます。このリンクをクリックして、現在の言語コードスタイルのベースとして使用する言語を選択します。

コードスタイル設定の初期セットに戻り、変更を破棄するには、リセットをクリックします。

最終更新日: 2019年9月12日

関連事項

リファレンス:

言語およびフレームワーク固有のガイドライン

関連ページ:

再フォーマットとコードの並べ替え

WebStormでは、コード・スタイル設定で指定した要件に従ってコードを再フォーマットできます。設定にアクセスするには、設定/環境設定ダイアログでに進みます。コードの一部、ファイル全体、ファイルのグループ、ディレクトリー、およびモジュールを再フォーマットできます。コードの一部または一部のファイルを再...

コード・スタイル

WindowsとLinux用のmacOS用スキーム:この領域では、コードスタイルスキームを選択し、必要に応じて変更します。コードスタイルスキームの設定は、WebStormがコードを生成、リファクタリング、または再フォーマットするたびに自動的に適用されます。コードスタイルはプロジェクトレベルとIDEレ...

TypeScript のリファクタリング

リファクタリングは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングはコードを堅牢にし、dryを維持しやすくします。移動リファクタリング:ファイルやフォルダーを移動するだけでなく、WebStormではTypeScriptの最上位シンボルを移動できます。シンボ...

TypeScript

WebStormはTypeScriptソースコードの開発、実行、およびデバッグをサポートしています。WebStormは.tsファイルを認識し、あなたからの追加のステップなしで編集するためのコーディング支援のフルレンジを提供します。TypeScriptファイルはアイコンでマークされています。TypeS...