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 をオフにすることができます。IntelliSense のカスタマイズを参照して、VS Code の 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 キーを押すと、次の最適な提案が挿入されます。

既定では、タブ補完は無効になっています。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 機能が不足している場合は、言語拡張機能のリポジトリでイシューをオープンしてください。

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

次のステップ

IntelliSense は VS Code の強力な機能の 1 つにすぎません。さらに詳しく学ぶには、読み進めてください

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

よくある質問

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

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

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

この問題は、JavaScript で型宣言 (型定義) ファイルが見つからないことが原因です。ほとんどの一般的な JavaScript ライブラリには、宣言ファイルが同梱されているか、型宣言ファイルが利用可能です。

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