在 VS Code 中试用

Visual Studio Code 提示与技巧

使用本文中的提示和技巧,快速上手并学习如何高效使用 Visual Studio Code。熟悉强大的编辑、代码智能和源代码管理功能,并学习有用的键盘快捷方式。请务必查阅入门用户指南中的其他深入主题,了解更多信息。

如果你刚开始使用,请务必查看VS Code 教程,它将逐步引导你了解主要功能。

如果你尚未安装 Visual Studio Code,请前往下载页面。你可以在在 Linux 上运行 VS CodemacOSWindows 上找到特定平台的设置说明。

喜欢视频吗?你可以观看 VS Code Day 的演讲 Visual Studio Code tips and tricksElevate your VS Code experience

基础

入门

亲手探索 VS Code 的最佳方式是打开欢迎页面,然后选择一个入门指南,进行一次自助式的导览,了解 VS Code 提供的设置步骤、功能和更深入的自定义选项。在你探索和学习的过程中,入门指南会跟踪你的进度。

通过帮助 > 欢迎菜单打开欢迎页面,或从命令面板使用帮助:欢迎命令(⇧⌘P (Windows, Linux Ctrl+Shift+P))。

Welcome page

扩展程序也可以贡献入门指南。你也可以直接从命令面板使用帮助:打开入门指南...命令(⇧⌘P (Windows, Linux Ctrl+Shift+P))打开入门指南。

Open walkthrough command in the Command Palette

如果你想提升代码编辑技巧,请打开交互式编辑器 Playground。试用 VS Code 的代码编辑功能,例如多光标编辑、IntelliSense、代码片段、Emmet 等。

通过帮助 > 编辑器 Playground 菜单打开欢迎页面,或从命令面板使用帮助:交互式编辑器 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

键盘参考表

下载适用于你的平台的键盘快捷方式参考表(macOSWindowsLinux)。

Keyboard Reference Sheet

浮动窗口

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

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

将编辑器选项卡拖出当前 VS Code 窗口,即可在浮动窗口中打开它。或者,使用编辑器选项卡中的上下文菜单选项:移动到新窗口复制到新窗口

集成终端

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

Integrated terminal

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

进一步阅读

切换侧边栏

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

toggle side bar

切换面板

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

toggle panel

禅模式

进入无干扰的禅模式。

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

zen mode

按两次 Esc 退出禅模式。

命令行

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

确保 VS Code 可执行文件位于你的 PATH 中,这样你就可以直接输入 'code' 来启动 VS Code。如果在安装期间将 VS Code 添加到环境变量 PATH 中,请参阅特定平台的设置主题(在 Linux 上运行 VS CodemacOSWindows)。

# 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

如果要为文件类型保留新的语言模式,请使用配置文件关联命令将当前文件扩展名与已安装的语言相关联。

自定义

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

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

更改主题

VS Code 内置了许多颜色主题。使用首选项:颜色主题命令或键盘快捷方式。

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

Preview themes

你可以从 VS Code 扩展市场安装更多主题。选择首选项:颜色主题 > + 浏览附加颜色主题... 命令从市场搜索主题。

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

File icon themes

键映射

你习惯使用其他编辑器的键盘快捷方式吗?你可以安装一个键映射扩展,将你喜爱的编辑器的键盘快捷方式带到 VS Code。使用首选项:键映射命令查看 Visual Studio 市场上的当前列表。

一些更流行的键映射包括

自定义键盘快捷方式

你可以在键盘快捷方式编辑器中查看和自定义键盘快捷方式。使用首选项:打开键盘快捷方式命令或快捷方式打开编辑器。

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

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

keyboard shortcuts

你还可以搜索快捷方式并将自己的键盘快捷方式添加到 keybindings.json 文件中。

customize keyboard shortcuts

详情请参阅Visual Studio Code 键绑定

微调设置

默认情况下,VS Code 显示设置编辑器来查看和编辑设置。你也可以使用打开用户设置 (JSON) 命令编辑底层 settings.json 文件,或通过更改 workbench.settings.editor 设置来更改默认的设置编辑器。

打开用户设置 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

字体连字

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

提示:你需要安装支持字体连字的字体。FiraCode 是 VS Code 团队中流行的一种字体。

font ligatures

自动保存

"files.autoSave": "afterDelay"

你也可以从顶级菜单通过文件 > 自动保存切换自动保存。

保存时格式化

"editor.formatOnSave": true

粘贴时格式化

"editor.formatOnPaste": true

更改 Tab 字符的大小

"editor.tabSize": 4

空格还是 Tab

"editor.insertSpaces": true

渲染空白字符

"editor.renderWhitespace": "all"

文本选择中默认渲染空白字符。

忽略文件/文件夹

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

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

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

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

了解许多其他自定义项

特定语言设置

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

"[languageid]": {

}

提示:你也可以使用配置特定语言设置命令创建特定语言的设置。

language based settings

添加 JSON 验证

对许多文件类型,JSON 验证默认启用。在 settings.json 中创建你自己的 schema 和验证

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

或为在工作区中定义的 schema

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

或使用自定义 schema

"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 设置来配置默认浏览器。

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

"workbench.externalBrowser": "edge"

将多个日志合并到单个视图

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

从输出面板的溢出菜单中选择创建复合日志...

扩展

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

查找扩展

你可以使用多种来源查找扩展

  • 在 VS Code 市场中。
  • 在 VS Code 内的扩展视图中搜索。
  • 查看扩展建议
  • 社区精选扩展列表,例如 awesome-vscode

扩展视图中,选择筛选器控件,然后选择最受欢迎排序依据 > 安装次数

install extensions

扩展建议

扩展视图中,选择筛选器控件,然后选择推荐的查看推荐扩展列表。

show recommended extensions

创建自己的扩展

你有兴趣创建自己的扩展吗?你可以在扩展 API 文档中学习如何创建,特别是查阅关于贡献点的文档。

  • 配置
  • 命令
  • 键盘快捷方式
  • 语言
  • 调试器
  • 语法
  • 主题
  • 代码片段
  • jsonValidation

文件和文件夹

简单文件对话框

通过简单文件对话框,你可以用 VS Code 内更简单的快速选择对话框替换系统默认用于打开和保存文件及文件夹的文件对话框。

设置:files.simpleDialog

Simple File Dialog

提示

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

显示资源管理器视图

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

快速打开

快速搜索和打开文件。

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

Quick Open

提示:输入 ? 查看命令建议。

Quick Open command list

输入诸如 edtterm 之类的命令,后跟一个空格,会显示一个下拉列表。

term command in Quick Open

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

重复按下快速打开键盘快捷方式,即可在最近打开的文件之间快速循环切换。

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

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

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

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

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

显示一个快速选择下拉列表,其中包含文件 > 打开最近使用的列表,显示最近打开的文件夹和工作区,后面跟着文件。

键盘快捷方式: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 会阻止保存文件,以防止覆盖在编辑器外部进行的更改。

若要解决保存冲突,请在通知弹出窗口中选择比较操作,以打开差异编辑器,其中显示磁盘上的文件内容(左侧)与 VS Code 中的内容(右侧)的比较

dirty write

使用编辑器工具栏中的操作来解决保存冲突。你可以接受你的更改,从而覆盖磁盘上的任何更改,或恢复到磁盘上的版本。恢复意味着你的更改将丢失。

注意:文件仍然处于“脏”状态,并且无法保存,直到你选择其中一个操作来解决冲突。

编辑技巧

以下是一些常见的代码编辑功能。如果你更熟悉其他编辑器的键盘快捷方式,请考虑安装一个键映射扩展

提示:你可以在扩展视图中通过将搜索过滤为 @recommended:keymaps 来查看推荐的键映射扩展。

并排编辑

键盘快捷方式:⌘\ (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 设置 将修饰键更改为 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 设置向编辑器添加垂直列标尺,该设置接受一个数组,其中包含你希望显示垂直标尺的列字符位置。

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

Editor rulers in the editor

快速滚动

按住 Alt 键可在编辑器和资源管理器中启用快速滚动。默认情况下,快速滚动使用 5 倍速度乘数,但你可以通过编辑器:快速滚动灵敏度editor.fastScrollSensitivity)设置来控制乘数。

锁定滚动

你可以使用视图:切换编辑器之间锁定滚动命令同步所有可见编辑器的滚动。这意味着当你在一个编辑器中滚动时,所有其他编辑器都会滚动相同的量,从而保持一切对齐。

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 的键盘快捷方式冲突,参见问题 #509。你仍然可以将命令 editor.action.copyLinesUpActioneditor.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 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

您还可以使用“**全部折叠**”(⌘K ⌘0(Windows、Linux Ctrl+K Ctrl+0)和“**全部展开**”(⌘K ⌘J(Windows、Linux Ctrl+K Ctrl+J)折叠/展开编辑器中的所有区域。

您可以使用“**折叠所有块注释**”(⌘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

您可以使用“**转到**”>“**后退**”命令或 ⌃-(Windows Alt+Left,Linux Ctrl+Alt+-返回到上一个位置。

当您将鼠标悬停在类型上时,如果按住 Ctrl(在 macOS 上按住 Cmd),还可以看到类型定义。

转到引用

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

peek references

查找所有引用视图

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

重命名符号

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

rename symbol

搜索和修改

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

search and modify

.eslintrc.json

安装 ESLint 扩展。根据您的偏好配置 linter。请查阅 ESLint 规范以了解其 lint 规则和选项的详细信息。

以下是使用 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

代码片段

创建自定义代码片段

文件 > 首选项 > **配置代码片段**,选择语言,然后创建一个代码片段。

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

有关更多详细信息,请参阅创建您自己的代码片段

Git 集成

键盘快捷方式:⌃⇧G(Windows、Linux Ctrl+Shift+G

VS Code 开箱即用地提供了 Git 集成。您可以从 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: Toggle Git Blame Editor Decoration**”和“**Git: Toggle Git Blame Status Bar Item**”命令,或配置以下设置

了解有关 VS Code 中 Git Blame 支持的更多信息以及如何自定义布局。

差异

在“**源代码管理**”视图中,选择一个文件以打开差异编辑器。或者,选择右上角的“**打开更改**”按钮来比较当前打开的文件。

git diff from source control

视图

差异的默认视图是**并排视图**。

通过选择右上角的“**更多操作**”(...) 按钮,然后选择“**内联视图**”来切换**内联视图**。

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

暂存

暂存文件更改

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

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

git stage all

暂存选中区域

您可以通过在文件中进行文本选择,然后从“**命令面板**”或差异编辑器上下文菜单(右键单击)中选择“**暂存选中区域**”来暂存文件的一部分。

撤消上次提交

选择 (...) 按钮,然后选择“**提交**”>“**撤消上次提交**”来撤消上一次提交。更改将添加到“暂存更改”部分。

undo last commit

查看 Git 输出

VS Code 让您轻松查看实际运行的 Git 命令。当您仍在学习 Git 或调试困难的源代码管理问题时,这会很有帮助。

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

装订线指示器

编辑器在装订线中提供视觉提示,指示更改的位置和类型(添加、更改或删除的行)。有关更多详细信息,请参阅源代码管理文档

git gutter indicators

解决合并冲突

在合并过程中,转到“**源代码管理**”视图(⌃⇧G(Windows、Linux Ctrl+Shift+G)并在差异视图中进行更改。

您可以使用内联 CodeLens 解决合并冲突,它允许您“**接受当前更改**”、“**接受传入更改**”、“**接受双方更改**”和“**比较更改**”。

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

使用命令面板(⇧⌘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

数据检查

可以在“**运行和调试**”视图的“**变量**”部分、将鼠标悬停在编辑器中的源上或使用调试控制台来检查变量。

data inspection

日志点

日志点的工作方式很像断点,但它们在被命中时不会暂停调试器,而是将消息记录到控制台。日志点对于在调试无法修改或暂停的生产服务器时注入日志记录特别有用。

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

Logpoint set in the editor

触发断点

触发断点是指在命中另一个断点后自动启用的断点。当诊断仅在满足特定前置条件后才会发生的故障情况时,它们非常有用。

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

任务运行器

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

自动检测任务

从顶级菜单中选择“**终端**”,运行“**配置任务**”命令,然后选择要运行的任务类型。这会生成一个包含如下内容的 tasks.json 文件。有关更多详细信息,请参阅任务文档

{
  // 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
      }
    }
  ]
}

自动生成偶尔会出现问题。请查阅文档以确保一切正常工作。

从终端菜单运行任务

从顶级菜单中选择“**终端**”,运行“**运行任务**”命令,然后选择要运行的任务。通过运行“**终止任务**”命令来终止正在运行的任务

task runner

为任务定义键盘快捷方式

您可以为任何任务定义键盘快捷方式。在“**命令面板**”(⇧⌘P(Windows、Linux Ctrl+Shift+P)中,选择“**首选项: 打开键盘快捷方式文件**”,将所需的快捷方式绑定到 workbench.action.tasks.runTask 命令,并将“**任务**”定义为 args

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

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

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

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

Filter problems

使用设置 npm.enableRunFromFolder,您可以从文件夹的资源管理器视图上下文菜单中运行 npm 脚本。选中文件夹时,此设置会启用“**在文件夹中运行 NPM 脚本...**”命令。该命令显示此文件夹中包含的 npm 脚本的快速选择列表,您可以选择要作为任务执行的脚本。

便携模式

VS Code 有一个**便携模式**,您可以在其中将设置和数据保留在与安装位置相同的位置,例如在 USB 驱动器上。

Insiders 版本

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

  • 对于早期使用者 - Insiders 包含最新的代码更改,供用户和扩展作者试用。
  • 频繁构建 - 每天都有新构建,包含最新的 bug 修复和功能。
  • 并排安装 - Insiders 与 Stable 版本并行安装,您可以独立使用两者。