Skip to content

先利其器:vscode 开发常用小技巧

论语有曰:“工欲善其事,必先利其器”。而对于我们开发用的 “器” ———— vscode (或其他 whatever),我们要会了解怎么使用它,才能把它变成一个利器。

故而我们今天来了解一下 vscode 在开发中的一些使用小技巧,虽然它们很 “小”,但却与我们的日常开发息息相关。

代码提示命令

显示代码操作

我们在前面的训练中了解到了如何通过 vim 的命令模仿鼠标划过激活悬浮提示,但还有一种情况我们没有说:当我们输入一些有问题的代码语法比如未引入的模块函数,该行的行首会有个小灯泡移入会有 “显示代码操作” 字样(英文为 show code action),点击会有待选框弹出让我们可以快速导入(如果检测到项目中的其他模块有同名的模块),这就是我们常常会看到和用到的 [代码操作] 选项框(在鼠标划过的悬浮提示框底部带有可点击的 "快速修复 quick fix" 字样也同样会激活 [代码操作]);

但是对于键盘侠的我们,怎么能忍得了用鼠标点点点呢?可能你已经注意到,无论是在小灯泡提示的 “显示代码操作” 的旁边,还是 “快速修复” 的旁边,其实已经标明了这里要讲的快捷键:command + .;这时候只要我们按下该组合键,可以激活 [代码操作] 待选框。

而在后面的关于[重构]的章节中,我们会更加详细地学习和拓展这个[快速修复]这个功能。

代码操作 Code action

vscode 文档中提到: Code Actions = Quick Fixes and refactorings 即:代码操作是快速修复功能和重构功能;快速修复功能涵盖了许多内容,如导入模块、添加行内 eslint 跳过检查注释等。

触发参数提示

在我们使用一个已声明的函数或类时,vscode 会提示对应的入参、参数类型等(在输入时);但如果我们不小心移动了光标或点击了其他地方再回到传参的位置时,提示就没有了,这时我们可以通过 shift + command + space 触发参数提示(trigger parameter hints)。

触发建议

众所周知,vscode 有代码提示的功能,比如我们输入个 con,会提示 console.log,但是一旦想上面那样光标移动之类的情况发生,提示框也是会消失;当然,你可以把已经输入的字符删除一下再重新输入,提示框就会重新出现(我之前就是这么做的...),但这确实挺傻逼费劲的;这时我们只要用上触发建议(trigger suggestion)的快捷键 command + i,提示框就出现了;是不是白费劲了这么久才知道这个方式?

区分好 action 与 hints 与 suggestion

action 会针对代码进行一定的修改等操作,比如提取为函数,命名为新变量,导入模块等; hints 是针对已有的代码内容做一个提示,仅显示而无操作; suggestiton 则会根据当前的代码中可以输入的内容及当前已输入的内容分析出一系列可供参考及选中快速输入的待选列表。

行操作命令

有没有遇到这两个问题:

在之前的 vim 训练中,我们如果要移动一行代码可能会使用 ddp,本质上是删除对应行再粘贴,来达到移动的效果,看起来还行但是总是缺点优雅的感觉,也比较反常识;以及我们在要在当前行上 / 下方新建空白行时使用的 O / o,新建空行后就进入了 insert mode;虽说一般新建行后是进行输入,但是比如我们要粘贴点 vim 寄存器中的内容时,又要重新退出 insert mode,确实有点多此一举。

而其实 vscode 中,对于这样的行操作默认就有对应的操作组合键:

  • option + [上 / 下方向键]:上 / 下移动所在行,或选中区域
  • command + enter / shift + command + enter:在当前行上 / 下方新建空白行

mac 中的 `shift`

在 MacOS 中,shift 在组合键中常常起到类似“取反”的作用;比如 chrome 中:shift + tab 是切换到下一个标签页,而 shift + tab + shift (左右 shift 都用上),则是切换到上一个标签页;再如 command + tab 是切换到下一个应用,而 command + shift + tab 则是切换到上一个应用。这样的例子还有很多,平时可以多留意。

删除前面的单词

在 vim 中提到删除单词,我们肯定是无脑 diwciw 的,当然这也是涵盖了所有的场景的删除单词;不过可能有时候有些人会想着,如果可以快速删除光标前的单词,那我岂不是不用移动光标了?虽然 vim 给不了你这样的功能,但是 VScode 可以。

  • option + delete:删除光标前的单词(一个文本块为一个单词,如 vimUser 这里为一个单词)
  • option + control + delete:删除光标前的单词(以驼峰为单词的区分,如 vimUser 这里为两个单词)

跳转错误处

通过 f8 可以跳转到代码报错飘红的位置,而且范围是整个工作区而不仅仅是当前文件;存在多个报错处的时 f8 可以跳往下一处,shift + f8 可以跳往上一处。

选中所有相同单词

虽然 vim 中的 gb 可以选中相同的单词,在选中某几个的时候还比较好用,如果相同单词过多并且数量比较多的情况下,就需要键入很多次,而通过 command + f2 则可以快速选中所有相同单词。