在 VS Code 中试用

代码导航

Visual Studio Code 拥有一个高生产力代码编辑器,当与编程语言服务结合使用时,它提供了 IDE 的强大功能和文本编辑器的速度。在本主题中,我们将首先介绍 VS Code 的语言智能功能(建议、参数提示、智能代码导航),然后展示核心文本编辑器的强大功能。

快速文件导航

提示: 通过键入 ⌘P (Windows, Linux Ctrl+P)快速打开),您可以通过名称打开任何文件。

在探索项目时,资源管理器非常适合在文件之间导航。然而,当您处理任务时,会发现自己需要在同一组文件之间快速跳转。VS Code 提供了两个强大的命令,通过易于使用的键盘快捷方式在文件内部和文件之间导航。

按住 Ctrl 并按 Tab 可查看编辑器组中所有打开的文件的列表。要打开其中一个文件,再次按 Tab 选择要导航到的文件,然后释放 Ctrl 将其打开。

Quick Navigation

或者,您可以使用 ⌃- (Windows Alt+Left, Linux Ctrl+Alt+-)⌃⇧- (Windows Alt+Right, Linux Ctrl+Shift+-) 在文件和编辑位置之间导航。如果您在同一个文件的不同行之间跳转,这些快捷方式可以轻松地在这些位置之间导航。

面包屑导航

编辑器在其内容上方有一个导航栏,称为面包屑导航。它显示当前位置,并允许您快速在文件夹、文件和符号之间导航。

Breadcrumbs

面包屑始终显示文件路径,并在语言扩展的帮助下显示直到光标位置的符号路径。显示的符号与大纲视图和跳转到符号中的符号相同。

选择路径中的面包屑会显示一个下拉列表,其中包含该级别下的同级项,以便您可以快速导航到其他文件夹和文件。

breadcrumb folder dropdown

如果当前文件类型支持语言符号,您将看到当前符号路径以及同级及以下的其他符号的下拉列表。

breadcrumb symbol dropdown

您可以通过查看 > 显示面包屑开关或通过 breadcrumbs.enabled 设置关闭面包屑。

面包屑自定义

可以自定义面包屑的外观。如果您有非常长的路径,或者只对文件路径或符号路径感兴趣,可以使用 breadcrumbs.filePathbreadcrumbs.symbolPath 设置。两者都支持 onofflast,它们定义了您看到的是路径的哪一部分。默认情况下,面包屑在面包屑左侧显示文件和符号图标,但您可以通过将 breadcrumbs.icons 设置为 false 来删除图标。

面包屑中的符号顺序

您可以使用 breadcrumbs.symbolSortOrder 设置控制面包屑下拉列表中的符号排序方式。

允许的值为

  • position - 文件中的位置(默认)
  • name - 按字母顺序
  • type - 按符号类型顺序

面包屑键盘导航

要与面包屑交互,请使用聚焦面包屑命令或按 ⇧⌘. (Windows, Linux Ctrl+Shift+.)。它将选择最后一个元素并打开一个下拉列表,允许您导航到同级文件或符号。使用 (Windows, Linux Left) (Windows, Linux Right) 键盘快捷方式转到当前元素之前或之后的元素。当下拉列表出现时,开始键入 - 所有匹配的元素都将被高亮显示,并且最佳匹配项将被选中以进行快速导航。

您也可以在不打开下拉列表的情况下与面包屑交互。按 ⇧⌘; (Windows, Linux Ctrl+Shift+;) 聚焦最后一个元素,使用 (Windows, Linux Left) (Windows, Linux Right) 进行导航,然后使用 空格键 在编辑器中显示该元素。

跳转到定义

如果语言支持,您可以通过按 F12 跳转到符号的定义。

如果您按住 Ctrl 并将鼠标悬停在符号上,将出现声明的预览

Ctrl Hover

提示:您可以使用 Ctrl+单击 跳转到定义,或使用 Ctrl+Alt+单击 在侧边打开定义。

跳转到类型定义

某些语言还支持通过从编辑器上下文菜单或命令面板运行跳转到类型定义命令来跳转到符号的类型定义。这将带您到符号类型的定义处。命令 editor.action.goToTypeDefinition 默认没有绑定键盘快捷方式,但您可以添加自己的自定义键绑定

跳转到实现

语言还支持通过按 ⌘F12 (Windows, Linux Ctrl+F12) 跳转到符号的实现。对于接口,这会显示该接口的所有实现者;对于抽象方法,这会显示该方法的所有具体实现。

跳转到符号

您可以使用 ⇧⌘O (Windows, Linux Ctrl+Shift+O) 在文件内部导航符号。键入 : 后,符号将按类别分组。按 箭头并导航到您想要的位置。

Go to Symbol

按名称打开符号

某些语言支持通过 ⌘T (Windows, Linux Ctrl+T) 跳转到跨文件的符号。键入您想要导航到的类型的首字母,无论它包含在哪个文件中,然后按 Enter

Open symbol by name

窥视

我们认为,当您只是想快速检查某事时,最大的上下文切换莫过于此。这就是为什么我们支持窥视编辑器。当您执行查找引用搜索(通过 ⇧F12 (Windows, Linux Shift+F12))或窥视定义(通过 ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10))时,我们会将结果内嵌显示。

Peek References

您可以在窥视编辑器中导航不同的引用并在那里进行快速编辑。单击窥视编辑器的文件名或双击结果列表将在外部编辑器中打开该引用。

提示:此外,如果您按 Escape 键或在窥视编辑器区域双击,窥视窗口将关闭。您可以使用 editor.stablePeek 设置禁用此行为。

括号匹配

只要光标靠近其中一个括号,匹配的括号就会被高亮显示。

Bracket Matching

提示: 您可以使用 ⇧⌘\ (Windows, Linux Ctrl+Shift+\) 跳转到匹配的括号。

括号对彩色化

通过将 editor.bracketPairColorization.enabled 设置为 true,匹配的括号对也可以彩色化。

Bracket Pair Colorization

所有颜色都可以根据主题设置,最多可以配置六种颜色。

您可以使用 workbench.colorCustomizations 在您的设置中覆盖这些主题贡献的颜色

"workbench.colorCustomizations": {
    "editorBracketHighlight.foreground1": "#FFD700",
    "editorBracketHighlight.foreground2": "#DA70D6",
    "editorBracketHighlight.foreground3": "#179fff",
},

引用信息

某些语言(如 C#)支持内联的引用信息,这些信息会实时更新。这使您可以快速分析您的编辑对项目的影响,或者特定方法或属性在整个项目中的使用频率。

Reference information

提示: 通过点击这些标注,可以直接调用窥视引用操作。

提示:可以通过 editor.codeLens 设置来开启或关闭 CodeLens 中显示的引用信息。

重命名符号

某些语言支持跨文件重命名符号。按 F2,然后键入新的名称并按 Enter。该符号的所有使用处都将在所有文件中被重命名。

Rename

错误与警告

警告或错误可以通过配置的任务、丰富的语言服务或持续在后台分析代码的 linter 生成。由于我们热爱无 bug 代码,警告和错误会在多个地方显示。

  • 在状态栏中,显示了所有错误和警告数量的摘要。
  • 您可以单击摘要或按 ⇧⌘M (Windows, Linux Ctrl+Shift+M) 显示问题面板,其中包含所有当前错误的列表。
  • 如果您打开一个包含错误或警告的文件,它们将与文本一起内联显示,并显示在概览标尺中。

errors in problems panel

提示:要在当前文件中循环查看错误或警告,您可以按 ⌥F8 (Windows, Linux Alt+F8)⇧⌥F8 (Windows, Linux Shift+Alt+F8),这将显示一个内联区域,详细说明问题以及可能的代码操作(如果可用)。

Errors and Warnings Inline

代码操作

警告和错误可以提供代码操作(也称为快速修复)来帮助解决问题。它们会在编辑器的左侧边缘以灯泡图标显示。单击灯泡图标将显示代码操作选项或执行该操作。

内嵌提示

某些语言提供内嵌提示:即关于源代码的附加信息,以内联方式呈现。这通常用于显示推断类型。下面的示例显示了显示 JavaScript 变量和函数返回类型的推断类型的内嵌提示。

Inlay hints for inferred types in TypeScript

内嵌提示可以通过 editor.inlayHints.enabled 设置启用/禁用,默认设置为启用。需要诸如 TypeScript 或 Rust 之类的扩展来提供实际的内嵌提示信息。

为了保护您的安全,VS Code 在从编辑器打开外部网站链接之前会显示提示。

Outgoing link prompt

您可以选择在浏览器中继续访问外部网站,或者选择复制链接或取消请求。如果您选择配置受信任的域,一个下拉列表将允许您信任精确的 URL、信任 URL 域名及其子域,或者信任所有域以禁用出站链接保护。

Configure Trusted Domains dropdown

管理受信任的域选项(也可以随时从命令面板访问)将打开受信任的域 JSON 文件,您可以在其中添加、删除或修改受信任的域。

// You can use the "Manage Trusted Domains" command to open this file.
// Save this file to apply the trusted domains rules.
[
  "*.twitter.com"
]

受信任的域 JSON 文件还包含注释,其中包含支持的域格式示例以及默认受信任的域列表,例如 https://*.visualstudio.comhttps://*.microsoft.com

后续步骤

现在您已经了解了编辑器的工作原理,是时候尝试一些其他功能了...

  • 入门视频 - 代码编辑 - 观看关于代码编辑功能的入门视频。
  • 用户界面 - 如果您错过了关于 VS Code 的基本介绍,请查看此内容。
  • 键绑定 - 了解如何根据您的偏好修改键盘快捷方式。
  • 调试 - 这是 VS Code 真正出彩的地方。

常见问题

如何在快速打开中自动选择第二个条目而不是第一个?

使用命令 workbench.action.quickOpenPreviousEditor,您可以在快速打开中自动选择第二个条目。如果您想从列表中选择上一个条目而无需调用另一个键盘快捷方式,这会很有用。

[
  {
    "key": "ctrl+p",
    "command": "workbench.action.quickOpenPreviousEditor"
  },
  {
    "key": "ctrl+p",
    "command": "-workbench.action.quickOpen"
  }
]

如何配置 Ctrl+Tab 在所有组的所有编辑器之间导航?

默认情况下,Ctrl+Tab 在同一编辑器组的编辑器之间导航。如果您想在所有组的所有打开的编辑器之间导航,可以为 workbench.action.quickOpenPreviousRecentlyUsedEditorworkbench.action.quickOpenLeastRecentlyUsedEditor 命令创建键盘快捷方式。

[
  {
    "key": "ctrl+tab",
    "command": "workbench.action.quickOpenPreviousRecentlyUsedEditor",
    "when": "!inEditorsPicker"
  },
  {
    "key": "ctrl+shift+tab",
    "command": "workbench.action.quickOpenLeastRecentlyUsedEditor",
    "when": "!inEditorsPicker"
  }
]

如何在最近使用的编辑器之间导航而无需选择器?

以下是您可以在编辑器中导航而无需打开选择器的命令列表:

命令 命令 ID
打开下一个最近使用的编辑器 workbench.action.openNextRecentlyUsedEditor
打开上一个最近使用的编辑器 workbench.action.openPreviousRecentlyUsedEditor
在组中打开下一个最近使用的编辑器 workbench.action.openNextRecentlyUsedEditorInGroup
在组中打开上一个最近使用的编辑器 workbench.action.openPreviousRecentlyUsedEditorInGroup