05讲快捷键进阶攻略

软件开发有个非常流行的原则, 叫做不要重复自己(Don’t Repeat Yourself)。其实除了写代码,我们在使用编辑器的时候,这也是一个非常值得贯彻的准则。

在上一讲的时候,我们一起学习了如何进行光标的移动和文本选择等基本操作,除此之外,你还可以随意将它们组合成“一个事务”以达成你想要的目标。但是如果你用过Vim,你肯定会吐槽说这“三脚猫”的功能还不够方便,也不够酷。

虽然说写代码是一个创造的过程,但很多时候,我们写代码并不总是行云流水从上写到下的。比如说你新写一个功能,你会先把整个逻辑思路写下来,然后重新审视整个代码:这一行好像有点问题,删掉;这里好像少了一个判断,新增几行代码;那段代码好像提前执行比较好,然后你把它挪到了前面的位置。

面对这么多操作需求,那今天我们一起来看下,在 VS Code 编辑器里,还有哪些快捷方式能够给你的代码编辑进一步提速。

代码行编辑

下面我就以一段 CSS 代码作为例子,来和你分享下代码行编辑中的高阶技巧。

.foo {
  padding: 5px;
  margin: 5px;
  font-size: 5px;
}

在上一讲中,你知道了要删掉一行代码,你可以选中它,然后再按 Delete 键。不过还有一个快捷键,那就是直接按下 “ Cmd + Shift + K ” (Windows 上是 “Ctrl + Shift + K”),当前代码行就可以被删除了。

“ Cmd + Shift + K ”,删除当前代码行

如果你只是想要剪切这行代码,那么你直接按下 “ Cmd + x ” (Windows 上是 “Ctrl + x”) 即可。

“ Cmd + x ”,剪切某一行代码

我想你肯定很清楚,“Enter” 键的基础作用是能在编辑器里光标所在的位置添加一个换行符。但是很多时候你可能并不是单纯地要将一行分成两段,而是希望在这行的下面或者上面开始一段新的代码。

这个功能对应的快捷键非常好记,它跟 “Enter”键十分接近。当你想在当前行的下面新开始一行时,你只需按下 “Cmd + Enter” (Windows 上是 “Ctrl + Enter”);而当你想在当前行的上面新开始一行时,你只要按下 “Cmd + Shift + Enter” (Windows 上是 “Ctrl + Shift + Enter”)就行了。

在当前行的下面或者上面开始一段新的代码

当你想移动一段代码时,一般你可能会分三步走:先选中,再剪切,最后粘贴。不过我更喜欢的是按住 “Option + 上下方向键”(Windows中就是“Alt + 上下方向键”) ,将当前行,或者当前选中的几行代码,在编辑器里上下移动。

“Option + 上下方向键”,上下移动当前行

如果你同时按住 “Shift” 键的话,也就是 “Option + Shift + 上下方向键”(Windows中就是“Alt + shift + 上下方向键”),那就可以复制这几行,然后粘贴到当前行的上面或者下面。

“Option + Shift + 上下方向键”,向上或下复制当前行

另外,你在尝试“Option + 上下方向键”这个快捷键“上下移动”时,可能也发现了,当你把一段代码移动到花括号里面或者外面时,代码前的制表符或者空格的数量会自动发生改变,这样你就不需要移动完代码后再调整了。

移动代码行,代码缩进发生改变

编程语言相关的命令

上面我介绍的几个命令,都是编辑器的基础功能,它和你所使用的语言无关。而接下来我要介绍的这几个命令,则会根据编程语言的不同,产生不同的结果。

1. 添加注释

你在调试代码时,肯定经常需要临时地把一些代码注释掉。如果你要将一行代码注释掉,你只需按下 “ Cmd + / ” (Windows 上时 “Ctrl + /”)。如果你需要把一整段代码注释掉,按下 “ Option + Shift + A”即可。

你可以分别在 JavaScript 和 CSS 文件里使用这两个命令,你会发现这个命令会分别使用 JavaScript 和 CSS 各自的注释语法来添加注释。

当你在 JavaScript 文件里按下 “Cmd + /”,VS Code 在这行代码前添加了两个 “/”。

注释JavaScript代码

当你在 CSS 文件里按下 “Cmd + /”,VS Code 则是在这行代码前添加了 “/* ” ,再最后添加了 “ */”。

注释CSS代码

2. 代码格式化

我们平常在做自己的小项目或者随便写一些脚本的时候,可能不会太在意代码的格式。不过一旦开始团队合作,整个项目组则会选择同一个代码风格和格式以有效降低协同成本。所以定期对自己写的代码进行格式化是个很好的习惯。

你可以按下 “Option + Shift + F” (Windows 上是 Alt + Shift + F)来对整个文档进行格式化,VS Code 也会根据你当前的语言,选择相关的插件。当然,前提条件是你已经安装了相关插件。

格式化CSS代码

你也可以选中一段代码,然后按下 “Cmd + K Cmd + F” (Windows 上是 Ctrl + K Ctrl + F),这样只有这段被选中的代码才会被格式化。

格式化选中的代码行

3. 代码缩进

有的时候,你会觉得代码格式化太重了,需要的可能只是把代码里的缩进调整一下。这时你可以打开命令面板(快捷键“Cmd + Shift + P”),搜索 “缩进”,然后使用 “重新缩进行” 将整个文档的缩进进行调整,但更多时候,你只需要运行 “重新缩进选中行” 来调整部分选中代码行的缩进。

调整代码缩进

其他

上面的这些命令和快捷键,可以说是 VS Code 团队在开发编辑器时精心设计和规划的。不过 VS Code 里还有不少有趣的命令,它们看起来跟其他命令没有什么联系,快捷键的设置也看似没有什么章法。

但其实它们中的大部分都是来自于社区,开发者是在多年软件开发和编辑器使用的过程中,自己摸索出的一些命令和快捷方式,然后在社区里广为流传,于是乎官方也就把这些功能做到了 VS Code 中。

下面我再快速列举几个小技巧,希望你能记住,并快速练习,以成为自己的肌肉记忆。

第一个是调换字符的位置。你可以按下 “Ctrl + t” (Windows 上未绑定快捷键,可以打开命令面板,搜索 ”转置游标处的字符“) 来把当前光标前后的字符调换位置。

“Ctrl + t”,调换字符位置

第二个是调整字符的大小写,我估计这个你会经常用到。你可以选中一串字符,然后在命令面板里运行“转换为大写”或 “转换为小写”, 来变换字符的大小写。

调整代码的大小写形式

第三个是合并代码行。有的时候你可能会为了避免代码看起来过于冗余,就会把比较短小的几行代码合并到一行里面去。这时,你只需要按下 “ Ctrl + j ” (Windows 上未绑定快捷键,可以打开命令面板,搜索 ”合并行“)就可以了,而不需要不断地调整光标、删除换行符。

“ Ctrl + j ”,合并代码行

第四个是行排序。无论是你在写代码,还是写 Markdown,你都可以把代码行按照字母序进行重新排序。不过这个命令比较小众,VS Code 并没有给这个命令指定快捷键,你可以调出命令面板,然后搜索 “按升序排列行” 或者 “按降序排列行” 命令执行。

“Sort Lines Ascending” 命令执行,按升序排列行

第五个是撤销光标的移动和选择。有的时候你移动完光标之后,又希望把光标回退到上一个位置,这时你只需按下 “Cmd + U”(Windows 上是 “Ctrl + U”),就可以撤销这一次光标的移动。

“Cmd + U”,撤销光标的移动和选择

小结

今天我介绍了十几个进阶的命令和快捷键,相较于上一讲光标的移动和选择,它们更贴近于实际工作,但记忆起来就相对不容易了。这时你就需要进行一定的刻意训练,比如说你想把一行代码注释掉,在移动光标到行首,然后输入 “//” 之前,你想一想,有没有办法更好、更便捷地来进行这个操作。

在这样的思维训练过程中,你可能会发现,很多日常频繁使用的操作,它们并没有对应的快捷键。不过不用担心,我在后续的章节会逐步给你介绍更丰富的操作方式,你要做的就是现在赶紧练习,把已有的内容消化,我知道,改变思维方式和习惯可能并不是一件简单和容易的事情。

加油,操作过程中有任何的问题,或者反馈都可以在留言区讨论,我会第一时间给你回复。


精选留言

  • lisiur
    习惯了vim后 还是觉得vim更方便些~作者能不能推荐一些vim很难或不能办到而vs code自带的快捷操作呢
    2018-09-22 17:14
  • 请叫我红领巾
    cmd - 不是缩小窗口吗? 怎么解决切换文件后找不到上个使用的文件?
    2018-09-26 13:52
  • Cmd U只能在同一个文件内跳转。如果能在不同文件光标点击位置跳转就更好了。经常在不同文件的不同位置切换,比如改A位置的时候想起另外一个文件B位置要改,改完B跳回A的时候,找A的位置就有点费神。不知道后续课程有没有相关教程。
    2018-09-24 16:55
    作者回复

    试试 cmd -

    2018-09-25 10:57

  • 二吉
    在命令行里搜索「缩进」/「indent」和「调整大小写」/「uppercase」都没有对应的命令,是需要安装什么插件吗?
    2018-09-24 00:38
    作者回复

    你需要打开一个文件然后搜索这个命令

    2018-09-25 10:57

  • 阿弥陀佛么么哒
    Cmd u 神器啊
    2018-09-23 14:31
  • Zeroassetsor
    去除注释的快捷键是什么?
    2018-10-18 18:14
    作者回复

    是同一个快捷键

    2018-10-22 11:28

  • JamesYinG
    什么时候能把这些也放到vs里就好了,效率就会提高很多
    2018-10-18 10:38
  • norton/Dark
    如果文章后面统一整理下,就方便复习了噢
    2018-10-03 15:56
  • Geek_289f54
    用control+\拆分编辑器后,想用快捷键在不同的拆分编辑器中进行跳转,该如何操作?
    2018-10-03 12:21
  • 万事如意
    ctrl + - 配合 cmd + - 简直神器
    2018-09-28 09:47
  • 机器人
    老师,你说的这些命令我也在别的编辑器或者IDE中见过,有个别指令还是有点不同的,就像老师最后说的,这些东西记忆起来还是有点麻烦,所以想问下老师,有没有这些快捷键的英文全称解释,比如在typora下选中一行就是ctrl + l 这个l应该是英文单词line的开头字母,所以这个快捷键就是选中一行,ctrl + d 是选中一个词条,我就不知道这个d代表什么单词,,但是在vs2013中,ctrl + l 却是删除一行,这里的l代表什么,我也不清楚,ctrl + w是选中一个词条,这里的 w 应该就是word ,比较通用的ctrl + s保存,s就是save,crrl + n 新建,n是new ,举这些例子的意思,就是希望,如果可以的话,老师能在讲解的过程中,顺便解释下这些快捷键字母所代表的英文单词,这样也便于理解记忆,当然,有些可能没有什么特殊意义。
    2018-09-27 10:59
    作者回复

    像 ctrl d 的 d 的选择,我觉得主要是为了避免冲突,ctrl-w 大家会喜欢是关闭文件。

    2018-09-28 08:17

  • Ryoma
    ctrl + t默认是workbench.action.quickOpen的快捷键,这个如何取舍?
    2018-09-26 19:41
    作者回复

    我只是举个例子哈,我觉得 ctrl t 还是要保留的。对于这个功能,我自己觉得相对低频,不用特地给一个快捷键

    2018-09-28 08:49

  • Je 000
    查找命令的时候,建议把命令的英文名字写一下,比如“转置游标处的字符”,这样的命令对应的英文名字。
    2018-09-26 16:04
    作者回复

    没问题

    2018-09-28 08:51

  • 麟 Goku
    作者你好,vue 中经常需要写自定义标签,在 sb3 里有一个命令叫“slurp_find_string”,能快速生成标签,如:
    my-header+命令“slurp_find_string”就会直接出来<my-header></my-header>

    在 vs code 中,有这种命令吗?
    2018-09-23 17:15
  • 风轨
    已经绑定eclipse的快捷键了
    2018-09-23 09:59
  • NikolaDi
    安装了C需要官方插件,为什么有时候会提示代码格式化失败???
    2018-09-22 23:02
  • Aliliin
    每天都要练习练习形成肌肉记忆。
    2018-09-22 21:39
  • 6CYS
    老师,批量行编辑的功能后面会讲吗?比如说块选择后多行编辑
    2018-09-22 21:32
    作者回复

    后面会介绍多光标的

    2018-09-25 11:02

  • 王希桐
    讲的很细致,谢谢老师,这一期没什么要问的,跟着练练就好了,就是来占个楼 哈哈哈
    2018-09-22 14:37
  • dawnnao
    有个疑问:我在训练深度网络时打印了训练进度以便查看,在 pycharm 中没问题,在 VS code 会“掉帧”,导致看不清。这个能解决吗?
    2018-09-22 11:31