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 を起動できます。

ヒント

提案コントロールはキャメルケース(CamelCase)のフィルタリングをサポートしています。つまり、メソッド名の大文字の部分を入力するだけで候補を絞り込むことができます。たとえば、「cra」と入力すると「createApplication」が表示されます。

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

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

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

parameter info

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

補完の種類

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

intellisense icons

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

アイコン 名前 シンボルの種類
メソッドと関数 methodfunctionconstructor
変数 variable
フィールド field
型パラメーター typeParameter
定数 constant
クラス class
インターフェイス interface
構造体 struct
イベント event
演算子 operator
モジュール module
プロパティと属性 property
列挙型 enum
列挙型のメンバー enumMember
リファレンス reference
キーワード keyword
ファイル file
フォルダー folder
color
単位 unit
スニペット プレフィックス snippet
単語 text

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 Open in VS Code Open in VS Code Insiders 設定を使用します。以下の値が設定可能です。

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

ローカリティ ボーナス

提案のソートは、拡張機能の情報や、入力中の現在の単語とどの程度一致しているかによって決まります。さらに、 editor.suggest.localityBonus Open in VS Code Open in VS Code Insiders 設定を使用して、カーソル位置に近い場所に表示される提案の優先度を上げるようエディターに要求することができます。

Sorted By Locality

前のスクリーンショットでは、countcontextcolocated が、それらが現れるスコープ(ループ、関数、ファイル)に基づいてソートされていることがわかります。

提案の選択

デフォルトでは、VS Code は提案リストの最初の項目を事前選択します。別の動作(たとえば、提案リストの中で最も最近使用された項目を常に選択するなど)を希望する場合は、 editor.suggestSelection Open in VS Code Open in VS Code Insiders 設定を使用できます。

指定可能な editor.suggestSelection Open in VS Code Open in VS Code Insiders の値は以下の通りです

  • first - (デフォルト)常にリストの最上部にある項目を選択します。
  • recentlyUsed - 以前に使用された項目が選択されます。ただし、プレフィックス(入力して選択)によって別の項目が選択される場合はそちらが優先されます。
  • recentlyUsedByPrefix - 以前にその提案を補完したときのプレフィックスに基づいて項目を選択します。

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

「入力して選択(Type to select)」とは、現在のプレフィックス(おおむねカーソルの左側のテキスト)を使用して提案をフィルタリングおよびソートすることを意味します。これが行われ、その結果が recentlyUsed の結果と異なる場合、こちらが優先されます。

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

提案内のスニペット

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

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

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

コマンド キーバインド
editor.action.triggerSuggest ⌃Space(Windows、Linux では Ctrl+Space
toggleSuggestionDetails ⌃Space(Windows、Linux では Ctrl+Space
toggleSuggestionFocus ⌃⌥Space(Windows、Linux では Ctrl+Alt+Space
ヒント

IntelliSense に関連するキーボード ショートカットは他にもたくさんあります。デフォルトのキーボード ショートカットファイル > ユーザー設定 > キーボード ショートカット)を開き、"suggest" で検索してください。

AI による補完機能の強化

GitHub Copilot は、エディターでの入力中にコーディングの提案を提供します。また、何かをコーディングする最適な方法、バグの修正方法、他の人が書いたコードの仕組みなど、コーディングに関する質問を Copilot に尋ねることもできます。

始めるために

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

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

ヒント

まだ Copilot のサブスクリプションをお持ちでない場合は、Copilot Free プランに登録することで、無料で Copilot を使用し、月ごとのインライン提案と AI クレジットの枠を受け取ることができます。

トラブルシューティング

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

注意

非常に大規模なワークスペースでは、パフォーマンス上の理由から IntelliSense 機能の一部が無効になることがあります。その場合は、 files.exclude Open in VS Code Open in VS Code Insiders または search.exclude Open in VS Code Open in VS Code Insiders 設定を使用して、大きなフォルダー(node_modules やビルド出力ディレクトリなど)を除外してみてください。

ヒント

JavaScript IntelliSense の設定方法やトラブルシューティングについては、JavaScript のドキュメントを参照してください。

特定の言語拡張機能が VS Code のすべての IntelliSense 機能をサポートしているとは限りません。何がサポートされているかについては、拡張機能の README を確認してください。言語拡張機能に問題があると思われる場合は、通常、VS Code Marketplace からその拡張機能のバグ報告用リポジトリを見つけることができます。拡張機能の「詳細(Details)」ページに移動し、Support(サポート)リンクを選択してください。

次のステップ

IntelliSense は、VS Code の強力な機能のほんの一部にすぎません。詳細については以下をお読みください

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

よくある質問

提案が表示されないのはなぜですか?

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

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

image of IntelliSense showing no useful suggestions

この問題は、JavaScript で型定義(typings)ファイルが不足しているために発生します。一般的な JavaScript ライブラリの多くは定義ファイルを同梱しているか、型定義ファイルを利用できるようになっています。

使用しているライブラリに対応する npm または yarn パッケージがインストールされていることを確認してください。詳細については、JavaScript の使用の記事内の IntelliSense に関するセクションを参照してください。その他の言語については、拡張機能のドキュメントを参照してください。

© . This site is unofficial and not affiliated with Microsoft.