VS Code Note 01

命令面板

Cmd&＃43;Shift&＃43;P / F1&＃xff1a;打开命令面板&＃xff0c;是VS Code的主要交互界面

界面概览

文件资源管理器&＃xff1a;Ctrl&＃43;Shift&＃43;E
跨文件搜索&＃xff1a;Ctrl&＃43;Shift&＃43;F
源代码管理&＃xff1a;Ctrl&＃43;Shift&＃43;G
启动和调试&＃xff1a;Ctrl&＃43;Shift&＃43;D
管理扩展&＃xff1a;Ctrl&＃43;Shift&＃43;X
查看错误和警告&＃xff1a;Ctrl&＃43;Shift&＃43;M

命令行的使用

如果你是在 macOS 上使用&＃xff0c;安装后打开命令面板&＃xff0c;搜索shell 命令&＃xff1a;在 PATH 中安装 code 命令并执行&＃xff0c;然后重启终端模拟就可以了。

OPTIONS(常用命令)

通过命令行打开文件&＃xff0c;并滚动至特定的行

比如输入code -r -g package.json:128命令&＃xff0c;你就可以打开 package.json 这个文件&＃xff0c;然后自动跳转到 128 行。适用于某文件错误的行数的快速定位

比较两个文件的内容

只需使用 -d参数&＃xff0c;并传入两个文件路径&＃xff0c;比如输入 code -r -d a.txt b.txt命令

打开管道内容

将命令行 ls 的执行结果在 VS Code 的编辑器中打开 ls | code -
注&＃xff1a;管道的说明

如何在终端和文件之间快速切换

快捷键&＃xff1a;Ctrl &＃43; &＃96;

VS Code Note 02

光标的快捷键移动操作

1. 首先是针对单词的光标移动: Option &＃43; 左右方向键 同时按住 Option 和方向键&＃xff0c;那么光标移动的颗粒度就变成了单词&＃xff0c;你就可以在文档中以单词为单位不停地移动光标了。
2. 第二种方式是把光标移动到行首或者行末&＃xff1a;Cmd &＃43; 左右方向键
3. 接下来一种是对于代码块的光标移动&＃xff1a;Cmd &＃43; Shift &＃43; \&＃xff0c;就可以在这对花括号之间跳转。
4. 最后是移动到文档的第一行或者最后一行&＃xff1a;Cmd &＃43; 上下方向键

文本选择

基于以上快捷键&＃xff0c;只需要多按一个 Shift 键&＃xff0c;就可以在移动光标的同时选中其中的文本。

删除操作

1. 删除光标右侧所有内容&＃xff1a;Cmd &＃43; fn &＃43; delete
2. 删除光标左侧所有内容&＃xff1a;Cmd &＃43; delete
3. 删除单词内右侧的字符&＃xff1a;Option &＃43; fn &＃43; delete
4. 删除单词内左侧的字符&＃xff1a;Option &＃43; delete

自定义快捷键

首先你可以打开命令面板(Cmd &＃43; Shift &＃43; p)&＃xff0c;搜索“打开键盘快捷方式”然后执行&＃xff0c;这时你将看到相对应的界面。

比如&＃xff0c;你可以搜索“选择括号内所有内容”&＃xff0c;双击&＃xff0c;按下Cmd &＃43; Shift &＃43; ]&＃xff0c;然后按下回车&＃xff0c;这个快捷键就绑定上了。
比如&＃xff0c;你通过搜索 “cmd&＃43;backspace”这组快捷键&＃xff0c;发现它对应的命令是“删除左侧所有内容”&＃xff0c;但你不希望使用这个命令&＃xff0c;那你就可以通过右键选择删除该快捷键的绑定。

VS Code Note 03

代码行编辑

1. 删除当前行代码&＃xff1a; Cmd &＃43; Shift &＃43; K
2. 剪切当前行代码&＃xff1a; Cmd &＃43; x
3. 在当前代码上面开始一行时&＃xff1a;Cmd &＃43; Shift &＃43; Enter
4. 在当前代码下面开始一行时&＃xff1a;Cmd &＃43; Enter
5. 移动当前选中行代码&＃xff1a;Option &＃43; 上下方向键
6. 赋值当前选中行代码&＃xff1a;Option &＃43; Shift &＃43; 上下方向键

编程语言相关的命令

1. 添加注释&＃xff1a;Cmd &＃43; /
2. 代码格式化&＃xff1a;Option &＃43; Shift &＃43; F&＃xff0c;VS Code 也会根据你当前的语言&＃xff0c;选择相关的插件。当然&＃xff0c;前提条件是你已经安装了相关插件。
3. 选中的代码格式化&＃xff1a;Cmd &＃43; k or Cmd &＃43; F&＃xff0c;这样只有这段被选中的代码才会被格式化。

其他小技巧

1. 调换字符的位置&＃xff1a;Ctrl &＃43; t
2. 是调整字符的大小写&＃xff1a;你可以选中一串字符&＃xff0c;然后在命令面板里运行“转换为大写(transform to uppercase)”或 “转换为小写”, 来变换字符的大小写。
3. 是合并代码行&＃xff1a;Ctrl &＃43; j&＃xff0c;可以把较短的代码合并至一行&＃xff0c;而不需要不断地调整光标、删除换行符。
4. 是撤销光标的移动和选择&＃xff1a;Cmd &＃43; U

VS Code Note 04

创建多个光标

两个特别命令

1. Cmd &＃43; D 适用情况比较特别&＃xff1a;处理多次出现的“相同”单词。如果要处理的文本并不是相同的&＃xff0c;那么这个方法就不适用了。
2. Option &＃43; Shift &＃43; i 首先选择多行代码&＃xff0c;然后按下 “Option &＃43; Shift &＃43; i” ,这样操作的结果是&＃xff1a;每一行的最后都会创建一个新的光标。

快捷键跳转

多文件跳转

1. Ctrl &＃43; Tab 在正在操作的文件列表中切换文件
2. Cmd &＃43; P 打开最近的文件列表&＃xff0c;并支持搜索功能
   「小技巧」 Cmd &＃43; Enter 当找到文件后按下这个快捷键可在新窗口中打开该文件

行跳转

Ctrl &＃43; G 跳转到指定的代码行
「高级组合技巧」&＃xff1a;按下Cmd &＃43; P 直接输入文件名&＃xff1a;行号 eg:main.css:3

符号跳转

Cmd &＃43; R 能够看到当前文件里的所有符号(包括类&＃xff0c;方法等)。

定义 (Definition) 和实现 (implementation) 跳转

Cmd &＃43; F12 选中引用跳转到函数的实现位置

引用 (Reference) 跳转

Shift &＃43; F12 选中函数或类按下这个快捷键就可以出现一个引用的列表&＃xff0c;选择后内嵌的编辑器里便展示相应的引用代码

VS Code Note 04

玩转鼠标

选择文本

1. 在VS Code中&＃xff0c;你单击鼠标左键就可以把光标移动到相应的位置。
2. 而双击鼠标左键&＃xff0c;则会将当前光标下的单词选中。
3. 连续三次按下鼠标左键&＃xff0c;则会选中当前这一行代码。
4. 最后是连续四次按下鼠标左键&＃xff0c;则会选中整个文档。

文本编辑

在 VS Code中&＃xff0c;我们除了能够使用鼠标来选择文本以外&＃xff0c;还能够使用鼠标对文本进行一定程度的修改&＃xff0c;我们把它称为拖放功能(drag and drop)。
比如在示例代码中&＃xff0c;我们选中 bar 这个函数&＃xff0c;然后将鼠标移到这段选中的代码之上&＃xff0c;按下鼠标左键不松开。这时你可以看到&＃xff0c;鼠标指针已经从一条竖线&＃xff0c;变成了一个箭头。这时候我们移动鼠标的话&＃xff0c;就可以把这段文本拖拽到我们想要的位置。

悬停提示窗口

在 VS Code 的编辑器里使用鼠标的过程中&＃xff0c;当你的鼠标移动到某些文本上之后&＃xff0c;稍待片刻就能看到一个悬停提示窗口。这个窗口里会显示跟鼠标下文本相关的信息。

• 方法(Method)

比如&＃xff0c;在示例代码中&＃xff0c;当我把鼠标移动到第五行 foo 上后&＃xff0c;悬停提示窗口里展示了 foo的类型信息&＃xff0c;它告诉我们 foo是一个函数&＃xff0c;不需要任何的参数&＃xff0c;返回值是 void。

如果我把鼠标移动到 foo 上面时&＃xff0c;按下 Cmd 键&＃xff0c;则能够在悬停提示窗口里直接看到 foo的实现。

• 变量(Field)

在 Javascript 或者 Java 这样的编程语言中&＃xff0c;当我们把鼠标移动到某个变量上时&＃xff0c;我们能够看到这个变量的定义信息。而在 CSS 中&＃xff0c;当我们把鼠标移动到一个 CSS 规则上时&＃xff0c;我们能看到的则是一段能够让这个 CSS 规则生效的 HTML 的样例代码。

代码跳转和链接

我们还是把鼠标移动到示例代码的第五行 foo 上&＃xff0c;然后按下 Cmd 键&＃xff0c;这时候 foo下面出现了一个下划线。然后当我们按下鼠标左键&＃xff0c;就跳转到了 foo函数的定义处。