WebStorm 2020.2ヘルプ

コード補完

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

補完はサードパーティのコードからのシンボルに対しても機能します。ほとんどの場合、プロジェクトに必要なファイルを追加するだけです。詳しくはJavaScript ライブラリの構成を参照してください。

このセクションでは、コーディングプロセスのスピードアップを可能にするコンテキスト対応コード補完のさまざまなテクニックについて説明します。

ws_react_classname.png

基本補完

基本コード補完は、可視性スコープ内のクラス、メソッド、フィールド、およびキーワードの名前を完成させるのに役立ちます。コード補完を呼び出すと、WebStormはコンテキストを分析し、現在のキャレット位置から到達可能な選択肢を提案します(提案にはライブ・テンプレートも含まれます)。

基本補完を呼び出す

  1. 名前の入力を開始します。WebStormはデフォルトで、入力時に自動的にコード補完ポップアップを表示します。

    Completion popup
    自動補完が無効になっている場合は、Ctrl+Space を押すか、メインメニューからコード | コード補完 | 基本を選択します。

  2. より多くの提案を得るには、Ctrl+Space をもう一度押してください(または Ctrl+Alt+Spaceを押してください)。

  3. 候補リストを絞り込むには、予想される名前またはキーワードの任意の部分を入力するか(途中の文字も使用できます)、ドット区切りの後にコード補完を呼び出します。WebStormは、任意の位置に入力された文字を含む提案を示します。

    Suggestions list narrowed down as you type

次のいずれかの方法でリストから提案を受け入れます

  • Enter を押すか、該当するリストアイテムをダブルクリックして、キャレットの左側に挿入します。

  • Tab を押して、キャレットから右にある文字を置き換えます。

  • Ctrl+Shift+Enter を使用して、現在のコード構成を構文上正しいものにします(括弧のバランス、欠落している中括弧とセミコロンの追加など)。

  • 選択した補完候補を挿入するには、特定の言語とコンテキスト依存のキーを使用します(詳細は完了設定の設定を参照)。

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

  • 文書を素早く検索するには、候補リストから項目を選択して Ctrl+Qを押します。WebStormはドキュメントポップアップでそれのための速いドキュメントを示します。

    Basic completion: documentation look-up
  • より多くのコントロールを持つツールウィンドウでドキュメントを見るために、ドキュメント ポップアップをピンで留めてください。ドキュメントポップアップとドキュメントツールウィンドウを切り替えるには、Ctrl+Q を順番に押します。

  • 選択した提案の定義を表示するには、 Ctrl+Shift+Iを押します。

    Basic completion: definition look-up

コード階層を表示する

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

  1. 型階層を表示するCtrl+H

  2. ビュー呼び出し階層を表示するためのCtrl+Alt+H

  3. メソッド階層を表示するためのCtrl+Shift+H

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

新しい変数とパラメーターの名前の提案

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

デフォルトでは、この機能はオフになっています。オンにするには、設定/環境設定ダイアログ Ctrl+Alt+Sを開き、エディター | 一般 | コード補完に移動して、 JavaScriptセクションの変数名とパラメーター名を提案するチェックボックスを選択します。

Suggested names for a newly declared variable

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

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

  1. jsconfig.jsonまたはtsconfig.jsonファイルを開き、'allowJS' : true を追加します。

  2. 設定/環境設定ダイアログ Ctrl+Alt+Sで、言語およびフレームワーク | TypeScriptに移動します。

  3. 開いたTypeScriptページで、TypeScript 言語サービスチェックボックスが選択されていることを確認します。

ステートメント補完

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

Completing a method declaration and the code constructs inside it
  • メソッド宣言を補完するには、function と入力して Ctrl+Shift+Enterを押します。WebStormは、メソッドの構造全体を作成し、メソッド本体の中にカーソルを置きます。

  • コード構成を補完するには、たとえば ifと入力し、Ctrl+Shift+Enterを押します。WebStormは自動的に必要な句読点を追加し、次の編集ポイントにカーソルを置きます。

ヒッピー補完

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

Hippie completion

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

  1. 最初の文字列を入力し、次のいずれかを実行します。

    • Alt+/ を押すか、コード | コード補完 | 循環的に単語を展開を選択して、キャレットの前に一致する単語を検索します。

    • Alt+Shift+/ を押すか、コード | コード補完 | 循環的に単語を展開 (後方)を選択して、キャレットの後ろにある他の開いているファイルで一致する単語を検索します。

    提案された最初の値が表示され、プロトタイプがソースコードで強調表示されます。

  2. 提案を受け入れるか、Alt キーを押しながら希望の単語が見つかるまで / を押し続けます。

後置コード補完

後置コード補完を使うと、コードを書くときの後方キャレットジャンプを減らすことができます。既にタイプされた式は、ドット、式のタイプ、およびそのコンテキストの後に入力する接尾辞に基づいて別のものに変換できます。

WebStormには一連の事前定義された後置テンプレートが付属しており、JavaScriptとTypeScript用に独自のカスタムテンプレートを定義できます。カスタムテンプレートは、コピー、更新、および削除できます。事前定義されたテンプレートの場合、たとえば、長いキーを短いキーに置き換えるために、それらのポストフィックスのみを変更できます。JavaScript 後置テンプレートの詳細を参照してください。

  • 利用可能な後置テンプレートの完全なリストを表示するには、設定/環境設定ダイアログ Ctrl+Alt+Sエディター | 一般 | 後置補完に移動します。

    後置補完のアクティブ化の詳細を参照してください。

  • 接尾辞テンプレートを展開するには、Tab , Spaceまたは Enter を選択します。

カスタム後置テンプレートを作成する

  1. 設定/環境設定ダイアログ Ctrl+Alt+Sで、エディター | 一般 | 後置補完に移動します。

  2. ツールバーの the Add button をクリックします。表示されるポップアップリストから、TypeScriptのみのテンプレートを作成するか、JavaScriptとTypeScriptの両方のテンプレートを作成するかを選択します。

  3. テンプレートを呼び出すシンボルの組み合わせであるキーwriteなど)を指定し、新しいテンプレートを適用する式のタイプを選択し、ターゲット式を次の形式で入力します: $EXPR$ <target_expression>document.write("The result is: " + $EXPR$ + "");など)。

    テンプレートが適用された後にキャレットを配置する $END$ を追加します。たとえば、次のようになります。

    document.write("The result is: " + $EXPR$ + "$END$");
  4. デフォルトでは、呼び出されたテンプレートが技術的に複数の式に適用できる場合、WebStormは必要な式を選択するように求めます。

    Postfix Completion: select expression

    テンプレートが呼び出されたときにWebStormが最上位の適用可能な式を自動的に変換するようにするには、一番上の式に適用するチェックボックスを選択します。

上書きの補完

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

Completing overrides: generating the method body

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

  1. 設定/環境設定ダイアログ Ctrl+Alt+Sで、言語およびフレームワーク | JavaScriptに移動します。

  2. 開いているJavaScriptページで、補完時にメソッド本体をオーバーライド用に拡張するチェックボックスをオフにします。

タグ、属性、およびプロパティの完成

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

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

Completing HTML tags and attributes
  1. < を押し、タグ名の入力を開始します。WebStormは、現在のコンテキストで適切なタグ名のリストを表示します。

    UpDown のボタンを使ってリストをスクロールします。

  2. Enter を押して、リストから選択を受け入れます。ファイルがスキーマまたはDTDに関連付けられている場合、WebStormはそれに応じて必須属性を自動的に挿入します。

コード補完設定の構成

デフォルトの補完動作をカスタマイズするには、設定/環境設定ダイアログ Ctrl+Alt+Sを開き、エディター | 一般 | コード補完に移動し、コード補完ページでデフォルトの補完設定を更新します。JavaScriptコンテキストで完了を調整するには、JavaScriptエリアのコントロールを使用します。

入力時に候補リストを自動的に表示する

  • 入力時に候補を表示するチェックボックスを選択します。チェックボックスをオフにすると、コード補完を明示的に呼び出す必要があります。これは、Ctrl+Space を基本補完のために、または Ctrl+Shift+Space をスマートな補完のために押すことによって行われます。

    また、単一の候補を自動的に挿入にある補完タイプを選択するだけで、自動的に候補を挿入することもできます。

候補をアルファベット順に表示する

  • 候補をアルファベット順にソートするチェックボックスを選択します。デフォルトでは、チェックボックスはオフにされ、提案は関連性によってソートされます。

  • または、候補リストの右下にある Sort Alphabetically または sort by relevance を使用して、これらのモードを切り替えることもできます。これらのアイコンは、少数のエントリしか含まれていないリストには表示されません。

ケースに関してリストに提案を含める

  • 大/小文字を区別するチェックボックスをオンにして、大文字と小文字を区別するか、すべての文字を大文字にするかを選択します。

自動ドキュメント検索をオンにする

  • ドキュメントのポップアップを表示するチェックボックスを選択します。基本補完: 文書検索の詳細を参照してください。

特定のキーを使用して提案を挿入する

  • スペース、ドット、その他のコンテキスト依存キーを押して選択した候補を挿入するチェックボックスを選択します。これらのキーは、補完が呼び出される言語とコンテキストに依存します。

機械学習に基づいて提案を並べ替える

機械学習モデルを使用して、JavaScriptおよびTypeScriptコードのより正確な補完候補を取得できます。

  • 候補リストの上位にある最適なアイテムを表示するには、機械学習に基づいたランク補完の提案チェックボックスを選択します。

JavaScriptの補完を構成する

補完動作の一般的な設定に加えて、いくつかのJavaScript固有のオプションを設定できます。

  • WebStormは、タイプに関係なく、シンボルの補完を提案します。このアプローチでは、複雑なケースでは、リストに複数の補完バリアントが表示されます。

    完成をより正確にするには、タイプベース補完のみを選択します。補完リストは、WebStormの推論に強く依存します。その結果、推論が不十分な場合にリストが空のままになることがあります。

  • WebStormは、オプションの連鎖演算子 (?)(英語)を使用してシンボルの補完を提案します。

    この動作を抑制するには、null 許容型の Optional チェーンを持つアイテムを提案するチェックボックスをオフにします。

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

    補完時にメソッド本体をオーバーライド用に拡張するチェックボックスをオフにすると、完了時のオーバーライド用のメソッド本体の自動生成が抑制されます。

  • 名前の補完を構成します。

    • 変数名とパラメーター名を提案する : デフォルトでは、チェックボックスはオフになっています。選択すると、WebStormは宣言時に新しい変数とパラメーターの名前を提案します。これらの提案は、プロジェクト、使用しているライブラリ、標準APIで定義されているクラス、タイプ、およびインターフェースの名前に基づいています。

    • クラス・フィールドの名前を提案する

      このオプションはデフォルトでオフになっています。

    • 推奨されるパラメーター名の型アノテーションを追加する : このチェックボックスを選択すると、補完候補ごとにそのタイプに関する情報が提供されます。

      このチェックボックスは、変数名とパラメーター名を提案するチェックボックスが選択されている場合にのみ使用できます。

  • 提案を確認または承認するときにパラメーター情報を表示する方法を構成します。

    • パラメータ情報ポップアップを表示する (ミリ秒) : このチェックボックスを選択すると、エディターに左括弧が入力されたとき、または候補リストからメソッドが選択されたときに、WebStormが使用可能なすべてのメソッドシグネチャーを含むポップアップを自動的に表示します。

      右側のテキストフィールドに、ポップアップウィンドウが表示されるまでの遅延時間(ミリ秒単位)を指定します。

      このチェックボックスが選択されていない場合は、Ctrl+P を使用してパラメータ情報を表示します。

    • 完全なメソッド・シグネチャーを表示する : このチェックボックスをオンにすると、パラメータ情報にメソッド名や返された型などの完全なシグネチャーが表示されます。

パスの完成

このタイプの補完により、ファイルとフォルダーの選択が高速化されます。その目的で使用されるダイアログは、たとえば、外部ツールまたはバージョン管理エンジンのインストールフォルダーを指定したり、Node.jsインタープリターを構成したりするときに、頻繁に呼び出されます。

Completing path
  1. ファイルメニューでファイルを開くを選択するか、パスが必要なフィールドの横にある参照 the Browse button をクリックして、パス選択ダイアログを開きます。

  2. パスフィールドが表示されていることを確認します。フィールドが非表示の場合は、パスを表示リンクをクリックします。

  3. パスを入力してください。WebStormはすぐに必要なディレクトリを見つけることができるリストを提案します。

    入力すると、候補リストが縮小され、一致するパスのみが表示されます。

    Ctrl+Space を押して、候補リストを表示することもできます。

  4. 関連する提案をリストから選択します。

トラブルシューティング

コード補完が機能しない場合は、次のいずれかの理由が考えられます。

  • 省電力モードがオンです(ファイル | 省電力モード)。これをオンにすると、エラー強調表示、オンザフライインスペクション、コード補完などのバックグラウンド操作を排除してラップトップの電力消費を最小限に抑えられます。

  • ファイルがコンテンツ・ルートに存在しないため、コード補完に必要なクラス定義とリソースを取得できません。

  • コード補完で使用される記号付きのファイルは、プレーンテキストファイルとしてマークされています

  • コード補完で使用されるシンボルを含むサードパーティファイルは、外部のJavaScriptライブラリとして設定されていません。

最終更新日: 2020年9月14日

関連ページ:

JavaScriptライブラリを構成する

WebStormでは、ライブラリは、WebStormが編集するプロジェクトコードから取得する関数とメソッドに加えて、WebStormの内部知識に関数とメソッドが追加されたファイルまたはファイルのセットです。プロジェクトの範囲では、そのライブラリはデフォルトで書き込み保護されています。WebStorm...

ライブ・テンプレート

ライブテンプレートを使用して、ループ、条件、さまざまな宣言、印刷ステートメントなどの一般的な構成をコードに挿入します。コードスニペットを展開するには、対応するテンプレートの省略形を入力して を押します。 を押し続けると、テンプレート内の1つの変数から次の変数にジャンプします。 を押して、前の変数...

表示定義

クイック定義ルックアップは、プロジェクトシンボル(クラス、メソッド/関数、フィールド、タグなど)がどこでどのように定義されているかを示します。TypeScriptオブジェクトの場合、WebStormは推論されたタイプも表示します。マークアップ言語の場合、WebStormは指定されたDTDまたはスキー...

ソースコードの階層

WebStormを使用すると、クラス、メソッド、および呼び出しの階層を調べ、ソースファイルの構造を調べることができます。階層の構築:タイプ階層は、クラスの親クラスと子クラスを示します。メソッド階層はメソッドが以下のクラスを示します。定義済み。定義されていません。クラスが抽象クラスでない場合に定義する...

TypeScript

WebStormは、TypeScriptソースコードの開発、実行、デバッグをサポートします。WebStormは.tsおよび.tsxファイルを認識し、追加の手順なしで編集するための幅広いコーディング支援を提供します。TypeScriptファイルはアイコンでマークされています。TypeScript対応の...

JavaScript 後置テンプレート

後置コード補完lets you add template code around an expression you’ve just typed. A template expands when you type its abbreviation (postfix) after a do...