Visual Studio Code 技巧与窍门

利用本文中的技巧和技巧,立即开始学习如何高效使用Visual Studio Code。熟悉强大的编辑、代码智能和源代码控制功能,学习实用的快捷键。请务必深入阅读入指南和用户指南中的其他深入主题,以了解更多信息。

如果你刚入门,务必查看 VS Code 教程,逐步了解关键功能。

如果你还没安装Visual Studio Code,请前往下载页面。你可以在 Linux、macOSWindows 上的 Running VS Code 一文中找到平台特定的设置说明。

喜欢视频?你可以观看 VS Code 日的讲座、Visual Studio Code 技巧和窍门,或者提升你的 VS Code 体验

基础

入门

探索VS Code的最佳实践方式是打开欢迎页面,然后选择一个攻,进行自我导览,了解VS Code提供的设置步骤、功能和更深层次的自定义。随着你不断学习和发现,攻略会追踪你的进度。

“帮助”>“欢迎”菜单打开“欢迎页面,或使用命令面板中的”帮助:欢迎“命令(Windows,Linux Ctrl+Shift+P中的”帮助:欢迎“命令。

欢迎页面

扩展也可以提供攻略。你也可以直接通过命令面板中的“帮助:打开攻略......”命令(⇧⌘P(Windows,Linux Ctrl+Shift+P)打开攻略。

在命令面板中打开通关命令

如果你想提升代码编辑技能,可以打开交互式编辑器游乐场。试试 VS Code 的代码编辑功能,比如多光标编辑、IntelliSense、Snippets、Emmet 等。

请从“帮助>编辑器游乐场”菜单打开欢迎页面,或使用命令调色板中的“帮助:交互编辑器游乐场”命令(⇧⌘P(Windows,Linux Ctrl+Shift+P)。

互动编辑器游乐场

命令调色板

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

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

命令调色板

提示

你可以用鼠标光标抓住命令调色板的顶部边缘并拖动到别处,把它移到另一个位置。你也可以在标题栏选择自定义布局控件,然后选择预设的快速输入位置之一。

截图显示命令调色板在不同位置,突出标题栏的自定义布局控件和预配置的位置选项。

默认键盘快捷键

命令调色板中的许多命令都默认带有快捷键。你可以在命令面板中看到默认的快捷方式和命令并列(⇧⌘P(Windows,Linux Ctrl+Shift+P)。

键盘参考

键盘参考资料

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

键盘参考表

浮动窗

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

截图显示作系统桌面,VS Code窗口和一个CSV文件在浮动窗口中打开。

把编辑器标签从当前的VS Code窗口拖出,在浮动窗口中打开它。或者,使用编辑器标签页中的“移动到新窗口”或“复制到新窗口”上下文选项。

集成终端

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

集成终端

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

延伸阅读:

切换侧边栏

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

切换侧边栏

切换面板

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

拨动面板

禅模式

进入无干扰的禅意模式。

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

禅模式

按两次Esc键即可退出禅模式。

命令行

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

确保 VS Code 的二进制文件在你的路径上,这样你只需输入“code”就能启动 VS Code。如果安装过程中将VS Code添加到环境路径中,请参阅平台特定的设置主题(在Linux、macOS、Windows上运行VS Code)。

# 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

错误与警告

你可以按类型('信息'、'错误'、'警告')或匹配文本来筛选问题列表。

更改语言模式

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

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

更改语法

如果你想持久化某个文件类型的新语言模式,可以使用“配置文件关联”命令,将当前文件扩展名关联到已安装的语言。

定制化

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

  • 换个主题
  • 更换你的键盘快捷键
  • 调整你的设置
  • 添加 JSON 验证
  • 创建片段
  • 安装扩展

换个主题

VS Code 内置了多种色彩主题。请使用偏好设置:色彩主题命令或使用快捷键。

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

预览主题

你可以从VS Code扩展市场安装更多主题。选择偏好设置:颜色主题 > + 浏览其他颜色主题......命令即可在市场中搜索主题。

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

文件图标主题

关键映射

你习惯用其他编辑器的快捷键吗?你可以安装一个Keymap扩展,把你喜欢的编辑器里的快捷键导入VS Code。使用偏好设置:Keymaps命令查看Visual Studio Marketplace上的当前列表。

一些较受欢迎的键映射包括:

自定义你的键盘快捷键

你可以在快捷键编辑器中查看并自定义键盘快捷键。使用偏好设置:打开键盘快捷键命令,或使用快捷方式打开编辑器。

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

选择铅笔图标或在特定条目上按回车键编辑键盘快捷键。通过搜索字段筛选列表。

键盘快捷键

你还可以搜索快捷方式,并添加你自己的键盘快捷键到keybindings.json档案。

自定义键盘快捷键

详见Visual Studio Code的按键绑定

调整你的设置

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

workbench.settings.editor
  • 在VS代码中打开
  • 在VS Code Insiders中开放
环境。

打开用户设置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 团队中很受欢迎的字体。

字体连字

自动保存

"files.autoSave": "afterDelay"

你也可以在顶层菜单中用“文件>自动保存”切换自动保存。

存档格式

"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]": {

}

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

基于语言的环境

添加 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代码中打开
  • 在VS Code Insiders中开放
环境

将浏览器可执行文件的完整路径指定为设置值。另外,为了确保跨设备正常运行,你也可以使用浏览器别名,比如边缘,镀铬,或者火狐.

"workbench.externalBrowser": "edge"

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

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

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

扩展

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

寻找扩展

你可以使用多个来源来寻找扩展:

  • 在VS Code市场
  • 在 VS Code 的扩展视图里搜索。
  • 查看扩展推荐
  • 社区策划的扩展列表,比如 awesome-vscode

扩展视图中,选择筛选控件,然后选择“最受欢迎”或“按安装数量排序>”。

安装扩展

扩展建议

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

显示推荐扩展

创建你自己的扩展

你有兴趣自己开发扩展吗?你可以在扩展API文档中学习如何实现这一点,特别是关于贡献点的文档

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

文件和文件夹

简单文件对话框

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

地点:

files.simpleDialog
  • 在VS代码中打开
  • 在VS Code Insiders中开放

简单文件对话框

提示

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

显示浏览器视图

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

快速开业

快速搜索并打开文件。

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

快速开业

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

快速打开命令列表

输入命令,如EDT术语跟一个空格后会弹出一个下拉列表。

快速开启中的术语命令

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

反复按下快速打开快捷键,快速切换最近打开的文件。

快速打开多个文件

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

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

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

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

显示快速选择下拉菜单,列出文件>打开最近文件,列出最近打开的文件夹和工作区,然后是文件。

快捷键:Ctrl+点击macOS按Cmd+点击

你可以快速打开文件或图片,或者通过将光标移到文件链接,然后按Ctrl+点击创建新文件。

创建并打开文件

关闭当前打开的文件夹

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

航行历史

浏览完整历史:⌃Tab(Windows,Linux Ctrl+Tab

返回导航:⌃-(Windows Alt+左,Linux Ctrl+Alt+-

前进导航:⌃⇧- (Windows Alt+右,Linux Ctrl+Shift+-

导航历史

文件关联

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

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

防止脏写

当你尝试保存一个因为磁盘上有变动而无法保存的文件时,VS Code 会显示错误信息。VS Code 阻止保存文件,以防止在编辑器外部做的更改被覆盖。

要解决存档冲突,请在通知弹窗中选择比较作,打开一个差异编辑器,显示磁盘(左侧)文件内容与VS Code(右侧)中的内容:

肮脏的写作

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

注:文件保持脏质状态,无法保存,除非你选择两个动作中的一个来解决冲突。

剪辑技巧

以下是编辑代码的一些常见功能。如果你对其他编辑器的快捷键更熟悉,可以考虑安装一个键位图扩展

提示:你可以在扩展视图中筛选搜索到@recommended:keymaps.

并排编辑

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

你还可以拖放编辑器来创建新的编辑器组,并在组间移动编辑器。

分割编辑器

编辑间切换

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

导航编辑器

多光标选择

要在任意位置添加光标,用鼠标选择位置,然后用Alt+ClickmacOS上的Option+Click)键。

要将光标置于当前位置的上方或下方,请使用:

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

多光标

你可以在当前选择的所有出现中添加额外的光标,使用 ⇧⌘L(Windows,Linux 的 Ctrl+Shift+L)。

在所有当前选择的出现中添加光标

注意:你也可以把修改键改成 Ctrl/Cmd,以便用

editor.multiCursorModifier
  • 在VS代码中打开
  • 在VS Code Insiders中开放
设置。详情请参见多光标修改器

如果你不想添加当前选择的所有出现次数,可以使用⌘D(Windows,Linux Ctrl+D)。 它只会选择你选择的之后的下一个事件,这样你可以逐个添加选择。

将光标逐一添加到当前选择的下一次出现

列(框)选择

你可以在拖动鼠标时按住Shift+AltmacOS上的Shift+Option)来选择文本块。每行选定的末尾会添加一个独立的光标。

列文本选择

你也可以用快捷键触发列选。

竖尺

你可以用

editor.rulers
  • 在VS代码中打开
  • 在VS Code Insiders中开放
设置,它会在你想要垂直尺的位置上排列一组列字符位置。

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

编辑器中的编辑器尺

快速滚动

按下Alt键可以实现编辑器和资源管理器中的快速滚动。默认情况下,快速滚动使用5倍速度乘数,但你可以通过编辑器控制乘数:快速滚动灵敏度 (

editor.fastScrollSensitivity
  • 在VS代码中打开
  • 在VS Code Insiders中开放

锁定滚动

你可以通过使用“查看:切换锁定在编辑器间滚动”命令来同步所有可见编辑器的滚动。这意味着当你在一个编辑器中滚动时,其他编辑器也会滚动相同数量,保持所有内容对齐。

编辑器中的锁定滚动

你可以选择只在按住特定快捷键时激活滚动同步。为workbench.action.hold锁定滚动命令可暂时锁定跨编辑器滚动。

抄排/下行

键盘快捷键:⇧⌥↑(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.copyLinesUpAction以及editor.action.copyLinesDownAction。切换到你喜欢的快捷键。

收到,收到

上下移动排队

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

上下移动排队

缩小/扩展选择

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

缩小展开选择

你可以在基础编辑文档中了解更多。

前往文件中的符号

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

通过符号查找

你可以通过添加冒号来按类型分组符号,@:.

按种类分组符号

在工作区中访问符号

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

在工作区中访问符号

轮廓视图

文件资源管理器中的轮廓视图(默认收缩在底部)显示当前打开文件的符号。

轮廓视图

你可以按符号名称、类别和文件中的位置排序,方便快速导航到符号位置。

导航到特定线路

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

撤销光标位置

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

装饰后方空白

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

尾部空白

变换文本命令

你可以用命令调色板中的变换命令将所选文本改为大写、小写和标题大小写。

变换文本命令

代码格式化

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

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

代码格式化

码折叠

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

代码折叠

你还可以在编辑器中用 Fold All⌘K ⌘0(Windows,Linux Ctrl+K Ctrl+0)和 Unfold All⌘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 预览

并排 Markdown 编辑与预览

在Markdown文件中,使用

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

预览和编辑器会与你的滚动同步,无论哪种视图。

并排Markdown预览

IntelliSense

⌃空格(Windows,Linux Ctrl+空格来触发建议小部件。

智能感知

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

偷看

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

偷看

前往定义

选择一个符号,然后输入F12。或者,你也可以使用右键菜单或Ctrl+点击(macOS上按Cmd+click)。

前往定义

你可以用“返回>”命令或⌃-(Windows的Alt+Left,Linux的Ctrl+Alt+-回到之前的位置。

当你悬停在类型上时,按CtrlmacOS上是Cmd)也能看到类型定义。

前往参考文献

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

窥视参考

查找所有参考文献视图

选择一个符号,然后输入 ⇧⌥F12(Windows,Linux Shift+Alt+F12),即可打开参考视图,显示你文件的所有符号,并以专用视图显示。

更名符号

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

更名符号

搜索与修改

除了搜索和替换表达式外,你还可以使用正则表达式和捕获组,搜索和重用匹配的部分内容。点击“使用正则表达式”,在搜索框中启用正则表达式 .*按钮(⌥⌘R(Windows,Linux Alt+R),然后写一个正则表达式,并用括号定义组。然后你可以通过以下方式重复利用每个组匹配的内容1美元,2美元替换字段中,等等。

搜索与修改

.eslintrc.json

安装ESLint扩展。配置 随你喜欢,随你怎么用。请参阅ESLint规范以了解其linting规则和选项。

这是使用 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

请参阅IntelliSense获取您的package.json档案。

package JSON Intellisense

Emmet 语法

支持Emmet语法

Emmet 语法

片段

创建自定义片段

文件>偏好设置 >配置片段,选择语言,并创建摘要。

"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集成,但许多界面和手势在其他SCM提供商中也很常见。

推卸责任

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

在状态栏中鼠标悬停在git blame项上时,显示Git责备信息的截图。

要启用或禁用git blame信息,可以使用Git: Toggle Git Blame Editor DecorationGit: Toggle Git Blame Status Bar Item命令,或配置以下设置:

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

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

差异

源控制器视图中,选择一个文件以打开差异编辑器。或者,选择右上角的“打开更改”按钮,以切换当前打开的文件。

git 与源代码控制的差异

观点

差别器的默认视图是并排视图

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

截图显示了差异编辑器中的“更多作”菜单,突出显示了“内嵌视图”菜单项

如果你更喜欢默认内嵌视图,可以配置“diffEditor.renderSideBySide”: false环境。

可访问差分查看器

F7⇧F7(Windows,Linux Shift+F7浏览差异。这以统一的补丁格式呈现变更。可以通过方向键导航行,按下回车键后,在差分编辑器中跳回所选行。

diff_review_pane

编辑待修改

在你查看差异编辑器的变更时,你可以直接在差异编辑器的待处理更改一侧进行编辑。

分支

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

切换分支

舞台设计

舞台文件变更

将鼠标悬停在文件数量上,选择加号按钮来设置文件。

选择减号按钮来解除变化的舞台。

git stage all

舞台选定

你可以通过在文件中选择文本,然后从命令调色板或差别编辑器的右键菜单中选择“阶段选定范围”来暂时分段文件。

撤销上次提交

选择(...)按钮,然后选择提交>撤销最后一次提交以撤销之前的提交。这些变更被添加到“分阶段变更”部分。

撤销上次提交

参见 Git 输出

VS Code 让你很容易看到 Git 命令到底在运行什么。这在你还在学习Git或调试难度源码控制问题时很有帮助。

要查看 Git 输出,请在源控视图中选择 (...) 按钮,然后选择“显示 Git 输出”,再使用 Git: Show Git Output 命令,或使用 Toggle Output 命令(⇧⌘U(Windows Ctrl+Shift+U,Linux Ctrl+K Ctrl+H),然后从下拉菜单中选择 Git

排水沟指示器

编辑器在下文中提供视觉提示,说明何处以及哪些更改(添加、更改或删除了哪些行)。更多细节请参见源代码控制文档

Git 排水沟指示器

解决合并冲突

合并时,进入源代码控制视图(⌃⇧G(Windows,Linux Ctrl+Shift+G),在差异视图中进行修改。

你可以用内嵌的CodeLens解决合并冲突,它允许你接受当前变更接受接收变更、接受两个变更,并比较变更

Git 合并

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

将 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

快速将活动文件与剪贴板内容进行比较:在命令调色板中比较活动文件与剪贴板命令(Windows,Linux Ctrl+Shift+P中。

调试

配置调试器

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

Node.js支持是内置的,其他环境则需要安装相应的语言扩展。更多细节请参见调试文档

配置调试

断点与步入

通过选择编辑边距或当前行的F9键切换断点。编辑页边的断点通常以红色填充圆圈表示。

调试会话开始后,调试工具栏会出现在编辑器顶部,允许你在调试时逐步进入或进入代码。在调试文档中了解更多关于调试动作的信息。

调试

数据检查

变量可以在运行和调试视图的 VARIABLES 部分检查,方法是在编辑器中将鼠标悬停在其源代码上,或使用调试控制台。

数据检查

日志点

日志点的作用类似于断点,但它们不会在被触发时停止调试器,而是向控制台记录消息。日志点在调试无法修改或暂停的生产服务器时注入日志特别有用。

在左侧编辑器的下页用添加Logpoint命令添加Logpoint,它会显示为“菱形”图标。日志消息是纯文本,但可以包含需要在大括号内评估的表达式('{}')。

编辑器中的对口点集

触发断点

触发断点是指一旦触发另一个断点时自动启用的断点。它们在诊断仅在某个前提条件之后才发生的代码故障时非常有用。

触发断点可以通过右键点击字形边缘,选择添加触发断点,然后选择启用该断点的其他断点来设置。

任务快递员

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

自动生成偶尔会出现问题。查看文档,了解如何让系统正常工作。

从终端菜单执行任务

从顶层菜单选择“终端”,执行命令“运行任务”,然后选择你想运行的任务。通过执行“终止任务”命令终止正在运行的任务

任务执行者

为任务定义键盘快捷键

你可以为任何任务定义快捷方式。在命令面板⇧⌘P(Windows,Linux Ctrl+Shift+P)中,选择偏好设置:打开键盘快捷指令文件,将所需快捷方式绑定到workbench.action.tasks.runTask命令,并将任务定义为args.

例如,要将 Ctrl+H 绑定到运行测试任务,添加以下内容:

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

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

从资源管理器视图中,你可以在编辑器中打开脚本,作为任务运行,然后用节点调试器启动它(当脚本定义了调试选项时,比如--检查-BRK). 点击时的默认作是打开脚本。要单击运行脚本,设置

npm.scriptExplorerAction
  • 在VS代码中打开
  • 在VS Code Insiders中开放
执行. 利用设定
npm.exclude
  • 在VS代码中打开
  • 在VS Code Insiders中开放
排除package.json包含在特定文件夹中的文件。

滤波器问题

背景设定

npm.enableRunFromFolder
  • 在VS代码中打开
  • 在VS Code Insiders中开放
你可以在资源管理器的右键菜单中启用运行某个文件夹的 npm 脚本。该设置在选择某个文件夹时启用了“在文件夹中运行 NPM 脚本......”的命令。该命令会显示该文件夹中包含的 npm 脚本的快速选择列表,你可以选择要执行的脚本作为任务。

便携模式

VS Code 有一个便携模式,可以让你把设置和数据放在安装位置,比如 USB 盘。

内部构建

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

  • 对于早期采用者——Insiders 提供了最新的代码变更,供用户和扩展作者试用。
  • 频繁构建——每天都有新构建,包含最新的漏洞修复和功能。
  • 并排安装——Insiders安装在稳定构建旁边,允许你独立使用任一。