你可能不知道的 Visual Studio Code 技巧

前言

本文的快捷键以 Mac 行文，Windows / Linux 快捷键 ⌘ 替换为 ctrl，作为个人笔记，将持续更新。

VS Code config

使用 ⌘ + Shift + P 调出命令选项板，输入 path， 选择 install 'code' command in PATH，在 iTerm（终端）中输入 code . 就可以自动启动 VS Code 打开当前项目。

常用快捷键

功能	快捷键
切换侧边栏	⌘ + B
打开命令面板	⌘ + Shift + P
打开文件切换器	⌘ + P
切换集成终端	⌘ + `
打开设置	⌘ + ,
光标移动至行首或者行末	⌘ + 左、右方向键，Windows 上是 Home、End 键
跳转到上一个文件	⌘ + P + P

Emmet

1. 编写 HTML 时，需要在指定元素外层添加元素包裹，自己手动剪切再粘贴时可能会出错，这时可以使用 ⌘ + Shift + P 调出命令选项板，输入 Balance， 选择 Balance（outward）（平衡向外），再输入 Wrap ，选择 Wrap with Abbreviation（使用缩写包围），输入 Emmet 语法执行即可。

2. 需要更新 HTML 标签时，可以在标签行上（开始或结束标签都可以）使用 ⌘ + Shift + P 调出命令选项板，输入 update， 选择 Update Tag，输入标签执行更新。

3. 引用图片时需指定图片宽高，如果不指定宽高，浏览器加载页面时，不知道这张图片多大，因此不知道在页面上为它保留多少空间。当图像到达页面时抖动，导致用户体验不好。可以在 img 标签行上使用 ⌘ + Shift + P 调出命令选项板，输入 update， 选择 Update Image Size执行，Emmet将自动添加图片原始宽高，同样也适用于背景图。

Navigation & Refactoring

1. 自定义折叠的HTML片段技巧：

<!-- #region -->

中间为需折叠的 HTML 片段
<div class="region">
***
</div>
<!-- #endregion -->

2. ⌘K ⌘D 将上一个选择移动到下一个“查找匹配项”

3. 使用正则表达式查找 jpg|jpeg|png|webp|gif 文件中的图片更改路径，再按快捷键 ⌥Enter，将为文档中查找到的每个实例添加一个光标，移动选中光标更改。（多光标选中）

4. ⌘P 在预览过的文件快速切换。

5. ⌘P 输入不同符号功能一览表

快捷键	输入	功能
⌘P	>	调出命令选项板
⌘P	:	转到行/列
⌘P	@	转到编辑器中的符号
⌘P	@:	按类别转到编辑器中的符号
⌘P	#:	转到工作区中的符号

6. ⌘0 进入侧边栏，⌘1 返回编辑器。
7. 选择代码片段，⌃⇧R 重构代码。
8. ⌘⇧L 修改当前光标选中的所有匹配变量名

Debugging

1. 在你不想使用TypeScript编写程序时，可以在js文件首行使用 // @ts-check 检查一些错误。

fetch("https://jsonplaceholder.typicode.com/todos/1")

.then(response => response.json())

.then(json => console.blog(json));

VS Code 提示 Property 'blog' does not exist on type 'Console'. Did you mean 'log'?

2. ⌘⇧B 可以选择构建或监视 TS 文件

简单调试

浮窗的操作按钮功能依次为：

• 继续执行(F5)、
• 单步跳过(F10)、
• 进入函数调用(F11)、
• 跳出函数调用(Shift F11)、
• 重新调试(Ctrl + Shift + F5)、
• 结束调试(Shift + F5)

调试操作步骤：

• 代码旁边的左侧边距以添加一个红点
• 按F5
• 选择调试环境

日志调试

右键单击行号

• Add Conditional Breakpoint
• Add Logpoint {response.data.results}

DOM 断点调试

1. 创建一个 chrome 调试配置，项目在本地启动：
2. 然后打开 Chrome DevTools，在 app 节点上加一个 DOM 断点：

DOM 断点三种类型，子树修改的时候断点、属性修改的时候断点、节点删除的时候断点。

Git

Ctrl + Shift + G 源代码管理