开始使用VSCode
1.快速上手
命令面板
可以通过 F1
或者 Cmd+Shift+P
打开
你可以在命令面板中快速搜索命令并且执行。如果你的 VS Code 是简体中文版,那么你可以在命令面板里使用中文或者英文来搜索命令。VS Code 的绝大多数命令都可以在命令面板里搜到,所以熟练使用命令面板,你就可以摆脱鼠标,完全通过键盘操作来完成全部编码工作。
命令行的使用
如果你是在 macOS 上使用,安装后打开命令面板,搜索Shell 命令:在 PATH 中安装 “Code” 命令
并执行,然后重启终端模拟就可以了。
运行 code --help
来打印出 VS Code 命令行所支持的所有参数。
// 打开文件
code filename
// 如果你希望使用已经打开的窗口来打开文件,可以在 code 命令后添加参数 -r来进行窗口的复用。
code -r filename
// -g打开文件后光标定位了第n行
code -r -g package.json:128
// Diff
code -r -d a.txt b.txt
VS Code 命令行除了支持打开磁盘上的文件以外,也接受来自管道中的数据。这样你就可以将原本在命令行中展示的内容,实时地展示在 VS Code 里,然后在编辑器中搜索和修改。比如,你可以把当前目录下所有的文件名都展示在编辑器里,此时只需使用 ls | code -
命令
2. 双手不离键盘
光标的移动、文本的选择、文本的删除,以及如何为编辑器命令绑定快捷键
光标移动
移动到单词首:option + 左方向键
移动到单词末:option + 右方向键
移动到单行首:command + 左方向键
移动到单行末:command + 右方向键
对于代码块的光标移动
当你把光标放在花括号上时,只需按下 Cmd + Shift + \
就可以在这对花括号之间跳转。
移动到文档的第一行或者最后一行
只需按下 Cmd 和上下方向键
即可
文本选择
掌握了上面的快捷键之后,你还可以非常轻松地掌握文本选择的操作。因为对于基于单词、行和整个文档的光标操作,只需要多按一个 Shift 键,就可以在移动光标的同时选中其中的文本。
对于代码块的文本选择
VS Code没有默认快捷键
- 方法1:
使用命令面板找到命令选择括号所有内容
并运行。 - 方法2:
绑定快捷键
删除操作
首先了解mac上的Backspace键为(fn + delete)
删除行: shift + cmd + k
删除光标到行首: cmd + delete
删除光标到行尾: cmd +backspace
即 cmd + fn + delete
删除光标的单词首:option + delete
删除光标到单词尾:option + backspace
即 option + fn + delete
自定义快捷键
可以根据自己的使用习惯,给自己常用的命令指定顺手的快捷键。
打开命令面板,搜索 打开键盘快捷方式
然后执行,这时你将看到相对应的界面。
然后通过搜索找到你希望修改快捷键的命令,双击,接下来你只要按下你期望的快捷键,最后按下回车键就可以了。
比如,你可以搜索“选择括号所有内容”,双击,按下 "Cmd + Shift + ]",然后按下回车,这个快捷键就绑定上了。
3. 快捷键进阶
代码行编辑
删除一行: cmd + shift + k
剪切行: cmd + x
当前行下面开始一行:cmd + Enter
当前行上面开始一行:cmd + shift + Enter
上下移动当前行或当前选中行:option + 上下键
复制这几行,然后粘贴到当前行的上面或者下面: option + shift + 上下键
添加注释
注释掉一行: cmd + /
注释掉选中的内容:option + shift + A
代码格式化
使用插件完成
代码缩进
其他小技巧
调换字符位置:ctrl + t
调整字符的大小写: 选中内容,命令面板运行转换为大写
或 装换为小写
,来变换字符大小写。搜索时可直接搜索tra...
前缀即可自动查找到相关命令。
将选中的多行合并为一行:ctrl + j
多行数据按字母排序:选中内容,命令面板运行 按升序排列行
或者 按降序排列行
。搜索时可直接搜索sort...
前缀即可自动查找排序相关命令。
撤销光标的移动和选择:cmd + u
撤销光标的移动,光标回退到上一个位置。
4. 拒绝重复,你一定要学会的多光标特性
将光标插入多行:cmd + option + 上下键
创建多光标的两个特别命令
- “Cmd + D”
第一次按下时,它会选中光标附近的单词;第二次按下时,它会找到这个单词第二次出现的位置,创建一个新的光标,并且选中它。 -
Option + shift + i
在选中行的每行末尾插入光标
5.快速在文件、符号、代码之间跳转
文件跳转
Ctrl+Tab
cmd + shift + ]
这两个命令只能上一个下一个的移动,命令面板里提供了支持搜索的跳转方式。cmd + p
会弹出一个最近打开文件列表,支持搜索。移动到文件按 Enter
即可打开文件。小技巧,移动到文件,按下cmd + Enter
可在新的窗口打开文件。
行跳转
按下 Ctrl + g
会弹出一个带冒号的输入框,输入数字,回车即可将光标移动到那一行。
介绍一个高阶组合技巧。如果你想跳转到某个文件的某一行,你只需要先按下 Cmd + P
,输入文件名,然后在这之后加上 “:”和指定行号即可。
符号跳转
VS Code 项目或者文件里有哪些类、哪些函数或者标识符(我们把这些统称为符号)。
如果要在一个文件里的符号之间跳转,你只需按下 Cmd + Shift + O
, 就能够看到当前文件里的所有符号。使用方向键,或者搜索,找到你想要的符号后,按下回车,就能够立刻跳转到那个符号的位置。
请注意,在按下 Cmd + Shift +O
后,输入框里有一个 “@”符号,这个符号在这里的意义,我会在后面的章节里去介绍,你可以先留个心眼。这时,如果你输入 “:”,就可以将当前文件的所有符号,进行分类,这样搜索符号也就更加方便。
定义 (Definition) 和实现 (implementation) 跳转
符号跳转依托于语言插件对代码的分析,已经算得上具备一定的智能特性,但是它还是不够精确。比如说我们看到某个函数的调用,想要知道这个函数的接口定义是什么样的,它的实现细节是什么样的,光靠符号跳转,还是会不方便。我们需要的是直接跳转到定义和实现的位置,Java 程序员看到这里一定会深有感触。
当然,这个功能也需要语言本身的支持。比如说当你在使用 TypeScript 时,按下 F12,就可以跳转到函数的定义处。
也可以按下 “Cmd + F12” ,跳转到函数的实现的位置。
而在书写 JavaScript 时,因为并没有接口(interface)的概念,定义和实现恰好是相同的。
引用 (Reference) 跳转
很多时候,除了要知道一个函数或者类的定义和实现以外,你可能还希望知道它们被谁引用了,以及在哪里被引用了。这时你只需要将光标移动到函数或者类上面,然后按下 “Shift + F12”,VS Code 就会打开一个引用列表和一个内嵌的编辑器。在这个引用列表里,你选中某个引用,VS Code 就会把这个引用附近的代码展示在这个内嵌的编辑器里。
6. 玩转鼠标操作
文本选择
在 VS Code 中,你单击鼠标左键就可以把光标移动到相应的位置。而双击鼠标左键,则会将当前光标下的单词选中。连续三次按下鼠标左键,则会选中当前这一行代码。最后是连续四次按下鼠标左键,则会选中整个文档。
单击行号,就能够直接选中这一行。如果你在某个行号上按下鼠标,然后上下移动,则能够选中多行代码。
文本编辑
剪切 + 粘贴:拖拽选中的文本
复制 + 粘贴:拖拽选中的文本,在松开鼠标左键前按下option键即可
多光标
按住 Option 键,然后哪里需要点哪里。
悬停提示窗口
当鼠标移动到某些文本上之后,稍待片刻就能看到一个悬停提示窗口。这个窗口里会显示跟鼠标下文本相关的信息。
如果我们把鼠标移动到一个函数上面时,按下 Cmd 键 ,则能够在悬停提示窗口里直接看到该函数的实现。
在 JavaScript 或者 Java 这样的编程语言中,当我们把鼠标移动到某个变量上时,我们能够看到这个变量的定义信息。而在 CSS 中,当我们把鼠标移动到一个 CSS 规则上时,我们能看到的则是一段能够让这个 CSS 规则生效的 HTML 的样例代码。
代码跳转和链接
把鼠标移动到函数上,然后按下 Cmd 键,这时候 函数下面出现了一个下划线。然后当我们按下鼠标左键,就跳转到了函数的定义处。
当我们在编写 Markdown 这样的非编程语言的文档时,也可以通过 Cmd + 鼠标左键
来打开超级链接。