💻 欢迎参加 6 月 3 日 MS Build 上的 VS Code 直播活动。

Visual Studio Code 技巧与窍门

利用本文中的技巧和窍门，快速上手并学习如何高效使用 Visual Studio Code。熟悉强大的编辑、代码智能感知和源代码管理功能，并学习实用的键盘快捷键。请务必探索 入门 和 用户指南 中的其他深度主题以了解更多信息。

如果您是初学者，请务必查看 VS Code 教程，通过分步指南了解关键功能。

如果您尚未安装 Visual Studio Code，请前往 下载 页面。您可以在 在 Linux 上运行 VS Code、macOS 和 Windows 上找到特定平台的安装说明。

更喜欢观看视频？您可以观看 VS Code Day 的演讲 Visual Studio Code 技巧与窍门 或 提升您的 VS Code 体验。

基础知识

入门

探索 VS Code 的最佳方式是打开欢迎页面，然后选择一个演练 (Walkthrough)，进行关于设置步骤、功能和 VS Code 提供的更深层自定义的自助导览。在您探索和学习的过程中，演练会跟踪您的进度。

通过 帮助 (Help) > 欢迎 (Welcome) 菜单打开欢迎页面，或者在命令面板中使用 Help: Welcome 命令（⇧⌘P (Windows, Linux Ctrl+Shift+P)）。

Welcome page

扩展程序也可以提供演练。您也可以通过在命令面板中使用 Help: Open Walkthrough... 命令直接打开演练（⇧⌘P (Windows, Linux Ctrl+Shift+P)）。

Open walkthrough command in the Command Palette

如果您想提高代码编辑技能，请打开 交互式编辑器演练场 (Interactive Editor Playground)。试用 VS Code 的 代码编辑功能，例如多光标编辑、IntelliSense（智能感知）、代码片段、Emmet 等。

通过 帮助 (Help) > 编辑器演练场 (Editor Playground) 菜单打开欢迎页面，或者在命令面板中使用 Help: Interactive Editor Playground 命令（⇧⌘P (Windows, Linux Ctrl+Shift+P)）。

Interactive editor playground

命令面板

根据您当前的上下文访问所有可用命令。

键盘快捷键: ⇧⌘P (Windows, Linux Ctrl+Shift+P)

Command Palette

提示

您可以通过用鼠标光标抓住命令面板的上边缘并将其拖到其他地方来移动它。您还可以选择标题栏中的自定义布局控件，然后选择一个预配置的快速输入位置。

Screenshot that shows the Command Palette in a different location, highlighting the Customize Layout control in the title bar and the preconfigured position options.

默认键盘快捷键

命令面板中的许多命令都有关联的默认键盘快捷键。您可以在 命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 中看到命令旁边的默认键盘快捷键。

keyboard references

键盘参考表

下载适用于您平台的键盘快捷键参考表 (macOS, Windows, Linux)。

Keyboard Reference Sheet

浮动窗口

您可以在浮动窗口中打开编辑器、终端或特定视图，例如将编辑器移动到显示器上的其他位置，甚至移动到另一台显示器上。

Screenshot that shows the OS desktop with VS Code window and a CSV file opened in a floating window.

将编辑器标签页从当前的 VS Code 窗口中拖出，即可在浮动窗口中打开它。或者，使用编辑器标签页上下文菜单中的 移动到新窗口 (Move into New Window) 或 复制到新窗口 (Copy into New Window) 选项。

集成终端

键盘快捷键: ⌃` (Windows, Linux Ctrl+`)

Integrated terminal

您可以从下拉列表中选择另一个终端 Shell。根据您的操作系统和系统配置，您可能会看到不同的 Shell 列表。

进一步阅读

切换侧边栏

键盘快捷键: ⌘B (Windows, Linux Ctrl+B)

toggle side bar

切换面板

键盘快捷键: ⌘J (Windows, Linux Ctrl+J)

toggle panel

禅模式 (Zen mode)

进入无干扰的禅模式。

键盘快捷键: ⌘K Z (Windows, Linux Ctrl+K Z)

zen mode

按两次 Esc 退出禅模式。

命令行

VS Code 拥有强大的命令行界面 (CLI)，使您能够自定义编辑器的启动方式以支持各种场景。例如，您可以从命令行启动 VS Code 以打开差异编辑器来比较两个文件。

确保 VS Code 二进制文件在您的路径中，这样您只需输入 'code' 即可启动 VS Code。如果 VS Code 在安装期间未添加到您的环境变量路径中，请查看特定平台的设置主题（在 Linux 上运行 VS Code, macOS, Windows）。

# open code with current directory
code .

# open the current directory in the most recently used code window
code -r .

# create a new window
code -n

# change the language
code --locale=es

# open diff editor
code --diff <file1> <file2>

# open file at specific line and column <file:line[:character]>
code --goto package.json:10:5

# see help options
code --help

# disable all extensions
code --disable-extensions .

.vscode 文件夹

特定于工作区的配置文件位于工作区根目录的 .vscode 文件夹中。例如，用于 任务运行器 的 tasks.json 和用于 调试器 的 launch.json。

状态栏

错误和警告

键盘快捷键: ⇧⌘M (Windows, Linux Ctrl+Shift+M)

快速跳转到项目中的错误和警告。

使用 F8 或 ⇧F8 (Windows, Linux Shift+F8) 循环浏览错误

errors and warnings

您可以按类型（'信息'、'错误'、'警告'）或匹配文本过滤问题列表。

更改语言模式

状态栏中的语言模式指示与活动编辑器关联的语言（例如 Markdown、Python 等）。您可以通过选择状态栏中的语言模式指示器或使用键盘快捷键来更改当前编辑器的语言模式。

键盘快捷键: ⌘K M (Windows, Linux Ctrl+K M)

change syntax

如果您想为文件类型保留新的语言模式，请使用 配置...的文件关联 (Configure File Association for) 命令将当前文件扩展名与已安装的语言关联起来。

自定义

有很多选项可以自定义 VS Code 以满足您的偏好

  • 更改主题
  • 更改键盘快捷键
  • 调整设置
  • 添加 JSON 验证
  • 创建代码片段
  • 安装扩展

更改主题

VS Code 自带许多内置的 颜色主题。使用 首选项: 颜色主题 (Preferences: Color Theme) 命令或使用键盘快捷键。

键盘快捷键: ⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T)

Preview themes

您可以从 VS Code 扩展 市场 安装更多主题。选择 首选项: 颜色主题 (Preferences: Color Theme) > + 浏览其他颜色主题... (+ Browse Additional Color Themes...) 命令以在市场中搜索主题。

此外，您还可以安装和更改文件图标主题。

File icon themes

键盘映射

您习惯使用其他编辑器的键盘快捷键吗？您可以安装键盘映射扩展，将您最喜欢的编辑器的键盘快捷键带到 VS Code。使用 首选项: 键盘映射 (Preferences: Keymaps) 命令在 Visual Studio 市场 上查看当前列表。

一些比较流行的键盘映射包括

自定义您的键盘快捷键

您可以在 键盘快捷键 (Keyboard Shortcuts) 编辑器中查看和自定义键盘快捷键。使用 首选项: 打开键盘快捷键 (Preferences: Open Keyboard Shortcuts) 命令或使用快捷键打开编辑器。

键盘快捷键: ⌘K ⌘S (Windows, Linux Ctrl+K Ctrl+S)

选择铅笔图标或对特定条目按 Enter 键来编辑键盘快捷键。使用搜索字段过滤列表。

keyboard shortcuts

您也可以搜索快捷键并将自己的快捷键添加到 keybindings.json 文件中。

customize keyboard shortcuts

查看更多信息请参考 Visual Studio Code 的键绑定。

调整设置

默认情况下，VS Code 显示设置编辑器以查看和编辑设置。您也可以通过使用 打开用户设置 (JSON) (Open User Settings (JSON)) 命令，或使用 workbench.settings.editor 在 VS Code 中打开 在 VS Code Insiders 中打开 设置来更改默认设置编辑器，从而编辑基础的 settings.json 文件。

打开用户设置 settings.json

键盘快捷键: ⌘, (Windows, Linux Ctrl+,)

更改各种 UI 元素的字体大小

// Main editor
"editor.fontSize": 18,
// Terminal panel
"terminal.integrated.fontSize": 14,
// Output panel
"[Log]": {
    "editor.fontSize": 15
}

更改缩放级别

"window.zoomLevel": 5

字体连字 (Font ligatures)

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true

提示：您需要安装支持字体连字的字体。FiraCode 是 VS Code 团队常用的一种字体。

font ligatures

自动保存

"files.autoSave": "afterDelay"

您也可以通过顶级菜单 文件 (File) > 自动保存 (Auto Save) 切换自动保存。

保存时格式化

"editor.formatOnSave": true

粘贴时格式化

"editor.formatOnPaste": true

更改 Tab 字符的大小

"editor.tabSize": 4

空格或制表符

"editor.insertSpaces": true

呈现空白字符

"editor.renderWhitespace": "all"

默认情况下，在文本选择中会呈现空白字符。

忽略文件 / 文件夹

从编辑器窗口中移除这些文件 / 文件夹。

"files.exclude": {
    "somefolder/": true,
    "somefile": true
}

从搜索结果中移除这些文件 / 文件夹。

"search.exclude": {
    "someFolder/": true,
    "somefile": true
}

了解许多 其他自定义设置。

特定语言设置

您可以使用语言标识符为特定语言设置范围。您可以在 语言标识符 参考中找到常用语言 ID 的列表。

"[languageid]": {

}

提示：您也可以使用 配置语言特定设置 (Configure Language Specific Settings) 命令创建特定语言的设置。

language based settings

添加 JSON 验证

许多文件类型默认启用 JSON 验证。在 settings.json 中创建您自己的模式和验证

"json.schemas": [
    {
        "fileMatch": [
            "bower.json"
        ],
        "url": "https://json.schemastore.org/bower"
    }
]

或者为您的工作区中定义的模式

"json.schemas": [
    {
        "fileMatch": [
            "**/foo.json"
        ],
        "url": "./myschema.json"
    }
]

或者使用自定义模式

"json.schemas": [
    {
        "fileMatch": [
            "/.myconfig"
        ],
        "schema": {
            "type": "object",
            "properties": {
                "name" : {
                    "type": "string",
                    "description": "The name of the entry"
                }
            }
        }
    }
]

查看更多信息请参考 JSON 文档。

配置默认浏览器

在 VS Code 中，您可以 Ctrl+单击（macOS 上为 Cmd+单击）链接以在默认浏览器中打开它。您可以通过设置 workbench.externalBrowser 在 VS Code 中打开 在 VS Code Insiders 中打开 设置 来配置默认浏览器。

将浏览器可执行文件的完整路径指定为设置值。或者，为确保在不同设备上正常工作，您也可以使用浏览器别名，例如 edge、chrome 或 firefox。

"workbench.externalBrowser": "edge"

将多个日志合并到一个视图中

输出面板显示各种服务的输出。每个服务通常都有自己的日志。要分析来自多个服务的相关日志信息，您可以将多个日志合并为一个复合日志。

从输出面板的溢出菜单中选择 创建复合日志... (Create Compound Log...)。

扩展

键盘快捷键: ⇧⌘X (Windows, Linux Ctrl+Shift+X)

查找扩展

您可以使用多个来源来查找扩展

  • 在 VS Code 市场 中。
  • 在 扩展 (Extensions) 视图中直接在 VS Code 内搜索。
  • 查看扩展建议
  • 社区策划的扩展列表，例如 awesome-vscode。

查找热门扩展

在 扩展 (Extensions) 视图中，选择 过滤器 (Filter) 控件，然后选择 最受欢迎 (Most Popular) 或 排序方式 (Sort By) > 安装量 (Install Count)。

install extensions

扩展建议

在 扩展 (Extensions) 视图中，选择 过滤器 (Filter) 控件，然后选择 推荐 (Recommended) 以查看推荐扩展列表。

show recommended extensions

创建您自己的扩展

您有兴趣创建自己的扩展吗？您可以在 扩展 API 文档 中学习如何操作，特别是查看 关于贡献点的文档。

  • 配置
  • 命令
  • 键盘快捷键
  • 语言
  • 调试器
  • 语法
  • 主题
  • snippets
  • jsonValidation

文件和文件夹

简单文件对话框

使用简单文件对话框，您可以用 VS Code 中更简单的快速选择 (Quick Pick) 对话框替换系统用于打开和保存文件及文件夹的默认文件对话框。

设置: files.simpleDialog 在 VS Code 中打开 在 VS Code Insiders 中打开

Simple File Dialog

提示

使用右上角的眼睛图标可以显示或隐藏以点开头的文件和文件夹。

显示资源管理器视图

键盘快捷键: ⇧⌘E (Windows, Linux Ctrl+Shift+E)

快速打开 (Quick Open)

快速搜索并打开文件。

键盘快捷键: ⌘P (Windows, Linux Ctrl+P)

Quick Open

提示：键入 ? 以查看命令建议。

Quick Open command list

键入 edt 或 term 等命令并在其后跟一个空格，会弹出一个下拉列表。

term command in Quick Open

在最近打开的文件之间导航

反复按 快速打开 (Quick Open) 键盘快捷键，可在最近打开的文件之间快速循环。

从快速打开中打开多个文件

您可以通过按 右箭头 从 快速打开 (Quick Open) 中打开多个文件。这会在后台打开当前选定的文件，您可以继续从 快速打开 (Quick Open) 中选择文件。

在最近打开的文件夹和工作区之间导航

打开最近的文件夹或工作区。

键盘快捷键: ⌃R (Windows, Linux Ctrl+R)

显示一个快速选择 (Quick Pick) 下拉列表，其中包含来自 文件 (File) > 打开最近 (Open Recent) 的列表，依次为最近打开的文件夹和工作区，然后是文件。

通过链接创建或打开文件

键盘快捷键: Ctrl+单击（macOS 上为 Cmd+单击）

您可以通过将光标移动到文件链接并按 Ctrl+单击，快速打开文件或图像，或创建新文件。

create and open file

关闭当前打开的文件夹

键盘快捷键: ⌘K F (Windows, Linux Ctrl+K F)

导航历史记录

导航整个历史记录: ⌃Tab (Windows, Linux Ctrl+Tab)

向后导航: ⌃- (Windows Alt+Left, Linux Ctrl+Alt+-)

向前导航: ⌃⇧- (Windows Alt+Right, Linux Ctrl+Shift+-)

navigate history

文件关联

为未被正确检测的文件创建语言关联。例如，许多带有自定义文件扩展名的配置文件实际上是 JSON。

"files.associations": {
    ".database": "json"
}

防止脏写入

当您尝试保存一个无法保存的文件（因为该文件在磁盘上已更改）时，VS Code 会向您显示错误消息。VS Code 会阻止保存文件，以防止覆盖在编辑器之外所做的更改。

要解决保存冲突，请在通知弹出窗口中选择 比较 (Compare) 操作，以打开一个差异编辑器，向您展示磁盘上的文件内容（左侧）与 VS Code 中的内容（右侧）的对比。

dirty write

使用编辑器工具栏中的操作来解决保存冲突。您可以选择 接受 (Accept) 您的更改，从而覆盖磁盘上的任何更改；或者选择 还原 (Revert) 到磁盘上的版本。还原意味着您的更改将会丢失。

注意：文件将保持脏状态，除非您选择上述两个操作之一来解决冲突，否则无法保存。

编辑技巧

这里有一系列常见的代码编辑功能。如果您更习惯于其他编辑器的键盘快捷键，请考虑安装一个 键盘映射扩展。

提示：您可以通过将搜索过滤为 @recommended:keymaps，在 扩展 (Extensions) 视图中查看推荐的键盘映射扩展。

并排编辑

键盘快捷键: ⌘\ (Windows, Linux Ctrl+\)

您也可以拖放编辑器来创建新的编辑器组，并在组之间移动编辑器。

split editors

在编辑器之间切换

键盘快捷键: ⌘1 (Windows, Linux Ctrl+1), ⌘2 (Windows, Linux Ctrl+2), ⌘3 (Windows, Linux Ctrl+3)

navigate editors

多光标选择

要在任意位置添加光标，请使用鼠标选择位置并按 Alt+单击（macOS 上为 Option+单击）。

要在当前位置上方或下方设置光标，请使用

键盘快捷键: ⌥⌘↑ (Windows Ctrl+Alt+Up, Linux Shift+Alt+Up) 或 ⌥⌘↓ (Windows Ctrl+Alt+Down, Linux Shift+Alt+Down)

multi cursor

您可以使用 ⇧⌘L (Windows, Linux Ctrl+Shift+L) 将额外的光标添加到当前选择的所有出现位置。

add cursor to all occurrences of current selection

注意：您还可以通过 editor.multiCursorModifier 在 VS Code 中打开 在 VS Code Insiders 中打开 设置 将应用多个光标的修饰键更改为 Ctrl/Cmd。详情请参阅 多光标修饰键。

如果您不想添加当前选择的所有出现位置，则可以使用 ⌘D (Windows, Linux Ctrl+D) 代替。这只会选择您选定内容之后的下一个出现位置，以便您可以逐个添加选择。

add cursor to next occurrences of current selection one by one

列 (框) 选择

您可以通过按住 Shift+Alt（macOS 上为 Shift+Option）并拖动鼠标来选择文本块。一个单独的光标将被添加到每个选定行的末尾。

Column text selection

您也可以使用 键盘快捷键 来触发列选择。

垂直标尺

您可以使用 editor.rulers 在 VS Code 中打开 在 VS Code Insiders 中打开 设置将垂直列标尺添加到编辑器中，该设置接收一个您想要显示垂直标尺的列字符位置数组。

{
  "editor.rulers": [20, 40, 60]
}

Editor rulers in the editor

快速滚动

按 Alt 键可在编辑器和资源管理器中启用快速滚动。默认情况下，快速滚动使用 5 倍速度倍增器，但您可以使用 编辑器: 快速滚动灵敏度 (Editor: Fast Scroll Sensitivity) ( editor.fastScrollSensitivity 在 VS Code 中打开 在 VS Code Insiders 中打开 ) 设置来控制该倍增器。

锁定滚动

您可以使用 视图: 切换编辑器锁定滚动 (View: Toggle Locked Scrolling Across Editors) 命令跨所有可见编辑器同步滚动。这意味着当您在一个编辑器中滚动时，所有其他编辑器都会滚动相同的量，从而保持一切对齐。

Locked scrolling in the editor

您可以选择仅在按住特定键盘快捷键时激活滚动同步。为 workbench.action.holdLockedScrolling 命令设置键盘快捷键，以临时锁定跨编辑器的滚动。

向上 / 向下复制行

键盘快捷键: ⇧⌥↑ (Windows Shift+Alt+Up, Linux Ctrl+Shift+Alt+Up) 或 ⇧⌥↓ (Windows Shift+Alt+Down, Linux Ctrl+Shift+Alt+Down)

向上/向下复制行 命令在 Linux 上未绑定，因为 VS Code 的默认键盘快捷键会与 Ubuntu 的键盘快捷键冲突，请参阅 Issue #509。您仍然可以将 editor.action.copyLinesUpAction 和 editor.action.copyLinesDownAction 命令设置为您自己喜欢的键盘快捷键。

copy line down

向上和向下移动行

键盘快捷键: ⌥↑ (Windows, Linux Alt+Up) 或 ⌥↓ (Windows, Linux Alt+Down)

move line up and down

收缩 / 扩展选择

键盘快捷键: ⌃⇧⌘← (Windows, Linux Shift+Alt+Left) 或 ⌃⇧⌘→ (Windows, Linux Shift+Alt+Right)

shrink expand selection

您可以在 基础编辑 文档中了解更多信息。

转到文件中的符号

键盘快捷键: ⇧⌘O (Windows, Linux Ctrl+Shift+O)

Find by symbol

您可以通过添加冒号 @: 按类型对符号进行分组。

group symbols by kind

转到工作区中的符号

键盘快捷键: ⌘T (Windows, Linux Ctrl+T)

go to symbol in workspace

大纲视图

文件资源管理器中的大纲视图（默认在底部折叠）显示当前打开文件的符号。

Outline view

您可以按符号名称、类别和在文件中的位置进行排序，从而快速导航到符号位置。

导航到特定行

键盘快捷键: ⌃G (Windows, Linux Ctrl+G)

撤消光标位置

键盘快捷键: ⌘U (Windows, Linux Ctrl+U)

修剪尾随空格

键盘快捷键: ⌘K ⌘X (Windows, Linux Ctrl+K Ctrl+X)

trailing whitespace

文本转换命令

您可以使用命令面板中的 转换 (Transform) 命令将选定文本更改为大写、小写和标题大小写。

Transform text commands

代码格式化

当前选定的源代码: ⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F)

整个文档格式化: ⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I)

code formatting

代码折叠

键盘快捷键: ⌥⌘[ (Windows, Linux Ctrl+Shift+[), ⌥⌘] (Windows, Linux Ctrl+Shift+]) 和 ⌘K ⌘L (Windows, Linux Ctrl+K Ctrl+L)

code folding

您也可以使用 全部折叠 (Fold All) (⌘K ⌘0 (Windows, Linux Ctrl+K Ctrl+0)) 和 全部展开 (Unfold All) (⌘K ⌘J (Windows, Linux Ctrl+K Ctrl+J)) 来折叠/展开编辑器中的所有区域。

您可以使用 折叠所有块注释 (Fold All Block Comments) (⌘K ⌘/ (Windows, Linux Ctrl+K Ctrl+/)) 折叠所有块注释。

选择当前行

键盘快捷键: ⌘L (Windows, Linux Ctrl+L)

导航到文件开头和结尾

键盘快捷键: ⌘↑ (Windows, Linux Ctrl+Home) 和 ⌘↓ (Windows, Linux Ctrl+End)

打开 Markdown 预览

在 Markdown 文件中，使用

键盘快捷键: ⇧⌘V (Windows, Linux Ctrl+Shift+V)

Markdown preview

并排 Markdown 编辑和预览

在 Markdown 文件中，使用

键盘快捷键: ⌘K V (Windows, Linux Ctrl+K V)

预览和编辑器将与您在任一视图中的滚动同步。

side by side Markdown preview

IntelliSense

⌃Space (Windows, Linux Ctrl+Space) 以触发建议小部件。

intellisense

您可以查看可用方法、参数提示、简短文档等。

速览

选择一个符号，然后键入 ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)。或者，您可以使用上下文菜单。

peek

转到定义

选择一个符号，然后键入 F12。或者，您可以使用上下文菜单或 Ctrl+单击（macOS 上为 Cmd+单击）。

go to definition

您可以使用 转到 (Go) > 后退 (Back) 命令或 ⌃- (Windows Alt+Left, Linux Ctrl+Alt+-) 返回到您之前的位置。

当您将鼠标悬停在类型上时，如果按 Ctrl（macOS 上为 Cmd），您也可以查看类型定义。

转到引用 (Go to References)

选择一个符号，然后键入 ⇧F12 (Windows, Linux Shift+F12)。或者，您可以使用上下文菜单。

peek references

查找所有引用视图

选择一个符号，然后键入 ⇧⌥F12 (Windows, Linux Shift+Alt+F12) 打开引用视图，在专用视图中显示您文件的所有符号。

重命名符号

选择一个符号，然后键入 F2。或者，您可以使用上下文菜单。

rename symbol

搜索和修改

除了搜索和替换表达式外，您还可以使用带有捕获组的正则表达式来搜索和重用匹配部分的内容。通过单击 使用正则表达式 (Use Regular Expression) .* 按钮 (⌥⌘R (Windows, Linux Alt+R)) 在搜索框中启用正则表达式，然后编写正则表达式并使用括号定义组。然后，您可以通过在替换字段中使用 $1, $2 等来重用每组匹配的内容。

search and modify

.eslintrc.json

安装 ESLint 扩展。根据您的喜好配置 linter。有关其 linting 规则和选项的详情，请参阅 ESLint 规范。

这是使用 ES6 的配置。

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "classes": true,
      "defaultParams": true
    }
  },
  "rules": {
    "no-const-assign": 1,
    "no-extra-semi": 0,
    "semi": 0,
    "no-fallthrough": 0,
    "no-empty": 0,
    "no-mixed-spaces-and-tabs": 0,
    "no-redeclare": 0,
    "no-this-before-super": 1,
    "no-undef": 1,
    "no-unreachable": 1,
    "no-use-before-define": 0,
    "constructor-super": 1,
    "curly": 0,
    "eqeqeq": 0,
    "func-names": 0,
    "valid-typeof": 1
  }
}

package.json

查看 package.json 文件的 IntelliSense。

package json intellisense

Emmet 语法

支持 Emmet 语法.

emmet syntax

代码片段

创建自定义代码片段

文件 (File) > 首选项 (Preferences) > 配置用户代码片段 (Configure Snippets)，选择语言，然后创建代码片段。

"create component": {
    "prefix": "component",
    "body": [
        "class $1 extends React.Component {",
        "",
        "\trender() {",
        "\t\treturn ($2);",
        "\t}",
        "",
        "}"
    ]
},

查看更多详情请参考 创建您自己的代码片段。

Git 集成

键盘快捷键: ⌃⇧G (Windows, Linux Ctrl+Shift+G)

Git 集成与 VS Code 是“开箱即用”的。您可以从 VS Code 扩展市场 安装其他源代码管理 (SCM) 提供程序。本节介绍 Git 集成，但许多 UI 和手势对于其他 SCM 提供程序也是通用的。

Git blame (代码溯源)

VS Code 在编辑器内和状态栏中以内联方式显示 git blame 信息。将鼠标悬停在状态栏项或内联提示上，即可查看详细的 git blame 信息。

Screenshot that shows Git blame information when hovering over the git blame item in the Status Bar.

要启用或禁用 git blame 信息，请使用 Git: 切换 Git Blame 编辑器修饰 (Git: Toggle Git Blame Editor Decoration) 和 Git: 切换 Git Blame 状态栏项 (Git: Toggle Git Blame Status Bar Item) 命令，或配置这些设置

  • git.blame.statusBarItem.enabled 在 VS Code 中打开 在 VS Code Insiders 中打开 (默认启用)
  • git.blame.editorDecoration.enabled 在 VS Code 中打开 在 VS Code Insiders 中打开

了解更多关于 VS Code 中 git blame 支持 以及如何自定义布局的信息。

差异 (Diffs)

从 源代码管理 (Source Control) 视图中，选择一个文件以打开差异编辑器。或者，选择右上角的 打开更改 (Open Changes) 按钮来对比当前打开的文件。

git diff from source control

视图

差异的默认视图是 并排视图 (side by side view)。

通过选择右上角的 更多操作 (...) 按钮，然后选择 内联视图 (Inline View) 来切换 内联视图。

Screenshot that shows the More Actions menu in the diff editor, highlighting the Inline View menu item

如果您更喜欢将内联视图作为默认视图，请配置 "diffEditor.renderSideBySide": false 设置。

可访问的差异查看器

使用 F7 和 ⇧F7 (Windows, Linux Shift+F7) 浏览差异。这以统一的补丁格式呈现更改。可以使用箭头键导航行，按 Enter 键可跳回差异编辑器和选定行。

diff_review_pane

编辑待处理更改

当您在差异编辑器中查看更改时，您可以直接在差异编辑器的待处理更改一侧进行编辑。

分支

通过状态栏轻松切换 Git 分支。

switch branches

暂存 (Staging)

暂存文件更改

将鼠标悬停在文件数量上，然后选择加号按钮来暂存文件。

选择减号按钮以取消暂存更改。

git stage all

暂存选定内容

您可以通过在文件中进行文本选择，然后从 命令面板 或从差异编辑器上下文菜单（右键单击）中选择 暂存选定范围 (Stage Selected Ranges) 来暂存文件的一部分。

撤消上次提交

选择 (...) 按钮，然后选择 提交 (Commit) > 撤消上次提交 (Undo Last Commit) 以撤消上次提交。更改将添加到“暂存更改”部分。

undo last commit

查看 Git 输出

VS Code 可以轻松查看实际运行的 Git 命令。这在您学习 Git 时或调试困难的源代码控制问题时会很有帮助。

要查看 Git 输出，请在“源代码管理”视图中选择 (...) 按钮，然后选择 显示 Git 输出 (Show Git Output)，或使用 Git: 显示 Git 输出 (Git: Show Git Output) 命令，或使用 切换输出 (Toggle Output) 命令（⇧⌘U (Windows Ctrl+Shift+U, Linux Ctrl+K Ctrl+H)），然后从下拉列表中选择 Git。

装订线指示器

编辑器在装订线中提供视觉提示，指示在哪里以及进行了哪些更改（添加、更改或删除行）。更多详情请参阅 源代码管理文档。

git gutter indicators

解决合并冲突

在合并期间，转到 源代码管理 (Source Control) 视图（⌃⇧G (Windows, Linux Ctrl+Shift+G)）并在差异视图中进行更改。

您可以使用内联 CodeLens 解决合并冲突，这让您可以 接受当前更改 (Accept Current Change), 接受传入更改 (Accept Incoming Change), 接受所有更改 (Accept Both Changes) 以及 比较更改 (Compare Changes)。

Git merge

在源代码管理文档中了解更多关于 解决合并冲突 的信息。

设置 VS Code 为默认合并工具

git config --global merge.tool vscode
git config --global mergetool.vscode.cmd 'code --wait $MERGED'

设置 VS Code 为默认差异工具

git config --global diff.tool vscode
git config --global difftool.vscode.cmd 'code --wait --diff $LOCAL $REMOTE'

将文件与剪贴板内容进行比较

键盘快捷键: ⌘K C (Windows, Linux Ctrl+K C)

使用命令面板中的 文件: 将活动文件与剪贴板进行比较 (File: Compare Active File with Clipboard) 命令，快速将活动文件与剪贴板的内容进行比较（⇧⌘P (Windows, Linux Ctrl+Shift+P)）。

调试

配置调试器

从“运行和调试”视图（⇧⌘D (Windows, Linux Ctrl+Shift+D)）中，选择 创建 launch.json 文件，这将提示您选择与您的项目匹配的环境（Node.js、Python、C++ 等）。这会在您的工作区中生成一个包含调试器配置的 launch.json 文件。

Node.js 支持是内置的，其他环境需要安装相应的语言扩展。更多详情请参阅 调试文档。

configure debugging

断点和单步调试

通过选择 编辑器装订线 或在当前行使用 F9 来切换断点。编辑器装订线中的断点通常显示为红色实心圆点。

调试会话开始后，调试工具栏 会出现在编辑器顶部，使您能够在调试时单步执行或进入代码。更多关于调试操作的信息，请参考 调试文档。

debug

数据检查

变量可以在 运行和调试 (Run and Debug) 视图的 变量 (VARIABLES) 部分进行检查，或者通过将鼠标悬停在编辑器中的源上，或使用调试控制台。

data inspection

日志点

Logpoints（日志点）的作用很像断点，但它们在触发时不会停止调试器，而是向控制台记录一条消息。Logpoints 对于在调试无法修改或暂停的生产服务器时注入日志记录特别有用。

使用左侧编辑器装订线中的 添加日志点 (Add Logpoint) 命令添加日志点，它将显示为“菱形”图标。日志消息为纯文本，但可以包含在大括号 ('{}') 内进行求值的表达式。

Logpoint set in the editor

触发断点

触发断点是一种在另一个断点命中后自动启用的断点。当代码中出现仅在特定先决条件发生后才出现的故障情况时，它们非常有用。

可以通过右键单击字形边距，选择 添加触发断点，然后选择哪个其他断点启用此断点来设置触发断点。

任务运行器 (Task runner)

VS Code 中的任务可以配置为运行脚本和启动进程，以便在 VS Code 中使用这些工具，而无需输入命令行或编写新代码。

自动检测任务

从顶级菜单中选择 终端 (Terminal)，运行 配置任务 (Configure Tasks) 命令，然后选择您想要运行的任务类型。这会生成一个包含如下内容的 tasks.json 文件。更多详情请参阅 任务 (Tasks) 文档。

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "install",
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

自动生成偶尔会出现问题。查看文档以使事情正常工作。

从终端菜单运行任务

从顶级菜单中选择 终端 (Terminal)，运行 运行任务 (Run Task) 命令，并选择您想要运行的任务。通过运行 终止任务 (Terminate Task) 命令来终止正在运行的任务。

task runner

为任务定义键盘快捷键

您可以为任何任务定义键盘快捷键。从 命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 中，选择 首选项: 打开键盘快捷键文件 (Preferences: Open Keyboard Shortcuts File)，将所需的快捷键绑定到 workbench.action.tasks.runTask 命令，并将 任务 (Task) 定义为 args。

例如，要将 Ctrl+H 绑定到 Run tests 任务，请添加以下内容

{
  "key": "ctrl+h",
  "command": "workbench.action.tasks.runTask",
  "args": "Run tests"
}

从资源管理器中将 npm 脚本作为任务运行

在资源管理器视图中，您可以在编辑器中打开脚本、将其作为任务运行，并使用节点调试器启动它（当脚本定义了诸如 --inspect-brk 之类的调试选项时）。点击时的默认操作是打开脚本。要通过单击运行脚本，请将 npm.scriptExplorerAction 在 VS Code 中打开 在 VS Code Insiders 中打开 设置为 run。使用 npm.exclude 在 VS Code 中打开 在 VS Code Insiders 中打开 设置来排除特定文件夹中包含的 package.json 文件中的脚本。

Filter problems

通过 npm.enableRunFromFolder 在 VS Code 中打开 在 VS Code Insiders 中打开 设置，您可以启用从文件夹的资源管理器视图上下文菜单中运行 npm 脚本的功能。该设置在选定文件夹时启用 在文件夹中运行 NPM 脚本... (Run NPM Script in Folder...) 命令。该命令显示包含在此文件夹中的 npm 脚本的快速选择列表，您可以选择要作为任务执行的脚本。

便携模式

VS Code 具有 便携模式 (Portable mode)，允许您将设置和数据保存在与安装位置相同的地方，例如 USB 驱动器上。

Insiders 预览版

Visual Studio Code 团队使用 Insiders 版本来测试 VS Code 的最新功能和错误修复。您也可以通过 在此处下载 来使用 Insiders 版本。

  • 面向尝鲜者 - Insiders 拥有最新的代码更改，供用户和扩展作者试用。
  • 频繁构建 - 每天都有包含最新错误修复和功能的新构建版本。
  • 并排安装 - Insiders 安装在 Stable 版本旁边，允许您独立使用两者。
5/28/2026
English 한국어 中文(简体) 中文(繁體)
© . This site is unofficial and not affiliated with Microsoft.