visual studio code使用教学：你可能不知道的，VisualStudio

前言

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

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

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将自动添加图片原始宽高，同样也适用于背景图。

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

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

1. ⌘K ⌘D 将上一个选择移动到下一个“查找匹配项”
2. 使用正则表达式查找 jpg|jpeg|png|webp|gif 文件中的图片更改路径，再按快捷键 ⌥Enter，将为文档中查找到的每个实例添加一个光标，移动选中光标更改。（多光标选中）
3. ⌘P 在预览过的文件快速切换。
4. ⌘P 输入不同符号功能一览表

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

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'?

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

image.png

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

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

调试操作步骤：

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

image.png

右键单击行号

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

1. 创建一个 chrome 调试配置，项目在本地启动：

image.png

1. 然后打开 Chrome DevTools，在 app 节点上加一个 DOM 断点：

image.png

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