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 キーを押すと、選択したメンバーが挿入されます。

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

必要に応じて、入力中に 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 キーを押すと、次に最適な候補が挿入されます。

デフォルトでは、タブ補完は無効になっています。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 - GitHub Copilot で AI を使用してコーディングを強化する方法について説明します。

よくある質問

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

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

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

この問題は、JavaScript の型宣言 (型定義) ファイルが不足していることが原因で発生します。最も一般的な JavaScript ライブラリには、宣言ファイルが付属しているか、型宣言ファイルが利用可能です。

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