随笔

使用vscode的三个技巧

一、VS Code常用设置

1、默认会把短线“-”作为分隔符，通过此设置可以自行决定是否忽略
单词分隔符设置

2、当文件夹下只有一个子文件夹的时候，默认文件夹会被折叠成一行，此配置可进行设置
资源管理器文件夹折叠设置

3、在命令行安装 code 命令后可以直接从命令行快速打开 vscode。

1
code ./

code命令打开vscode

4、打开vscode默认是一个小窗口，默认居中于屏幕，此设置可以自定义打开窗口的大小和位置
默认打开vscode窗口大小

二、常用快捷键

主要针对 Mac系统，windows 可将 command 替换为 Ctl。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
command + p // 打开命令输入框
command + p -> > // command + p 模式下输入 ">" 等同于 command + shift + p
command + p -> : // command + p 模式下输入 ":" 等同于 ctl + g
command + d // 下一个匹配的也被选中
command + u // 回退上一个光标操作（可以看做是command + d 的撤销一次匹配的命令，但是不仅仅是）
command + up // 光标移到文件开头
command + down // 光标移到文件结尾
command + left // 光标移到行首
command + right // 光标移到行尾
command + ] // 缩进
command + [ // 减少缩进
command + x // 剪切本行
command + b // 显示/隐藏侧边栏

option + up // 向上移动本行
option + down // 向下移动本行
option + left // 向左移动一个单词
option + right // 向右移动一个单词

shift + option + f // 格式化
shift + option + up // 向上复制本行
shift + option + down // 向下复制本行

shift + command + enter // 在当前行上面插入一行
shift + command + l // 选中当前文件的所有匹配， command + d 的全选操作
shift + command + f // 全局搜索

shift + ctrl + ] // 移动到后半个括号

command + options + down/up // 多行多列编辑

ctrl + g // 跳转到 n 行

command + k => + l // 先 command + k 完事之后再按 l，打开vscode快捷键文档

三、vscode 断点调试nodejs

vscode可以直接运行js代码，还可以断点，但是需要在编辑器里面使用 debug 模式启动。
断点调试nodejs

四、接口测试

我们在开发过程中有很多测试接口的需求。
这对于前端来说很简单，对于一些简单请求，我们直接写一段代码使用 XMLHttpRequest 或者 fetch 发起请求就行。
当然，这会耗费我们一些时间，复杂的请求使用第三方工具（如：postman）会更方便。

除了使用第三方工具，其实 vscode 的一个插件也可以做到，这就是 REST Client。
这个插件使用非常简单，直接新建一个.http后缀的文件，然后在文件里面写请求代码即可。
相比于 postman，REST Client 支持了 cURL 和 RFC 2616 两种标准来调用REST API。

cURL请求方式示例

1
curl -X GET "https://www.epoos.com/api/test" -d "Hello World"

REST API 请求方式示例

1
2
3
4
5
6
7
8
# 注意空行
POST https://www.epoos.com/api/test HTTP/1.1
content-type: application/json

{
  "name":"epoos",
  "age":"31"
}

请求：直接将上述代码贴在 .http 后缀的文件里面，需要发起请求的时候直接 “右键 —— Send Request” 即可。

REST Client Request