🚀 在 VS Code 中取得

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 建議會在您輸入時彈出。如果您繼續輸入字元,成員清單 (變數、方法等等) 會經過篩選,只包含包含您輸入字元的成員。按下 TabEnter 將會插入選取的成員。

您可以透過輸入 ⌃Space (Windows、Linux Ctrl+Space) 或輸入觸發字元 (例如 JavaScript 中的點字元 (.)),在任何編輯器視窗中觸發 IntelliSense。

提示

建議控制項支援 CamelCase 篩選,這表示您可以輸入方法名稱中大寫的字母,以限制建議。例如,「cra」會顯示「createApplication」。

如果您願意,您可以在輸入時關閉 IntelliSense。請參閱自訂 IntelliSense,以了解如何停用或自訂 VS Code 的 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 提供不同類型的完成,包括語言伺服器建議、程式碼片段,以及以單字為基礎的簡單文字完成。

圖示 名稱 符號類型
method icon 方法和函式 methodfunctionconstructor
variable icon 變數 variable
field icon 欄位 field
type parameter 類型參數 typeParameter
constant 常數 constant
class 類別 class
interface 介面 interface
structure 結構 struct
event 事件 event
operator 運算子 operator
module 模組 module
property 屬性和屬性 property
enumeration icon 值和列舉 valueenum
reference 參考 reference
keyword 關鍵字 keyword
file 檔案 file
folder 資料夾 folder
color 色彩 color
unit 單位 unit
a square with ellipses forming the bottom show snippet prefix 程式碼片段前置詞 snippet
a square with letters abc word completion 單字 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 時插入最佳比對完成。這適用於建議控制項是否顯示。此外,在插入建議後按下 Tab 會插入下一個最佳建議。

預設情況下,索引標籤完成已停用。使用 editor.tabCompletion 設定來啟用它。存在這些值

  • off - (預設) 索引標籤完成已停用。
  • on - 索引標籤完成已針對所有建議啟用,而重複叫用會插入下一個最佳建議。
  • onlySnippets - 索引標籤完成只會插入前置詞符合目前行前置詞的靜態程式碼片段。

區域性獎勵

建議的排序取決於擴充功能資訊,以及它們與您目前輸入的單字的比對程度。此外,您可以使用 editor.suggest.localityBonus 設定,要求編輯器增強出現在游標位置附近的建議。

Sorted By Locality

在先前的螢幕擷取畫面中,您可以看到 countcontextcolocated 是根據它們出現的範圍 (迴圈、函式、檔案) 來排序。

建議選取

預設情況下,VS Code 會預先選取建議清單中的第一個建議。如果您想要不同的行為,例如,一律選取建議清單中最近使用的項目,您可以使用 editor.suggestSelection 設定。

可用的 editor.suggestSelection 值為

  • first - (預設) 一律選取清單中的最上方項目。
  • recentlyUsed - 除非前置詞 (輸入以選取) 選取不同的項目,否則會選取先前使用的項目。
  • recentlyUsedByPrefix - 根據先前已完成這些建議的前置詞選取項目。

選取最近使用的項目非常有用,因為您可以快速插入相同的完成多次。

「輸入以選取」表示目前的前置詞 (大致是游標左邊的文字) 用於篩選和排序建議。當發生這種情況,且其結果與 recentlyUsed 的結果不同時,將會優先考慮。

當使用最後一個選項 recentlyUsedByPrefix 時,VS Code 會記住針對特定前置詞 (部分文字) 選取的項目。例如,如果您輸入 co,然後選取 console,則下次您輸入 co 時,建議 console 將會預先選取。這可讓您快速將各種前置詞對應至不同的建議,例如 co -> consolecon -> const

建議中的程式碼片段

預設情況下,VS Code 會在一個控制項中顯示程式碼片段和完成建議。您可以使用 editor.snippetSuggestions 設定來修改行為。若要從建議控制項中移除程式碼片段,請將值設定為 "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 免費方案,即可免費使用 Copilot,並獲得每月完成次數和聊天互動的限制。

疑難排解

如果您發現 IntelliSense 已停止運作,則語言服務可能未執行。嘗試重新啟動 VS Code,這應該可以解決問題。如果您在安裝語言擴充功能後仍然缺少 IntelliSense 功能,請在語言擴充功能的存放庫中開啟問題。

提示:如需設定和疑難排解 JavaScript IntelliSense,請參閱 JavaScript 文件

特定的語言擴充功能可能不支援所有 VS Code IntelliSense 功能。檢閱擴充功能的 README,以找出支援的功能。如果您認為語言擴充功能有問題,您通常可以透過 VS Code Marketplace 找到擴充功能的問題存放庫。導覽至擴充功能的詳細資料頁面,然後選取支援連結。

後續步驟

IntelliSense 只是 VS Code 強大功能之一。繼續閱讀以深入了解

常見問題

為什麼我沒有收到任何建議?

image of IntelliSense not working

這可能是由各種原因所造成。首先,嘗試重新啟動 VS Code。如果問題仍然存在,請參閱語言擴充功能的文件。如需 JavaScript 特有的疑難排解,請參閱 JavaScript 語言主題

為什麼我沒有看到方法和變數建議?

image of IntelliSense showing no useful suggestions

此問題是由 JavaScript 中遺失類型宣告 (類型定義) 檔案所造成。最常見的 JavaScript 程式庫隨附宣告檔案,或具有可用的類型宣告檔案。

請務必為您使用的程式庫安裝對應的 npm 或 yarn 套件。在使用 JavaScript 文章中深入了解 IntelliSense。對於其他語言,請參閱擴充功能的文件。