VSCode使用技巧及快捷键(tips)

1、命令面板

F1 或者“Cmd+Shift+P ”(Windows 上是 “Ctrl+Shift+P”)

2、界面概览

文件资源管理器      Ctrl + Shift + E
跨文件搜索        Ctrl + Shift + F
源代码管理        Ctrl + Shift + G
启动和调试        Ctrl + Shift + D
管理扩展          Ctrl + Shift + x

3、键盘操作

1、光标移动

单词移动 Ctrl +左右方向键
光标移动到行首Home或者行末 end
代码快的光标移动Ctrl + Shift + \
移动到文档第一行Ctrl + Home 最后一行 Ctrl + end

2、文本选择

掌握了上面的快捷键之后，你还可以非常轻松地掌握文本选择的操作。因为对于基于单词、行和整个文档的光标操作，你只需要多按一个 Shift键，就可以在移动光标的同时选中其中的文本。
同理，假设说光标放在第二行，然后你按下 Ctrl、Shift和上下方向键，就能把第二行光标到第一行，或者最后一行之间的字符选中
Ctrl、Shift + Home 当前行到第一行
Ctrl、Shift + end 当前行到第一行
光标当前行Ctrl + C,复制当前行

3、删除操作

当前光标所在行之前的文本全部删除，home + Shift
当前光标所在行之后的文本全部删除，end + Shift
当前光标之前的文本全部删除，home + Shift + Ctrl
当前光标之后的文本全部删除，end + Shift + Ctrl

4、自定义快捷键

f1 或 Ctrl + Shift + P==> 命令面板》搜索> 打开键盘快捷方式
搜索“选择括号内所有内容”

5、代码行编辑

Shift选中内容， Ctrl + Shift + k 删除
剪切 Ctrl + x
Enter 换行，但是光标在代码中间的话想要换行，并不拆分代码
- 向下换行Ctrl + Enter
- 向上换行Ctrl + Shift + Enter
移动代码 Alt +上下方向键
复制当前行代码 Alt + Shift +上或者下

编程语言相关的命令

1、添加注释

Ctrl + /

2、代码格式化

Ctrl + Shift + f

3、撤销光标的移动和选择

Ctrl + U

创建多个光标

1、使用鼠标

Alt + 鼠标点击

2、键盘输入

Ctrl + Alt + 下，如果光标没有对齐可以按End,将光标切换到最后

3、`Ctrl + D`

4、代码得批量处理

首先选择对应得代码块，Alt + Shift + i

文件跳转
Ctrl + Tab
文件过多时：Ctrl + P,当找到文件之后 Ctrl + Enter 就可以在新的编辑器窗口打开

行跳转
Ctrl + g 输入行数即可
组合： Ctrl + p查找文件，并在之后 : 跟上行数，即可跳到指定文件行数

符号跳转

定义到函数、或者类得定义处 Ctrl + Shift + o
- 在按下 “Cmd + Shift +O”后，输入框里有一个 “@”符号，如果你输入 “:”，就可以将当前文件的所有符号，进行分类，这样搜索符号也就更加方便。
Cmd + T，搜索多个文件的符号

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

F12 或者 Ctrl + F12

引用 (Reference) 跳转

Shift + F12 VS Code 就会打开一个引用列表和一个内嵌的编辑器。

鼠标操作

单击：移动光标
双击：选中单词
三击：当前行
四击：整个文档
自定义行数：在VSCode边上的行数，拖动就可以选中需要的

文本编辑

拖动功能：选中代码，鼠标移动代码块即可拖动
当拖动的时候按住Ctrl 即可将原来的“剪切+粘贴”变为“复制+粘贴”了。

多光标

鼠标加上 Alt即可
或者鼠标的滚轮，拖出一个区域即可

代码跳转和链接

Ctrl + 鼠标单击
我们在编辑器里，可以通过 F12 跳转到代码的定义处，这个快捷键在阅览代码的时候特别有用，但是问题来了，当你阅读完定义处的代码，想跳转回去怎么办呢？

这时候你可以使用 “Ctrl + -” （Windows 上是 Alt + Left）跳转回上一次光标所在的位置。而如果你按下 “Ctrl + Shift + -” （Windows 上是 Alt + Right）则可以跳到下一次光标所在的位置。有了这两个快捷键，我们就能够在阅读代码时快速来回跳转了。

自动补全

VSCode自动补全，esc取消（隐藏），Ctrl + 空格键

重构

需求：当修改一个函数或者变量的时候，Ctrl + F2

代码折叠

Ctrl + Shift + 左右括号
递归折叠：Ctrl + K ==> Ctrl + 左右括号

单文件搜索

Ctrl + F ,光标自动聚焦到搜索框中
Ctrl + f3,光标依旧在编辑器中
Ctrl + Shift + F3

多文件搜索和替换

Ctrl + Shift + F

创建多层子文件夹和文件

方法是：点击创建文件的按钮，然后在输入框中输入folderName/fileName即可。

命令面板

>（大于号），用于显示所有的命令。
@ ，用于显示和跳转文件中的“符号”（Symbols），在@符号后添加冒号：则可以把符号们按类别归类。
#号，用于显示和跳转工作区中的“符号”（Symbols）。
：（冒号），用于跳转到当前文件中的某一行。

创建终端

Ctrl + `
新建终端 Ctrl + Shift + `
拆分终端 Ctrl + Shift + 5

调试窗口

调试视图：Ctrl + Shift + D

专注模式

Ctrl + B
Ctrl + J

类型提示

JSDoc

JSDoc 跟 Javadoc 或者 phpDocumentor 很类似，它是一个文档规范工具，我们通过在代码里写上注释，记录好各个类、函数、对象的作用，然后就可以生成相应的 API 文档了。同时，我们还能够在注释里标记对象的 JavaScript 类型，这样我们在阅读和使用这段代码时就很方便了。

下面，让我们来给 index.js 里的 bar 函数添加上 JSDoc，新的代码如下：

function foo() {bar("Hello World");
}/*** bar* @param {string} str */
function bar(str) {console.log(str);
}

上面的代码注释的意思是，bar 这个函数，它需要传入一个参数 str，同时这个参数的类型是 string。

此时当我们在调用 bar 函数时，参数建议就会告诉我们需要传入一个 string 类型的参数。

typings/d.ts

看到这里，你的下一个问题可能是：如果我使用的函数是来自某个 npm 模块，也就是说这是别人写的代码，VS Code 还能知道这个函数的参数类型吗？

这里就必须要再提一次 TypeScript 的类型系统了。TypeScript 的一大特点就是静态类型，一般一个 TypeScript 项目，发布的时候会编译成 JavaScript，同时也会发布一个d.ts文件，这个文件记录了发布的这个 JavaScript 文件里的对象类型。

接着 VS Code 则会通过读取这个 d.ts 文件，来为这个模块里的函数和对象提供类型建议。VS Code 是使用下面几种方式去寻找 d.ts 文件：

首先，就是看看这个 npm 包本身有没有自带 d.ts 文件，如果有的话就直接使用。使用 TypeScript 书写的项目一般都会有 d.ts 文件，而很多知名的 JavaScript 框架，虽然并不是使用 TyepScript 来维护的，也提供了 d.ts 文件。
其次，VS Code 还会看当前项目文件夹下是否有 d.ts 文件。如果你使用的某个 npm 包自己没有 d.ts 文件的话，你可以自行书写。关于如何书写 d.ts 文件，可以参考TypeScript 的文档。
最后，还有很多 JavaScript 项目，它们自己没有 d.ts 文件，但是社区为它们书写了d.ts文件，并且发布到 npm @types 下供大家使用。而VS Code 会自动到 npm @types 里进行搜索，看看是不是有合适的类型 d.ts 可以使用。

编辑器插件

`Vim`:`VSCodeVim`、`amVim`

`Rainbow Brackets`: 为同一对花括号指定一个单独的配色