🚀 在 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 键时插入最佳匹配的完成项。这与建议控件是否显示无关。此外,在插入建议后按 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 询问与编码相关的问题,例如如何最好地编码某些内容、如何修复 bug 或其他人的代码如何工作。

开始使用

  1. 安装 GitHub Copilot 扩展

  2. 通过我们的Copilot 快速入门了解关键功能。

提示

如果你还没有 Copilot 订阅,你可以注册 Copilot Free 计划 以免费使用 Copilot,并获得每月完成和聊天互动的限制。

故障排除

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

提示: 有关配置和故障排除 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 的更多信息。对于其他语言,请查阅扩展的文档。