WebStorm 2024.1 ヘルプ

コード補完

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

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

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

Code completion

基本補完

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

コード補完を呼び出すと、WebStorm はコンテキストを分析し、現在のキャレット位置から到達可能な選択肢を提案します (提案にはライブテンプレートも含まれます)。

基本補完を呼び出す

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

    Completion popup

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

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

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

    Suggestion 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 で定義されているクラス、型、インターフェースの名前に基づいています。

Suggested names for a newly declared variable

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

  1. Ctrl+Alt+S の設定のエディター | 一般 | コード補完ページに移動します。

  2. JavaScript セクションで、変数とパラメーターの名前を提案およびクラスフィールドの名前を提案チェックボックスを選択します。

    該当する場合は、提案されたパラメーター名の型アノテーションの表示を有効にします。

    Enable suggestions for new symbols

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

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

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

  2. Ctrl+Alt+S を押して設定を開き、言語 & フレームワーク | TypeScript を選択します。

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

ステートメント補完

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

完全なメソッド宣言

  • メソッドまたは関数宣言の入力を開始し、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 後置テンプレートの詳細を参照してください。

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

  • 設定ダイアログ (Ctrl+Alt+S) で、エディター | 一般 | 後置補完を開き、後置補完を有効にするチェックボックスを選択します。

  • 接尾辞テンプレートの展開に使用する TabSpaceEnter を選択します。

  • 選択した言語の特定の接尾辞テンプレートを有効 / 無効にします。

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

上書きの補完

親クラスまたはインターフェースからメソッドをオーバーライドして、補完候補のリストからこのメソッドを選択する場合、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

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

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

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

ML 完了を有効にする

  1. Ctrl+Alt+S を押して設定を開き、エディター | 一般 | コード補完を選択します。

  2. 機械学習補完ランキングで、機械学習に基づいてコード補完の候補を並び替えオプションを有効にし、ML 補完を使用する言語を選択します。

    ML-assisted completion settings

関連性マーカーを有効にする

  1. Ctrl+Alt+S を押して設定を開き、エディター | 一般 | コード補完を選択します。

  2. 次のオプションを有効にします。

    • 補完ポップアップで順位の変更箇所に印を付ける : Machine Learning ranking Up および Machine Learning ranking Down アイコンを使用して、提案の関連性が増加しているか減少しているかを示し、その結果、提案が候補リストを上下に移動したことを示します。

    • 補完ポップアップで最も関連性の高い項目に印を付ける : ML relevant proposal アイコンを使用して、リストで最も適切な提案を示します。

    Relevance markers are shown
    Relevance markers are hidden

行全体のコード補完

行全体コード補完は、エディターにコードを入力すると提案を表示します。提案は灰色の斜体で表示されます。提案を受け入れるには、Tab を押します。

Full line completion: JavaScript
Full line completion: TypeScript
Full line completion: CSS

IDE はすべての提案をフォーマットし、必要な括弧と引用符を追加します。

サポートされている各言語には、独自のコードチェックセットが提案されています。未解決の参照チェックなどの最も基本的なチェックは、ほとんどの言語で利用可能であり、IDE が存在しない変数やメソッドを提案しないことを保証します。

行全体補完は自動インポートをサポートし、スマートフィルタリングを使用して、明示的にキャンセルされる傾向のある提案や、承認された直後に削除される傾向のある提案が表示されないようにします。

行全体コード補完の使用を開始する前に、次の点に注意してください。

  • 行全体コード補完は現在リモート開発ではサポートされていません。

  • 行全体コード補完には、64 ビットプロセッサーまたは AVX2(英語) をサポートする x86 プロセッサーを搭載したコンピューターが必要です。

行全体補完を有効にする

  1. Ctrl+Alt+S を押して設定を開き、エディター | 一般 | コード補完を選択します。

  2. 機械学習支援による補完セクションで、Full Line の候補を有効にするを選択し、行全体補完を使用する言語を選択します。

    JavaScript および TypeScript のモデルは WebStorm にバンドルされています。

    Enabling full line code completion

行全体補完は、コンピューターにダウンロードされたモデルを使用してローカルで実行されます。これらのモデルを更新する方法は、モデルのダウンロードドロップダウンリストから選択できます。モデルを自動または手動で更新したり、通知で更新を確認したりできます。

Download model for full line completion

行全体補完を構成する

  1. 提案の上にマウスを移動します。

  2. 表示されるポップアップで、 をクリックし、提案を受け入れるために使用するキー(例: Right)を選択します。

    独自のショートカットを割り当てるには、カスタムを選択します。

    Full line code completion popup
  3. 行全体補完設定にすばやくアクセスするには、ポップアップで をクリックします。

    Full Line completion open: open settings

コード補完の動作の構成

デフォルトの補完動作をカスタマイズするには、設定 Ctrl+Alt+Sエディター | 一般 | コード補完ページに移動し、デフォルトの補完設定を更新します。

補完ポップアップから直接コード補完設定にアクセスするには、 アイコンをクリックして、コード補完設定を選択します。

Opening completion settings

その後、Ctrl+Alt+S の設定のエディター | 一般 | コード補完ページが開きます。

JavaScript コンテキストで完了を調整するには、JavaScript エリアのコントロールを使用します。

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

  1. Ctrl+Alt+S を押して設定を開き、エディター | 一般 | コード補完を選択します。

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

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

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

  • Ctrl+Alt+S を押して設定を開き、エディター | 一般 | コード補完を選択します。

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

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

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

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

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

  1. Ctrl+Alt+S を押して設定を開き、エディター | 一般 | コード補完を選択します。

  2. ドキュメントのポップアップを表示するチェックボックスを選択します。

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

括弧を自動的に挿入する

  1. Ctrl+Alt+S を押して設定を開き、エディター | 一般 | コード補完を選択します。

  2. 可能な場合は丸括弧を自動的に挿入チェックボックスを選択します。

    デフォルトでは、このオプションはオンになっており、関数 / メソッドを完了すると、WebStorm は開き括弧と閉じ括弧のペアを自動的に挿入します。

    Insert parentheses on completion is enabled
    Insert parentheses on completion is disabled

    チェックボックスをオフにすると、括弧の挿入が自動的に抑制されます。

  3. Enter の代わりに開き括弧 ( を使用して、補完リストから選択した項目を適用すると、オプションがオンかオフかに関係なく、括弧が自動的に挿入されます。

    Insert parentheses on completion is disabled. Parentheses are still inserted on completion with an opening brace.

    Enter の代わりに開き括弧 ( を使用して、補完リストから選択した項目を適用するには、スペース、ドット、その他のコンテキスト依存キーを押して選択した候補を挿入するチェックボックスを選択します。詳細については、「特定のキーを使用して提案を挿入する」を参照してください。

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

  1. Ctrl+Alt+S を押して設定を開き、エディター | 一般 | コード補完を選択します。

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

HTML のプレーンテキストの補完を抑制する

HTML コンテキストでは、山括弧括弧を開始せずにプレーンテキストを入力した場合でも、デフォルトで WebStorm が補完候補を表示します。

  • この迷惑な動作をオフにするには、設定ダイアログ (Ctrl+Alt+S) を開き、エディター | 一般 | コード補完に移動して、HTML テキストの入力時にタグ名コード補完の自動ポップアップを有効にするチェックボックスをオフにします。

    Suppress tag completion

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

  1. Ctrl+Alt+S を押して設定を開き、エディター | 一般 | コード補完を選択します。

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

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

    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 許容型に対するオプショナルチェイニングの使用を提案チェックボックスをオフにします。

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

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

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

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

    2. クラスフィールドの名前を提案

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

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

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

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

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

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

      このチェックボックスが選択されていない場合は、メインメニューから表示 | パラメーター情報を選択します。

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

パスの補完

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

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

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

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

    Complete path

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

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

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

トラブルシューティング

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

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

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

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

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

  • 補完オプションの収集に時間がかかりすぎると、コード補完ポップアップが自動的に表示されないことがあります。例: コンピューターが別のタスクでビジー状態の場合。この場合、Ctrl+Space ホットキーを介して手動で補完ポップアップを有効にすることができます。

関連ページ:

JavaScript ライブラリを構成する

言語と IDE のコンテキストでは、ライブラリはファイルまたはファイルのセットです。これらのファイルの関数とメソッドは、編集したプロジェクトコードから WebStorm が取得する関数とメソッドに加えて、WebStorm の内部知識に追加されます。プロジェクトのスコープでは、そのライブラリはデフォルトで書き込み保護されています。WebStorm は、2 つの事前定義された自動生成ライブラリフォルダーを予約します。node_modules プロジェクト package.json のオブジェクトにリストさ...

ライブテンプレート

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

定義と型定義

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

ソースコード階層

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

TypeScript

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

TypeScript

Node インタープリター:このフィールドで、使用する Node.js インタープリターを指定します。プロジェクトエイリアスを選択すると、WebStorm は Node.js ページの Node インタープリターフィールドからプロジェクトの既定のインタープリターを自動的に使用します。ほとんどの場合、WebStorm はプロジェクトの既定のインタープリターを検出し、フィールド自体に入力します。別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、をクリックして新しいインター...