WebStorm 2021.1 ヘルプ

コード補完

コード補完は 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

コード階層を表示する

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

  • 型階層を表示する Ctrl+H

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

  • メソッド階層を表示するための 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

完全なメソッド宣言

  • メソッドまたは関数宣言の入力を開始し、Ctrl+Shift+Enter を押します。WebStorm は、メソッドの構成全体を作成し、カーソルをメソッド本体内に置きます。

    Complete a method declaration
  • または、Ctrl+Shift+Enter を後ろに、括弧の後ろに押します。

完全なコード構成

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

    Complete an if statement

ヒッピー補完

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

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

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

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

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

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

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

Hippie completion

後置コード補完

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

WebStorm には、事前定義された接尾辞テンプレートのセットが付属しており、JavaScript および TypeScript 用に独自のカスタムテンプレートを定義できます。

カスタムテンプレートは、コピー、更新、削除できます。あらかじめ定義されたテンプレートの場合は、長いキーを短いものに置き換えるなど、それらのポストフィックスを変更することしかできません。

JavaScript 後置テンプレートの詳細を参照してください。

後置の補完を有効にして設定する

  • 設定 / 環境設定 | エディター | 一般 | 後置補完に移動し、後置補完を有効にするチェックボックスを選択します。

  • 接尾辞テンプレートの展開に使用する TabSpace、または 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 はファイル内容(タグと属性名とその値)を使用して入力を完了します。

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

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

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

Completing HTML tags and attributes

コード補完の動作の構成

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

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

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S を開き、エディター | 一般 | コード補完に進みます。

  2. 入力時に候補を表示するチェックボックスを選択します。チェックボックスがオフの場合、基本補完の場合は Ctrl+Space を、タイプマッチングの補完の場合は Ctrl+Shift+Space を押して、コード補完を明示的に呼び出す必要があります。

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

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

  • 設定 / 環境設定ダイアログ Ctrl+Alt+S を開き、エディター | 一般 | コード補完に進みます。

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

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

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

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

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

  • 設定 / 環境設定ダイアログ Ctrl+Alt+S を開き、エディター | 一般 | コード補完に移動して、ドキュメントのポップアップを表示するチェックボックスを選択します。

    基本補完: ドキュメント検索の詳細を参照してください。

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

  • 設定 / 環境設定ダイアログ Ctrl+Alt+S を開き、エディター | 一般 | コード補完に移動して、スペース、ドット、その他のコンテキスト依存キーを押して選択した候補を挿入するチェックボックスを選択します。これらのキーは、言語と完了が呼び出されるコンテキストによって異なります。

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

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S を開き、エディター | 一般 | コード補完に進みます。

  2. デフォルトでは、JavaScript ファイルと TypeScript ファイルの補完候補は、機械学習アルゴリズムに基づいて関連性によって並べ替えられます。

    ML ベースの並べ替えをオフにするには、Machine Learning に基づいてコード補完の候補を並び替えるチェックボックスをオフにします。

    JavaScript または TypeScript でのみ ML ベースの並べ替えをオフにするには、対応するチェックボックスをオフにします。

  3. WebStorm は、提案を関連性でランク付けし、このランクを示す特別なマーカーを表示できます。

    • 最も関連性の高い提案には、アスタリスク the Most Relevant Proposal icon が付いています。このインジケータを表示するには、補完ポップアップで最も関連性の高いアイテムをマークしますチェックボックスを選択します。

    • Machine Learning ranking Up および Machine Learning ranking Down の矢印アイコンは、提案の関連性が増加しているか減少しているかを示し、提案がリストの上下に移動したことを示します。

      これらのインジケータを表示するには、コード補完ポップアップで変更のあった位置をマークチェックボックスを選択します。

    Relevance markers are shown
    Relevance markers are hidden

JavaScript の補完を構成する

完了動作の一般的な設定に加えて、設定 / 環境設定ダイアログ(Ctrl+Alt+S )のエディター | 一般 | コード補完ページでいくつかの JavaScript 固有のオプションを構成できます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

パスの補完

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

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

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

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

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

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

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

Completing path

トラブルシューティング

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

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

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

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

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

関連ページ:

JavaScript ライブラリを構成する | WebStorm

WebStorm では、ライブラリは、WebStorm が編集するプロジェクトコードから取得する関数とメソッドに加えて、WebStorm の内部知識に関数とメソッドが追加されたファイルまたはファイルのセットです。プロジェクトの範囲では、そのライブラリはデフォルトで書き込み保護されています。WebStorm は、コーディング支援(つまり、コード補完、構文ハイライト、ナビゲーション、ドキュメントの参照)を強化するためにのみライブラリを使用します。ライブラリはプロジェクトの依存関係を管理する方法ではあ...

ライブテンプレート | WebStorm

ライブテンプレートを使用して、ループ、条件、さまざまな宣言、出力ステートメントなどの一般的な構成をコードに挿入します。コードスニペットを展開するには、対応するテンプレートの省略形を入力してを押します。を押し続けると、テンプレート内の 1 つの変数から次の変数にジャンプします。を押して、前の変数に移動します。ライブテンプレートの種類:次のタイプのライブテンプレートが区別されます。シンプルなテンプレートは固定のプレーンテキストのみを含みます。単純なテンプレートを展開すると、そのテキストがソー

表示定義 | WebStorm

クイック定義ルックアップは、プロジェクトシンボル(クラス、メソッド / 関数、フィールド、タグなど)がどこでどのように定義されているかを示します。TypeScript オブジェクトの場合、WebStorm はそれらの推定タイプも表示します。マークアップ言語の場合、WebStorm は指定された DTD またはスキーマからシンボルの定義を取得します。詳細については、HTML および XML を参照してください。WebStorm はポップアップまたはツールチップにシンボル定義を表示できます。ポップアップは...

ソースコード階層 | WebStorm

WebStorm を使用すると、クラス、メソッド、呼び出しの階層を調べ、ソースファイルの構造を調べることができます。階層の構築:タイプ階層は、クラスの親クラスと子クラスを示します。メソッド階層は、メソッドが次のようなクラスを示します。定義済み。定義されていません。クラスが抽象クラスでない場合に定義する必要があります。、呼び出し階層には、メソッドの呼び出し元(スーパータイプ)または呼び出し先(サブタイプ)が表示されます。構築すると、階層ツールウィンドウで階層をすぐに表示して調べることができます。...

TypeScript | WebStorm

WebStorm は、TypeScript ソースコードの開発、実行、デバッグをサポートしています。WebStorm は .ts および .tsx ファイルを認識し、追加の手順なしで編集するための幅広いコーディング支援を提供します。TypeScript ファイルはアイコンでマークされています。TypeScript 対応のコーディング支援には、キーワード、ラベル、変数、パラメーター、関数の補完、エラーと構文のハイライト、フォーマット、多数のコードインスペクションとクイックフィックス、および一般的で Type...

JavaScript 後置テンプレート

後置コード補完では、入力したばかりの式の周囲にテンプレートコードを追加できます。ドットの後に略語(後置)を入力して展開キー(デフォルトでは)を押すか、またはコード補完ポップアップで略語を選択すると、テンプレートが展開されます。WebStorm には、事前定義された接尾辞テンプレートのセットが付属しており、JavaScript および TypeScript 用に独自のカスタムテンプレートを定義できます。カスタムテンプレートの作成を参照してください。JavaScript の事前定義されたテンプレー...