VSCode 基础键盘快捷键操作

🌙
手机阅读
本文目录结构

VSCode 键盘操作

做到双手不离键盘,今天先来谈一谈核心的键盘操作:

  • 光标的移动
  • 文本的选择
  • 文本的删除

光标移动

移动光标最常用的就是方向键,但是方向键每次只能把光标移动一个位置,可以说是一种相对低效的方式。试想你打算把光标移动到当前行的行末,在没有鼠标的情况下,你可能需要按下右方向键几秒甚至十几秒钟。

不过,不用担心。虽然 VS Code 是基于 Web 技术开发的非原生应用,但是它支持针对单词、行、代码块、整个文档等多种光标移动方式。

今天,我会借助一段非常简单的 5 行 JavaScript 代码来讲解这些操作。

function foo() {
  bar();
}

foo();

针对单词的光标移动(Option+ 左右方向键)

这个你应该比较熟悉,绝大多数原生的编辑应用和文本框都支持。这也是我自己最常用的一组快捷键。

下面这张图显示,第一行代码中的第一个单词是 function,一共 8 个字符,光标的位置在第五个字符 t 的后面。

当你想把光标直接移动到整个单词,也就是 function 的前面,你只需按下 Option(Windows 上是 Ctrl 键)和左方向键。相反,如果要把光标移动到单词的末尾,只需要按下 Option 和右方向键就好了。

VSCode 键盘操作

我们都知道,一直按着方向键,光标就可以不停地,一个字符一个字符地在文档中移动。但如果你同时按住 Option 和方向键,那么光标移动的颗粒度就变成了单词,你就可以在文档中以单词为单位不停地移动光标了。

VSCode 键盘操作

把光标移动到行首或者行末(Cmd+ 左右方向键)

比如第一行代码是 function foo() {,你只需按住 Cmd + 左方向键(Windows 上是 Home 键),就可以把光标移动到了这行的第一列;而如果你按住 Cmd 和右方向键(Windows 上是 End 键),光标就会被移动到 { 的后面。

VSCode 键盘操作

移动到文档首行或者尾行(Cmd+ 上下方向键)

你只需按下 Cmd 和上下方向键即可(Windows 上是 Ctrl + Home/End 键)。

VSCode 键盘操作

代码块的光标移动(Cmd+Shift+\)

很多编程语言都使用花括号将代码块包裹起来,比如 if、for 语句等,你很可能会希望通过一个快捷键,就能实现在代码块的始末快速跳转。比如在这 5 行代码示例中,第一行到第三行代码是函数 foo 的定义,由一对花括号包裹起来,当你把光标放在花括号上时,只需按下 Cmd + Shift + \(Windows 上是 Ctrl + Shift + \),就可以在这对花括号之间跳转。

VSCode 键盘操作

文本选择(基于光标移动加 Shift

掌握了上面的快捷键之后,你还可以非常轻松地掌握文本选择的操作。因为对于基于单词、行和整个文档的光标操作,你只需要多按一个 Shift 键,就可以在移动光标的同时选中其中的文本。

核心:基于光标移动的键位加Shift

针对单词的文本选择(Option+Shift+ 左右方向键)

比如说,你把光标放在第一行代码第四个字符 c 的后面,按下 Option 加左方向键,你就可以把光标跳转到 function 这个单词的开头,这个在前面我有讲过。

如果你同时按下 Option + 左方向键 + Shift 键,那么你就能把光标到 function 单词开头之间的所有字符全部选中,也就是选中 func 这四个字符。

VSCode 键盘操作

注意:方向键可以多次按,扩展的进行复制

复制到行首 / 行首尾(Cmd+Shift+ 左右方向键)

比如第一行代码是 function foo() {,你只需按住 Cmd + Shift + 左方向键,就可以复制光标到这行的行首文本;

而如果你按住 Cmd + Shift + 右方向键,就会复制到{ 的后面内容。

复制到首行 / 尾行(Cmd+Shift+ 上下方向键)

同理,假设说光标放在第二行,然后你按下 Cmd、Shift 和上下方向键,就能把第二行光标到第一行,或者最后一行之间的字符选中。是不是很简单呢?

VSCode 键盘操作

代码块的文本选择

对于代码块的文本选择, VS Code 默认没有绑定快捷键。那么,是不是就没办法了呢?

当然不是。

你可以先使用命令面板找到命令 “选择括号所有内容” 并运行。

后面我还会讲述如何为一些未绑定快捷键的命令绑定自己熟悉的快捷键,请稍安勿躁。

VSCode 键盘操作

删除操作(基于光标移动加 delete[+fn]

了解了光标移动文本选择,再来看删除操作,就变得相对简单了。

比如你想把当前行中光标之前的文本全部删除,就可以先选中这段文本(Windows/Linux: Home + Shift,macOS: Cmd + Left + Shift ),然后再按删除键。

文本选择那里的所有操作,选中后按delete都可以进行删除

不过对于频繁使用的删除操作,你肯定希望单次操作就可以完成任务,而不是重复地选择文本然后删除,那么你需要记住下面几个命令。

删除单词内的字符(Option+delete[+fn])

假设把光标放在第一行第四个字符 c 的后面。

  • Option 加左方向键
    • 把光标移动到 function 这个单词的开头。
  • Option 加左方向键 + Shift
    • 即可选中 func 这四个字符,
  • Option 加 Delete
    • 则会删除 func 这四个字符。

这里你可能看出来了,这些快捷键共同的是 Option 键,然后通过按下 Shift 或者 Delete 键,来达到不同的效果。

VSCode 键盘操作

相反地,Option 加 Backspace(MacOS 上就是“fn + delete”的组合) 则会删除 function 的后四个字符 tion。

VSCode 键盘操作

删除到行首 / 行尾(Cmd+delete[+fn])

(1) 假设你把光标放在第二行代码的中间位置,然后按下 Cmd 和 Backspace(MacOS 上就是“fn + delete”的组合,Windows 上未绑定快捷键,可以打开命令面板运行“删除右侧所有内容”),就能够把第二行代码光标后(右侧)的字符全部删掉。

VSCode 键盘操作

(2) 按下 Cmd 和 Delete 键则是删除当前行中光标前(左侧)的所有内容(Windows 上未绑定快捷键,可以打开命令面板运行“删除左侧所有内容”)。

VSCode 键盘操作

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了