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
使用示例