コード補完

コード補完は WebStorm エディターの重要な機能の 1 つです。補完候補を表示するために、WebStorm はプロジェクトファイルをソースコードで調べ、それらに定義されているクラス、メソッド、関数、変数を特別な内部インデックスに追加します。JSDoc(英語) のコメント、TypeScript 型定義などからの追加情報も、補完を大幅に改善させることができます。

補完はサードパーティのコードのシンボルに対しても機能します。ほとんどの場合、必要なのは、必要なファイルをプロジェクトに追加することだけです。

基本コード補完は、可視性スコープ内のクラス、メソッド、フィールド、キーワードの名前を補完するのに役立ちます。

WebStorm はコンテキストを分析し、現在のキャレット位置から到達可能な選択肢を提案します。候補にはライブテンプレートも含まれます。補完機能は英語以外のキーボードレイアウトでも利用できます。

基本補完を呼び出す

デフォルトでは、WebStorm は入力時に自動的にコード補完ポップアップを表示します。
あるいは、Ctrl+Space を押すか、メインメニューからコード | コード補完 | 基本を選択することもできます。
候補リストを絞り込むには、予想される名前またはキーワードの一部を入力するか (途中の文字も受け入れられます)、ドット区切り文字の後にコード補完を呼び出します。WebStorm は、入力された文字を任意の位置に含む候補を表示します。
CamelCase または snake_case 名の場合、WebStorm は自動的に頭文字だけを認識して照合します。

リストからの提案を受け入れる

Enter を押すか、該当するリストアイテムをダブルクリックして、キャレットの左側に挿入します。
Tab を押して、キャレットから右にある文字を置き換えます。
Ctrl+Shift+Enter を使用して、現在のコード構成を構文上正しいものにします（括弧のバランス、欠落している中括弧とセミコロンの追加など）。
特定の言語とコンテキスト依存のキーを使用して、選択した補完候補を挿入します。詳細については、補完設定の設定を参照してください。

選択した候補の参照を表示する

クイックドキュメント検索を行うには、候補リストから項目を選択し、Ctrl+Q を押します。WebStorm を押すと、ドキュメントポップアップにその項目のクイックドキュメントが表示されます。
あるいは、補完設定の設定に従って、自動ドキュメント検索を有効にすることもできます。
より多くのコントロールを持つツールウィンドウでドキュメントを見るために、ドキュメントポップアップをピンで留めてください。ドキュメントポップアップとドキュメントツールウィンドウを切り替えるには、Ctrl+Q を順番に押します。
選択した提案の定義を表示するには、 Ctrl+Shift+I を押します。

コード階層を表示する

候補リストのエントリを選択し、次のいずれかのショートカットを押します。

型階層を表示する Ctrl+H
呼び出し階層を表示するには Ctrl+Alt+H を使用します。
メソッド階層を表示するための Ctrl+Shift+H。

詳細は、階層の構築を参照してください。

新しいクラスフィールド、変数、パラメーターの名前の提案を表示する

既存のシンボルの呼び出しを補完するだけでなく、WebStorm は、宣言時に新しいクラスフィールド、変数、パラメーターの名前を提案できます。これらの提案は、プロジェクト、使用しているライブラリ、標準 API で定義されているクラス、型、インターフェースの名前に基づいています。

Suggested names for a newly declared variable

デフォルトでは、この機能はオフになっています。

エディター | 一般 | コード補完設定ページ Ctrl+Alt+S に移動します。
JavaScript セクションで、変数とパラメーターの名前を提案およびクラスフィールドの名前を提案チェックボックスを選択します。
該当する場合は、提案されたパラメーター名の型アノテーションの表示を有効にします。

JavaScript の TypeScript 言語サービスからの補完

TypeScript 言語サービス(英語)からの提案を使用して、JavaScript ファイルの基本コード補完を拡張できます。TypeScript の検証から詳細を参照してください。

jsconfig.json または tsconfig.json ファイルを開き、'allowJS' : true を追加します。
Ctrl+Alt+S を押して設定を開き、言語 & フレームワーク | TypeScript を選択します。
開いた TypeScript ページで、TypeScript 言語サービスチェックボックスが選択されていることを確認します。

ステートメント補完

文補完 Ctrl+Shift+Enter を使用して、構文的に正しいコード構成を作成できます。必要な構文要素（括弧、中括弧、セミコロン）を挿入して、次のステートメントの入力を開始できる位置に移動します。

完全なメソッド宣言

メソッドまたは関数宣言の入力を開始し、Ctrl+Shift+Enter を押します。WebStorm はメソッドの構成全体を作成し、メソッド本体内にキャレットを配置します。
または、開き括弧の後で Ctrl+Shift+Enter を押します。

完全なコード構成

コード構造の入力を開始します。たとえば、if と入力して Ctrl+Shift+Enter を押します。WebStorm は必要な句読点を自動的に追加し、次の編集ポイントにキャレットを配置します。

ヒッピー補完

ヒッピー補完は、目に見える範囲でテキストを分析し、現在のコンテキストから提案を生成する補完エンジンです。それは現在開いているファイルのどれからでもどんな単語でも補完するのに役立ちます。

キャレットの文字列を既存の単語に展開する

最初の文字列を入力し、次のいずれかを実行します。
- Alt+/ を押すか、コード | コード補完 | 単語の補完を選択して、キャレットの前に一致する単語を検索します。
- Alt+Shift+/ を押すか、コード | コード補完 | 単語の補完（後方）を選択して、キャレットの後ろにある他の開いているファイルで一致する単語を検索します。
提案された最初の値が表示され、プロトタイプがソースコードでハイライトされます。
提案を受け入れるか、Alt キーを押したまま、必要な単語が見つかるまで \ を押し続けます。

上書きの補完

親クラスまたはインターフェースからメソッドをオーバーライドして、補完候補のリストからこのメソッドを選択する場合、WebStorm は自動的にパラメーターを追加し、super() 呼び出しを生成し、可能であれば型情報を追加します。

Completing overrides: generating the method body

オーバーライドのメソッド本体の生成をオフにする

設定ダイアログ（Ctrl+Alt+S）で、言語 & フレームワーク | JavaScript に移動します。
開いている JavaScript ページで、補完時にメソッド本体をオーバーライド用に展開するチェックボックスをオフにします。

タグ、属性、プロパティの補完

WebStorm は、多くのファイルタイプのタグと属性の名前と値を自動的に補完します。

CSS クラスおよび JSX 内の HTML タグの補完を含む HTML/XHTML。
Emmet サポートが有効になっている、Emmet テンプレートも HTML および XML コンテキストで自動的に補完します。
XML/XSL（名前空間の補完を含む）。
JSON。詳細については、package.json の編集を参照してください。

タグと属性名の補完は、ファイルが関連付けられている DTD またはスキーマに基づいています。スキーマ関連がない場合、WebStorm はファイル内容（タグと属性名とその値）を使用して入力を補完します。

開始 < を入力し、タグ名の入力を開始します。WebStorm は、現在のコンテキストに適したタグ名のリストを表示します。
リストをスクロールするには、Up キーと Down キーを使用します。
Enter を押して、リストから選択を受け入れます。ファイルがスキーマまたは DTD に関連付けられている場合、WebStorm はそれに応じて必須属性を自動的に挿入します。

機械学習による補完ランキング

WebStorm を使用すると、他のユーザーが同様の状況で行った選択に基づいて、補完の提案に優先順位を付けることができます。

ML 補完メカニズムは新しい要素を追加するのではなく、コードから取得した要素を順序付けます。データはどこにも公開されず、ローカルで収集されます。

ML 補完ランキングを有効にする

Ctrl+Alt+S を押して設定を開き、エディター | 一般 | コード補完を選択します。
機械学習支援による補完で、機械学習に基づいてコード補完の候補を並び替えオプションを有効にし、ML 補完を使用する言語を選択します。