开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情
VSCode 功能很强大，这里只列举了一些常用的技巧，更多黑科技请移步官方文档
一、快捷键
1.查看快捷键
菜单路径：Code / Preferences / KeyboardShortCuts
快捷键：[⌘ K] [⌘ S]
2.macOS 常用快捷键
特殊符号映射关系
⌘ - Command
⇧ - Shift
⌃ - Control
⌥ - Option
========= 官方推荐 =========
所有命令：[⇧ ⌘ P]
打开文件：[⌘ P]
文件中搜索：[⇧ ⌘ F]
开始Debug：[F5]
打开 / 隐藏命令行：[⌃ `]
========= 编辑操作 =========
向上复制行：[⇧ ⌥ ↑]
向下复制行：[⇧ ⌥ ↓]
删除所选行：[⇧ ⌘ K]
向上移动行：[⌥ ↑]
向下移动行：[⌥ ↓]
选中一个词：[⌘ D]
多行注释：[⇧ ⌥ A]
单行注释：[⌘ /]
========= 其它操作 =========
跳转到某行：[⌃ G]
收起代码块：⌥ + ⌘ + [
展开代码块：⌥ + ⌘ + ]
展开 / 收起代码块：[⌘ K] [⌘ L]
打开Settings: [⌘ ,]
开启多行编辑：[⇧ ⌥]
打开 / 隐藏侧边栏：[⌘ B]
打开Explorer面板：[⇧ ⌘ E]
打开插件面板：[⇧ ⌘ X]
删除文件：[⌘ Delete]
==========================
3.多行操作
上下排列整齐时，直接按住 [⇧ ⌥]，同时鼠标垂直向下划动，划出一条闪烁的垂直线，这时直接编辑即可，编辑过程中，按方向键 ← 或 → 可以移动到目标位置
对于开头规则但结尾不规则的行，编辑过程中，可以再次按住 [⇧ ⌥]，同时通过方向键 ← 或 → 选择不等长的单词。比如这里可以把 clickBaidu, clickGoogle, clickBing 改成同名函数 handleClick
对于不是很规则的行，先按住 ⌥，再依次点击不同行需要编辑的位置，然后释放 ⌥ 并开始编辑
二、格式化
进行代码格式化之前，需要先配置 Formatter。但对于 JavaScript, TypeScript, JSON, 和 HTML，VSCode 有默认的格式化器，不需要额外的配置
全局格式化
格式化整个文件中的代码，快捷键为 [⇧ ⌥ F]
局部格式化
如果要使用局部格式化，建议先取消保存自动格式化 只格式化选中的代码，快捷键为 [⌘ K] [⌘ F]
三、代码片段
代码片段可以大大简化重复代码的编写，在 VSCode 中可以很方便地维护自定义的代码片段，这些代码片段是一些 JSON 格式的模板，定义在 ～/Library/Application Support/Code/User/snippets 目录下
比如，在 javascript.json 文件中定义了如下代码片段
{
"Axios Get Request": {
"prefix": "axios-get",
"body": [
"axios.get(${1:url})",
"\t.then(function (res) {",
"\t\t$2// 按Tab键会跳转到这一行",
"\t})",
"\t.catch(function (err) {",
"\t\t$3// 再次按Tab键会跳转到这一行",
"\t})"
],
"description": "Generate axios GET request"
}
}
使用时，只需要输入 axios-get / ag 并按 Tab / Enter 键，就可以自动生成代码
代码生成后，光标会停在 url 所在的位置
($1)，按下 Tab 键会依次切换到 res 和 err 所在的代码块，这是由代码片段中的 $2, $3 占位符绑定的
四、常用插件
VSCode 有非常丰富的插件库，可以到 官网 查看，这里只列举一些常用的插件
indent-rainbow
增加代码缩进的层次感
Vetur / Volar
Vue 开发助手
Live Server
快速启动本地服务器，并支持动态更新静态资源
open in browser
快速选择浏览器并打开 HTML 文件，这个插件有好几个，选择下载量最大那个就行了
Auto Rename Tag
一个案例
<div>test line</div>
<!-- 修改为如下代码 -->
<p>test line</p>
如果没有这个插件，需要先修改 div 开始标签，再修改 div 结束标签
Local History
使用示例
参考文档
VSCode 官方文档：链接
VSCode 插件库：链接
