IntelliSense

IntelliSense は、コード補完、パラメーター情報、クイック情報、メンバー リストなど、さまざまなコード編集機能の総称です。IntelliSense の機能は、「コード補完」、「コンテンツ アシスト」、「コード ヒント」など、他の名前で呼ばれることもあります。

プログラミング言語ごとの IntelliSense

Visual Studio Code の IntelliSense は、JavaScript、TypeScript、JSON、HTML、CSS、SCSS、Less に標準で提供されています。VS Code は、あらゆるプログラミング言語で単語ベースの補完をサポートしていますが、言語拡張機能をインストールすることで、よりリッチな IntelliSense を持つように構成することもできます。

以下は、Visual Studio Marketplace で最も人気のある言語拡張機能です。下の拡張機能タイルを選択して説明とレビューを読み、どの拡張機能が最適かを判断してください。

IntelliSense の機能

VS Code の IntelliSense 機能は、言語サービスによって提供されます。言語サービスは、言語のセマンティクスとソースコードの分析に基づいて、インテリジェントなコード補完を提供します。言語サービスが補完候補を認識している場合、入力中に IntelliSense の候補がポップアップ表示されます。文字の入力を続けると、メンバー (変数、メソッドなど) のリストが、入力した文字を含むメンバーのみに絞り込まれます。Tab または Enter を押すと、選択したメンバーが挿入されます。

任意のエディター ウィンドウで ⌃Space (Windows, Linux Ctrl+Space) を入力するか、トリガー文字 (JavaScript のドット文字 (.) など) を入力することで、IntelliSense をトリガーできます。

必要に応じて、入力中に IntelliSense をオフにすることもできます。VS Code の IntelliSense 機能を無効にしたりカスタマイズしたりする方法については、IntelliSense のカスタマイズを参照してください。

言語サービスによって提供されるように、⌃Space (Windows, Linux Ctrl+Space) を押すか、> アイコンを選択することで、各メソッドのクイック情報を確認できます。メソッドに付随するドキュメントが横に展開されます。展開されたドキュメントは表示されたままで、リストを移動すると更新されます。これを閉じるには、再度 ⌃Space (Windows, Linux Ctrl+Space) を押すか、閉じるアイコンを選択します。

メソッドを選択すると、パラメーター情報が表示されます。

該当する場合、言語サービスはクイック情報とメソッド シグネチャに基礎となる型を表示します。前のスクリーンショットでは、いくつかの any 型が確認できます。JavaScript は動的であり、型を必要としたり強制したりしないため、any は変数が任意の型になりうることを示唆しています。

補完の種類

次のスクリーンショットの JavaScript コードは、IntelliSense の補完を示しています。IntelliSense は、推論された提案とプロジェクトのグローバル識別子の両方を提供します。推論されたシンボルが最初に表示され、次にグローバル識別子 (abc ワード アイコンで示される) が表示されます。

VS Code の IntelliSense は、言語サーバーの候補、スニペット、単純な単語ベースのテキスト補完など、さまざまな種類の補完を提供します。

IntelliSense のカスタマイズ

設定とキーボード ショートカットで IntelliSense のエクスペリエンスをカスタマイズできます。

設定

以下に示す設定はデフォルト設定です。設定エディター (⌘, (Windows, Linux Ctrl+,)) でこれらの設定を変更できます。

{
    // Controls if quick suggestions should show up while typing
    "editor.quickSuggestions": {
        "other": true,
        "comments": false,
        "strings": false
    },

     // Controls whether suggestions should be accepted on commit characters. For example, in JavaScript, the semi-colon (`;`) can be a commit character that accepts a suggestion and types that character.
    "editor.acceptSuggestionOnCommitCharacter": true,

    // Controls if suggestions should be accepted on 'Enter' - in addition to 'Tab'. Helps to avoid ambiguity between inserting new lines or accepting suggestions. The value 'smart' means only accept a suggestion with Enter when it makes a textual change
    "editor.acceptSuggestionOnEnter": "on",

    // Controls the delay in ms after which quick suggestions will show up.
    "editor.quickSuggestionsDelay": 10,

    // Controls if suggestions should automatically show up when typing trigger characters
    "editor.suggestOnTriggerCharacters": true,

    // Controls if pressing tab inserts the best suggestion and if tab cycles through other suggestions
    "editor.tabCompletion": "off",

    // Controls whether sorting favours words that appear close to the cursor
    "editor.suggest.localityBonus": true,

    // Controls how suggestions are pre-selected when showing the suggest list
    "editor.suggestSelection": "first",

    // Enable word based suggestions
    "editor.wordBasedSuggestions": "matchingDocuments",

    // Enable parameter hints
    "editor.parameterHints.enabled": true,
}

Tab 補完

エディターはタブ補完をサポートしており、Tab を押すと最も一致する補完が挿入されます。これは、候補コントロールが表示されているかどうかに関わらず機能します。また、候補を挿入した後に Tab を押すと、次に最適な候補が挿入されます。

デフォルトでは、タブ補完は無効になっています。editor.tabCompletion 設定を使用して有効にします。以下の値が存在します。

• off - (デフォルト) タブ補完は無効です。
• on - すべての候補に対してタブ補完が有効になり、繰り返し呼び出すと次に最適な候補が挿入されます。
• onlySnippets - タブ補完は、現在の行のプレフィックスに一致する静的なスニペットのみを挿入します。

局所性ボーナス

候補の並べ替えは、拡張機能の情報と、現在入力している単語との一致度合いに依存します。さらに、editor.suggest.localityBonus 設定を使用して、カーソル位置に近い候補を優先するようにエディターに指示できます。

前のスクリーンショットでは、count、context、colocated が出現するスコープ (ループ、関数、ファイル) に基づいて並べ替えられていることがわかります。

候補の選択

デフォルトでは、VS Code は候補リストの最初の候補を事前に選択します。異なる動作を希望する場合、たとえば候補リストで最後に使用された項目を常に選択したい場合は、editor.suggestSelection 設定を使用できます。

利用可能な editor.suggestSelection の値は次のとおりです。

• first - (デフォルト) 常にリストの先頭の項目を選択します。
• recentlyUsed - プレフィックス (入力して選択) が別の項目を選択しない限り、以前に使用された項目が選択されます。
• recentlyUsedByPrefix - それらの候補を補完した以前のプレフィックスに基づいて項目を選択します。

最後に使用された項目を選択すると、同じ補完を複数回すばやく挿入できるため、非常に便利です。

「入力して選択」とは、現在のプレフィックス (おおよそカーソルの左側のテキスト) が候補のフィルタリングと並べ替えに使用されることを意味します。これが発生し、その結果が recentlyUsed の結果と異なる場合、それが優先されます。

最後のオプションである recentlyUsedByPrefix を使用すると、VS Code は特定のプレフィックス (部分的なテキスト) に対してどの項目が選択されたかを記憶します。たとえば、co と入力して console を選択した場合、次に co と入力すると、候補 console が事前に選択されます。これにより、co -> console や con -> const など、さまざまなプレフィックスをさまざまな候補にすばやくマッピングできます。

候補内のスニペット

デフォルトでは、VS Code はスニペットと補完候補を 1 つのコントロールに表示します。この動作は editor.snippetSuggestions 設定で変更できます。候補コントロールからスニペットを削除するには、値を "none" に設定します。スニペットを表示したい場合は、候補に対する順序を指定できます。上部 ("top")、下部 ("bottom")、またはインラインでアルファベット順 ("inline") です。デフォルトは "inline" です。

キーボードショートカット

ここに表示されているキーボード ショートカットは、デフォルトのキーボード ショートカットです。別のキーボード ショートカットを割り当てるには、キーボード ショートカット エディター (⌘K ⌘S (Windows, Linux Ctrl+K Ctrl+S)) を使用します。

AI で補完を強化する

GitHub Copilot は、エディターで入力する際にコーディングの候補を提供します。また、最適なコーディング方法、バグの修正方法、他の人のコードの仕組みなど、コーディング関連の質問を Copilot にすることもできます。

はじめに

1. GitHub Copilot 拡張機能をインストールします。

2. Copilot クイックスタートで主要な機能をご確認ください。

トラブルシューティング

IntelliSense が動作しなくなった場合、言語サービスが実行されていない可能性があります。VS Code を再起動してみてください。これで問題が解決するはずです。言語拡張機能をインストールした後も IntelliSense 機能が利用できない場合は、言語拡張機能のリポジトリで issue を開いてください。

特定の言語拡張機能が、VS Code の IntelliSense 機能のすべてをサポートしていない場合があります。拡張機能の README を確認して、何がサポートされているかを確認してください。言語拡張機能に問題があると思われる場合は、通常、VS Code Marketplace を通じて拡張機能の issue リポジトリを見つけることができます。拡張機能の詳細ページに移動し、[サポート] リンクを選択します。

次のステップ

IntelliSense は、VS Code の強力な機能の 1 つにすぎません。さらに詳しく知るには、以下をお読みください。

• デバッグ - アプリケーションのデバッグを設定する方法について学習します。
• 言語拡張機能の作成 - 新しいプログラミング言語に IntelliSense を追加する拡張機能を作成する方法を学びます。
• VS Code の GitHub Copilot - GitHub Copilot で AI を使用してコーディングを強化する方法を学びます。

よくある質問

なぜ候補が表示されないのですか？

これにはさまざまな原因が考えられます。まず、VS Code を再起動してみてください。問題が解決しない場合は、言語拡張機能のドキュメントを参照してください。JavaScript 固有のトラブルシューティングについては、JavaScript 言語トピックを参照してください。

なぜメソッドや変数の候補が表示されないのですか？

この問題は、JavaScript の型定義 (タイピング) ファイルが見つからないことが原因です。最も一般的な JavaScript ライブラリは、定義ファイルを同梱しているか、型定義ファイルが利用可能です。

使用しているライブラリに対応する npm または yarn パッケージを必ずインストールしてください。IntelliSense の詳細については、JavaScript の操作の記事を参照してください。他の言語については、拡張機能のドキュメントを参照してください。