參加你附近的 ,瞭解 VS Code 中的 AI 輔助開發。

IntelliSense

IntelliSense 是一個通用術語,指代各種程式碼編輯功能,包括:程式碼補全、引數資訊、快速資訊和成員列表。IntelliSense 功能有時也被稱為“程式碼完成”、“內容輔助”和“程式碼提示”。

為你的程式語言提供 IntelliSense

Visual Studio Code 為 JavaScript、TypeScript、JSON、HTML、CSS、SCSS 和 Less 提供了開箱即用的 IntelliSense。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 提供不同型別的補全,包括語言伺服器建議、程式碼片段和簡單的基於單詞的文字補全。

圖示 名稱 符號型別
方法和函式 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 補全,即在按下 Tab 鍵時插入最佳匹配的補全項。無論建議控制元件是否顯示,這都有效。此外,在插入一個建議後按下 Tab 鍵會插入下一個最佳建議。

預設情況下,Tab 補全是停用的。使用 editor.tabCompletion 設定來啟用它。存在以下值:

  • off - (預設) Tab 補全被停用。
  • on - Tab 補全對所有建議都啟用,並且重複呼叫會插入下一個最佳建議。
  • onlySnippets - Tab 補全僅插入與當前行字首匹配的靜態程式碼片段。

鄰近度加成

建議的排序取決於擴充套件資訊以及它們與你當前正在輸入的單詞的匹配程度。此外,你可以使用 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 功能,請在該語言擴充套件的倉庫中提出一個 issue。

提示

有關配置和排查 JavaScript IntelliSense 的問題,請參閱 JavaScript 文件

特定的語言擴充套件可能不支援所有的 VS Code IntelliSense 功能。請檢視擴充套件的 README 檔案以瞭解支援哪些功能。如果你認為某個語言擴充套件存在問題,通常可以透過 VS Code Marketplace 找到該擴充套件的 issue 倉庫。導航到擴充套件的詳細資訊頁面,並選擇支援連結。

後續步驟

IntelliSense 只是 VS Code 強大功能之一。繼續閱讀以瞭解更多資訊:

常見問題

為什麼我收不到任何建議?

這可能由多種原因引起。首先,嘗試重啟 VS Code。如果問題仍然存在,請查閱語言擴充套件的文件。對於 JavaScript 特定的故障排除,請參閱 JavaScript 語言主題

為什麼我看不到方法和變數的建議?

image of IntelliSense showing no useful suggestions

這個問題是由 JavaScript 中缺少型別宣告(typings)檔案引起的。大多數常見的 JavaScript 庫都附帶了宣告檔案或有可用的型別宣告檔案。

請確保為你正在使用的庫安裝了相應的 npm 或 yarn 包。在使用 JavaScript 文章中瞭解更多關於 IntelliSense 的資訊。對於其他語言,請查閱擴充套件的文件。