【高效的编码】你也许不知道的VSCode开发技巧

1,406 阅读3分钟

快捷键

快捷跳转以及返回

在项目中翻看代码时,经常会使用alt + 鼠标左键进行类名、变量、方法、事件、组件等进行跳转(可能有的人是ctrl + 鼠标左键),可是跳转后不能回到刚才的位置,需要手动滚动才能回去。这时只需要使用alt + ←即可回到之前的位置了

快捷跳转.gif

撤回之前的撤回

我们经常会使用ctrl + z进行撤回操作,可是想要撤回之前的撤回呢?使用ctrl + y即可

返回.gif

快速打开项目

ctrl + r 直接点击默认打开是直接覆盖当前的窗口的。ctrl + 鼠标左键则是打开新的窗口,alt + 鼠标左键如果是文件夹则是直接覆盖当前窗口,如果是文件则是在当前窗口打开;也可以从打开最近文件中通过ctrl + 鼠标左键则是打开新的窗口

快速复制

大多数人想要复制当前行,都是CV大法,实际上VSCode有快捷键的,alt + shift + ↓可以一直往下复制

快速复制粘贴.gif

快速删除整行

crtl + shift + k

快速移动行

alt + ↓alt + ↑

快速移动.gif

快速新开下一行

如果你的鼠标光标不在行尾,这时你想要新开到下一行,就需要移动鼠标了,这就有点麻烦,可以直接使用ctrl + enter就可以新开一行了

新开行.gif

选中某一块区域

如果想要选中某一块区域,你可能是按住鼠标左键然后不松手慢慢选中,这样就会很麻烦,并且可能出错或者手抖松开了导致又要重新操作,所以这里教你一个简单的方式。

  1. 鼠标点击要选择区域的开始位置
  2. 找到结束位置按下shfit + 鼠标左键

选中区域.gif

批量操作

批量操作行

  1. 先按住 alt + shift
  2. 拖动鼠标选择行
  3. ctrl + shift + →快速选中并跳转到分隔位置 或者 ctrl+→跳转到分割位置

批量操作行.gif

选中指定行

按住 ctrl 不放,鼠标点击即可。而且你不必精确选中列的位置,可以用 fn + ← 或者 fn + → 回到开头或者结尾(也可以使用end | home按键)

选中指定行.gif

注意: 上面的一些快捷键其实并不是VSCode特有的,在其他地方也是可以去使用的

注释

巧妙的利用注释可以让你拥有ts一般的体验

行内注释与文档注释的区别

如图:下面的行内注释当鼠标悬停在变量上时,是没有注释显示;而上面的文档注释是有注释显示的,可以很方便的知道这个变量是用来做什么的。可能会有人觉得写这样的注释很麻烦,我们可以使用快捷键 /** 回车可以快速生成注释

image.png

利用文档注释描述函数功能

image.png

智能提示当前参数描述以及类型

image.png

智能提示该属性的方法

因为行内注释没表明传入的参数是什么类型,所以就没法进行智能提示,但是文档注释表明了参数类型,就能很贴心的提示该类型方法

image.png

image.png

image.png

枚举参数提示

image.png

文本换行

如图: 如果只是换行文本,可以看到提示的时候换行符变为空格符了,文本都在一行,这显然不是我们想要的,这时可以使用 @example

image.png

image.png