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即可。

命令面板

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

创建终端

• 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: 为同一对花括号指定一个单独的配色