现已推出!阅读 10 月份的新功能和修复。

IntelliSense

IntelliSense 是各种代码编辑功能的统称,包括:代码补全、参数信息、快速信息和成员列表。IntelliSense 功能有时也被称为其他名称,例如“代码补全”、“内容辅助”和“代码提示”。

IntelliSense demo

您的编程语言的 IntelliSense

Visual Studio Code IntelliSense 在开箱即用情况下提供对 JavaScript、TypeScript、JSON、HTML、CSS、SCSS 和 Less 的支持。VS Code 支持任何编程语言的基于单词的补全,但也可以通过安装语言扩展来配置更丰富的 IntelliSense。

以下是 市场 中最受欢迎的语言扩展。选择下面的扩展磁贴以阅读描述和评论,以决定哪个扩展最适合您。

IntelliSense 功能

VS Code IntelliSense 功能由语言服务提供支持。语言服务根据语言语义和对源代码的分析提供智能代码补全。如果语言服务知道可能的补全,则 IntelliSense 建议会在您输入时弹出。如果您继续输入字符,成员列表(变量、方法等)将被过滤以仅包含包含您输入的字符的成员。按下 TabEnter 将插入选定的成员。

您可以在任何编辑器窗口中通过键入 ⌃Space (Windows、Linux Ctrl+Space) 或键入触发字符(例如 JavaScript 中的句点字符 (.))来触发 IntelliSense。

intellisense in package json

提示:建议窗口支持 CamelCase 过滤,这意味着您可以键入方法名称中大写字母的字母以限制建议。例如,“cra”将快速显示“createApplication”。

如果您愿意,您可以在输入时关闭 IntelliSense。请参阅下面的 自定义 IntelliSense,了解如何禁用或自定义 VS Code 的 IntelliSense 功能。

如语言服务所提供,您可以通过按下 ⌃Space (Windows、Linux Ctrl+Space) 或单击信息图标来查看每个方法的快速信息。该方法的附带文档现在将扩展到侧面。扩展的文档将保留,并在您浏览列表时更新。您可以通过再次按下 ⌃Space (Windows、Linux Ctrl+Space) 或单击关闭图标来关闭它。

quick info

选择方法后,您将获得参数信息

parameter info

在适用情况下,语言服务将在快速信息和方法签名中显示底层类型。在上图中,您可以看到几个 any 类型。由于 JavaScript 是动态的,不需要也不强制类型,any 表示变量可以是任何类型。

补全类型

下面的 JavaScript 代码说明了 IntelliSense 补全。IntelliSense 给出了推断的建议和项目的全局标识符。推断的符号首先显示,然后是全局标识符(由“Word”图标显示)。

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 体验。

设置

下面显示的设置是默认设置。您可以在 用户和工作区设置 中所述的 settings.json 文件中更改这些设置。

{
    // 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 Completion

默认情况下,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"

键绑定

下面显示的键绑定是默认键绑定。您可以在 keybindings.json 文件中更改这些键绑定,如 键绑定 中所述。

注意: 有很多与 IntelliSense 相关的键绑定。打开 默认键盘快捷键 (文件 > 首选项 > 键盘快捷键) 并搜索 “suggest”。

[
  {
    "key": "ctrl+space",
    "command": "editor.action.triggerSuggest",
    "when": "editorHasCompletionItemProvider && editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+space",
    "command": "toggleSuggestionDetails",
    "when": "editorTextFocus && suggestWidgetVisible"
  },
  {
    "key": "ctrl+alt+space",
    "command": "toggleSuggestionFocus",
    "when": "editorTextFocus && suggestWidgetVisible"
  }
]

使用 AI 增强补全

在 VS Code 中,您可以使用人工智能 (AI) 来增强您的编码,例如代码行或整个函数的建议、快速文档创建以及帮助创建与代码相关的工件(如测试)。

GitHub Copilot 是一款 AI 驱动的代码补全工具,可帮助您更快更智能地编写代码。您可以使用 GitHub Copilot 扩展 在 VS Code 中生成代码,或从它生成的代码中学习。

GitHub Copilot extension in the VS Code Marketplace

您可以在 Copilot 文档 中了解有关如何开始使用 Copilot 的更多信息。

故障排除

如果您发现 IntelliSense 停止工作,则语言服务可能未运行。尝试重新启动 VS Code,这应该可以解决问题。如果您在安装语言扩展后仍然缺少 IntelliSense 功能,请在语言扩展的存储库中打开一个问题。

提示: 有关配置和排查 JavaScript IntelliSense 的问题,请参阅 JavaScript 文档

特定的语言扩展可能不支持所有 VS Code IntelliSense 功能。查看扩展的 README 了解支持的内容。如果您认为语言扩展存在问题,您通常可以通过 VS Code 市场 找到扩展的问题存储库。导航到扩展的详细信息页面,然后选择 支持 链接。

后续步骤

IntelliSense 只是 VS Code 的强大功能之一。继续阅读以了解更多信息

  • JavaScript - 最大限度地利用您的 JavaScript 开发,包括配置 IntelliSense。
  • Node.js - 查看 Node.js 演练中 IntelliSense 的实际示例。
  • 调试 - 了解如何为您的应用程序设置调试。
  • 创建语言扩展 - 了解如何创建为新编程语言添加 IntelliSense 的扩展。
  • VS Code 中的 GitHub Copilot - 了解如何使用 AI 和 GitHub Copilot 来增强您的编码。

常见问题

为什么我没有收到任何建议?

image of IntelliSense not working

这可能是由多种原因造成的。首先,尝试重新启动 VS Code。如果问题仍然存在,请查阅语言扩展的文档。有关 JavaScript 特定的故障排除,请参阅 JavaScript 语言主题

为什么我没有看到方法和变量建议?

image of IntelliSense showing no useful suggestions

此问题是由 JavaScript 中缺少类型声明 (typings) 文件引起的。大多数常见的 JavaScript 库都附带声明文件或提供类型声明文件。请确保为正在使用的库安装相应的 npm 或 yarn 包。了解有关 IntelliSense 的更多信息,请参阅 使用 JavaScript 文章。对于其他语言,请查阅扩展的文档。