コード補完
基本コード補完は、可視性スコープ内のクラス、メソッド、フィールド、キーワードの名前を補完するのに役立ちます。
WebStorm はコンテキストを分析し、現在のキャレット位置から到達可能な選択肢を提案します。 JSDoc(英語) コメント、 TypeScript 型定義などからの追加情報も補完精度を大幅に向上させます。 候補には ライブテンプレートも含まれます。 補完機能は英語以外のキーボードレイアウトでも利用できます。
補完はサードパーティのコードのシンボルに対しても機能します。 ほとんどの場合、必要なのは、 必要なファイルをプロジェクトに追加することだけです。
基本補完を呼び出す
デフォルトでは、WebStorm は入力中に自動的にコード補完のポップアップを表示します。
あるいは、 Ctrl+Space を押すか、メインメニューから を選択することもできます。
候補リストを絞り込むには、予想される名前またはキーワードの一部を入力するか (途中の文字も受け入れられます)、ドット区切り文字の後にコード補完を呼び出します。 WebStorm は、入力した文字を任意の位置に含む候補を表示します。
リストからの提案を受け入れる
Enter を押すか、該当するリストアイテムをダブルクリックして、キャレットの左側に挿入します。
Tab を押して、キャレットから右にある文字を置き換えます。
Ctrl+Shift+Enter を使用して、現在のコード構成を構文上正しいものにします（括弧のバランス、欠落している中括弧とセミコロンの追加など）。
補完設定の設定に従って、特定の言語とコンテキストに依存するキーを使用して、選択した補完候補を挿入します。
選択した候補の参照を表示する
クイックドキュメント検索を行うには、候補リストから項目を選択し、 Ctrl+Q を押します。 WebStorm は ドキュメント ポップアップ内でその項目のクイックドキュメントを表示します。
より多くのコントロールを持つツールウィンドウでドキュメントを見るために、 ドキュメント ポップアップをピンで留めてください。 ドキュメント ポップアップと ドキュメントツールウィンドウ を切り替えるには、 Ctrl+Q を順に押します。
選択した提案の定義を表示するには、 Ctrl+Shift+I を押します。
コード階層を表示する
候補リストのエントリを選択し、次のいずれかのショートカットを押します。
型階層を表示する Ctrl+H
呼び出し階層を表示するには Ctrl+Alt+H を使用します。
メソッド階層を表示するための Ctrl+Shift+H。
詳細は、 階層の構築を参照してください。
新しいクラスフィールド、変数、パラメーターの名前の提案を表示する
既存のシンボルの呼び出しを補完するだけでなく、WebStorm は宣言時に新しいクラスフィールド、変数、パラメーターの名前も提案できます。 これらの提案は、プロジェクト、使用しているライブラリ、標準 API で定義されているクラス、型、インターフェースの名前に基づいています。
デフォルトでは、この機能はオフになっています。
エディター | 一般 | コード補完 設定ページ Ctrl+Alt+S に移動します。
JavaScript セクションで、 変数とパラメーターの名前を提案 および クラスフィールドの名前を提案 チェックボックスを選択します。
該当する場合は、提案されたパラメーター名の型アノテーションの表示を有効にします。
JavaScript の TypeScript 言語サービスからの補完
TypeScript 言語サービス(英語)からの提案を使用して、JavaScript ファイルの基本コード補完を拡張できます。 TypeScript の検証から詳細を参照してください。
jsconfig.json または tsconfig.json ファイルを開き、
'allowJS' : trueを追加します。Ctrl+Alt+S を押して設定を開き、 を選択します。
開いた TypeScript ページで、 TypeScript 言語サービス チェックボックスが選択されていることを確認します。
上書きの補完
親クラスまたはインターフェースからメソッドをオーバーライドし、補完候補リストからこのメソッドを選択すると、WebStorm は自動的にパラメーターを追加し、 super() 呼び出しを生成し、可能なら型情報も追加します。
オーバーライドのメソッド本体の生成をオフにする
設定 ダイアログ（Ctrl+Alt+S ）で に移動します。
開いた JavaScriptページで、 補完時にオーバーライド用のメソッド本体を展開する チェックボックスのチェックを外します。
機械学習による補完ランキング
WebStorm では、他のユーザーが似た状況で選択した内容に基づき、補完候補の優先順位を付けることができます。
ML 補完メカニズムは新しい要素を追加するのではなく、コードから取得した要素を順序付けます。 データはどこにも公開されず、ローカルで収集されます。
ML 補完ランキングを有効にする
Ctrl+Alt+S を押して設定を開き、 エディター | 一般 | コード補完 を選択してください。
ML を使った提案の並び替え で、 機械学習に基づいてコード補完の候補を並べ替え オプションを有効にして、ML 補完を使用したい言語を選択してください。
関連性マーカーを有効にする
Ctrl+Alt+S を押して設定を開き、 エディター | 一般 | コード補完 を選択してください。
次のオプションを有効にします：
補完ポップアップで順位の変更箇所に印を付ける:
および 
アイコンを使用して、提案の関連性が増加しているか減少しているかを示し、その結果、提案が候補リストを上下に移動したことを示します。補完ポップアップで最も関連性の高い項目に印を付ける:
アイコンを使用して、リストで最も適切な提案を示します。
コード補完動作の構成
デフォルトの補完動作をカスタマイズするには、 エディター | 一般 | コード補完 設定ページ Ctrl+Alt+S に移動し、デフォルトの補完設定を更新します。
補完ポップアップから直接コード補完設定にアクセスするには、 
アイコンをクリックして、 コード補完設定 を選択します。
その後、 エディター | 一般 | コード補完 設定ページ Ctrl+Alt+S が開きます。
JavaScript コンテキストで補完を調整するには、 JavaScript エリアのコントロールを使用します。
入力時に候補リストを自動的に表示する
Ctrl+Alt+S を押して設定を開き、 を選択します。
入力時に候補を表示する チェックボックスを選択します。 チェックボックスがオフの場合、基本補完の場合は Ctrl+Space を、型一致の補完の場合は Ctrl+Shift+Space を押して、コード補完を明示的に呼び出す必要があります。
オプションが 1 件のみの場合に自動で候補を挿入することもできます。 単一の候補を自動的に挿入 の下で補完タイプを選択してください。
候補をアルファベット順に表示する
Ctrl+Alt+S を押して設定を開き、 を選択します。
候補をアルファベット順に並べ替え チェックボックスを選択します。 デフォルトではチェックボックスはオフになっており、候補は関連性の高い順に並び替えられます。
あるいは、候補リストの右下隅にある
または 
を使用して、これらのモードを切り替えます。 これらのアイコンは、エントリが数個しか含まれていないリストには表示されないことに注意してください。
ケースに関してリストに提案を含める
大文字・小文字を区別 チェックボックスをオンにして、大文字と小文字を区別するか、すべての文字を大文字にするかを選択します。
自動ドキュメント検索をオンにする
Ctrl+Alt+S を押して設定を開き、 を選択します。
ドキュメントのポップアップを表示 チェックボックスを選択します。
基本補完: ドキュメント検索の詳細を参照してください。
括弧を自動的に挿入する
Ctrl+Alt+S を押して設定を開き、 を選択します。
可能な場合は丸括弧を自動的に挿入 チェックボックスを選択します。
デフォルトでは、このオプションはオンになっており、関数 / メソッドを補完すると WebStorm が自動的に開き括弧と閉じ括弧のペアを挿入します。
チェックボックスをオフにすると、括弧の自動挿入を抑制できます。
Enter の代わりに開き括弧
(を使用して、補完リストから選択した項目を適用すると、オプションがオンかオフかに関係なく、括弧が自動的に挿入されます。
Enter の代わりに開き括弧
(を使用して、補完リストから選択した項目を適用するには、 スペース、ドット、その他のコンテキスト依存キーを押して選択した候補を挿入 チェックボックスを選択します。 詳細については、 特定のキーで候補を挿入するを参照してください。
特定のキーを使用して提案を挿入する
Ctrl+Alt+S を押して設定を開き、 を選択します。
スペース、ドット、その他のコンテキスト依存キーを押して選択した候補を挿入 チェックボックスを選択します。 これらのキーは、補完が呼び出される言語とコンテキストに依存します。
HTML のプレーンテキストの補完を抑制する
HTML コンテキストでは、山括弧を入力せずにプレーンテキストを入力しても、デフォルトで WebStorm が補完候補を表示します。
この迷惑な動作をオフにするには、 設定 ダイアログ (Ctrl+Alt+S) を開き、 に移動して、 HTML テキストの入力時にタグ名コード補完の自動ポップアップを有効にする チェックボックスをオフにします。
機械学習に基づいて提案を並べ替える
Ctrl+Alt+S を押して設定を開き、 を選択します。
デフォルトでは、JavaScript ファイルと TypeScript ファイルの補完候補は、機械学習アルゴリズムに基づいて関連性によって並べ替えられます。
ML ベースの並べ替えをオフにするには、 機械学習に基づいてコード補完の候補を並べ替え チェックボックスをオフにします。
JavaScript または TypeScript でのみ ML ベースの並べ替えをオフにするには、対応するチェックボックスをオフにします。
WebStorm は提案を関連性でランク付けし、このランクを示す特別なマーカーを表示できます。
最も関連性の高い提案には、アスタリスク
が付いています。 このインジケータを表示するには、 補完ポップアップで最も関連性の高い項目に印を付ける チェックボックスを選択します。- および の矢印アイコンは、提案の関連性が増加しているか減少しているかを示し、提案がリストの上下に移動したことを示します。
これらのインジケータを表示するには、 補完ポップアップで順位の変更箇所に印を付ける チェックボックスを選択します。
JavaScript の補完を構成する
補完動作の共通設定に加えて、 設定 ダイアログ (Ctrl+Alt+S) の ページで JavaScript 固有のオプションをいくつか設定できます。
WebStorm は型に関係なくシンボルの補完を提案します。 このアプローチでは、複雑なケースでは、リストに複数の補完バリアントが表示されます。
補完をより正確にするには、 型ベース補完のみ を選択します。 補完リストは WebStorm の推論に大きく依存します。 その結果、推論が不十分な場合にリストが空のままになることがあります。
WebStorm は オプショナルチェイニング演算子 (?) を用いたシンボルの補完も提案します。
この動作を抑制するには、 Null 許容型に対してオプショナルチェイニング付きの項目を提案 チェックボックスをオフにします。
親クラスまたはインターフェースからメソッドをオーバーライドし、補完候補リストからこのメソッドを選択すると、WebStorm は自動的にパラメーターを追加し、
super()呼び出しを生成し、可能なら型情報も追加します。補完時にオーバーライド用のメソッド本体を展開する チェックボックスをオフにすると、補完時のオーバーライド用のメソッド本体の自動生成が抑制されます。
名前の補完を構成します。
変数とパラメーターの名前を提案: デフォルトでは、チェックボックスはオフになっています。 オンにすると、WebStorm は新しいクラスフィールド、変数、パラメーターの宣言時に名前を提案します。 これらの提案は、プロジェクト、使用しているライブラリ、標準 API で定義されているクラス、型、インターフェースの名前に基づいています。
クラスフィールドの名前を提案
このオプションはデフォルトでオフになっています。
提案されたパラメーター名に型アノテーションを追加: このチェックボックスを選択すると、補完候補ごとにその型に関する情報が提供されます。
このチェックボックスは、 変数とパラメーターの名前を提案 チェックボックスが選択されている場合にのみ使用できます。
提案を確認または承認するときにパラメーター情報を表示する方法を構成します。
パラメーター情報ポップアップを表示します (ミリ秒)： このチェックボックスをオンにすると、エディターで左括弧を入力するか、補完候補リストからメソッドを選択した際、WebStorm が利用可能なすべてのメソッドシグネチャのポップアップを自動表示します。
右側のテキストフィールドで、ポップアップウィンドウ表示までの遅延時間（ミリ秒）を指定します。
このチェックボックスが選択されていない場合は、メインメニューから を選択します。
完全なメソッドシグネチャーを表示: このチェックボックスをオンにすると、パラメーター情報にメソッド名や返された型などの完全なシグネチャーが表示されます。
パスの補完
このタイプの補完により、ファイルとフォルダーの選択が高速化されます。 その目的で使用されるダイアログは、たとえば、外部ツールまたはバージョン管理エンジンのインストールフォルダーを指定したり、 Node.js インタープリターを構成したりするときに、頻繁に呼び出されます。
メニューで を選択するか、パスが必要なフィールドの横にある 閲覧する
をクリックして、 パス選択ダイアログを開きます。パス フィールドが表示されていることを確認します。 フィールドが非表示の場合は、 パスの表示 リンクをクリックします。
パスを入力してください。 WebStorm はすぐに必要なディレクトリを見つけられるリストを提案します。
入力すると、候補リストが縮小され、一致するパスのみが表示されます。
Ctrl+Space を押して、候補リストを表示することもできます。
関連する提案をリストから選択します。
トラブルシューティング
コード補完が機能しない場合は、次のいずれかの理由が考えられます。
省電力モード がオンです（）。 これをオンにすると、エラーハイライト、オンザフライインスペクション、コード補完などのバックグラウンド操作を排除してラップトップの電力消費を最小限に抑えられます。
ファイルはコンテンツルート内に存在しないため、コード補完に必要なクラス定義とリソースを取得できません。
コード補完で使用されるシンボル付きのファイルは、 プレーンテキストファイルとしてマークされています。
コード補完で使用されるシンボルを含むサードパーティファイルは、 外部の JavaScript ライブラリとして設定されていません。
補完オプションの収集に時間がかかりすぎる場合、コード補完ポップアップは自動的に表示されないことがあります。 例: コンピューターが別のタスクでビジー状態の場合。 この場合でも、 Ctrl+Space を介して補完ポップアップを手動でアクティブ化できます。