不管是编写代码还是写作,在文本编辑器中全程依靠键盘一气呵成的体验无疑是最爽的,但是想做到这一点很难。
原因就是我们在很多时候不知道 VS Code 的快捷键是什么,或者在某些时候我们忘记了快捷键,这个时候依然得借助鼠标做一些键盘更擅长的操作。
其实最理想的状态是我们形成某种肌肉记忆,在操作某些步骤的时候下意识是用键盘而不是鼠标。
我们在这里强调手不离键盘并不是说用鼠标更 low,而是在编写代码过程中绝大部分时候键盘的效率远胜鼠标,当然鼠标也有其可取的地方,尤其是跟键盘一起配合的时候。
本文采用 Mac OS 下的快捷键,当然也会配上 Windows 的用法,只是不保证准确性
光标移动大法
如果你现在还只是会用方向键移动光标就太 out 了,我会介绍几种非常常见也非常实用的光标移动技巧,帮助你大大提高开发效率。
行首尾移动
有时候我们需要跳转行首或者行尾,用方向键一个个移动显然是低效率的,其实在 VS Code 中也有相关的快捷键。
「Cmd + 左右方向键」可以移动到行的行首和行末,在 Win 系统下则更简单,你只需要按「Home或End」转移到行首或行尾,当然如果你是 Mac 电脑,而且用了兼容 Mac 的外接键盘,外接键盘普遍也有Home、End,这也是生效的。
![5ad1bc131a4b77f88669e84d6961403a.gif](https://i-blog.csdnimg.cn/blog_migrate/0cb078317e2b80bc41a52c06269426a4.gif)
代码块移动
如果你想快速从一个代码块内部跳转到代码块头部或者尾部应该怎么操作?
这个需要三个键位一起按,在Mac 中是「Cmd + Shift + \」,在 Windows 上是 「Ctrl + Shift + \」
![94515c3c69cc4e501c6e8ad739fcbf95.gif](https://i-blog.csdnimg.cn/blog_migrate/0e1bc1eec9f822ebd477244e8d162231.gif)
基于单词的移动
Mac:Option + 左右方向键
Win:Ctrl + 左右方向键
![e76936ef529e25d678a6b0af8d329017.gif](https://i-blog.csdnimg.cn/blog_migrate/ddf9e283a35933f5a183af7fb06cf454.gif)
整个文件的首尾移动
Mac: Cmd + 上下方向键
Win: Ctrl + Home、End
![171ee273521dd979a26be3ce675171e7.gif](https://i-blog.csdnimg.cn/blog_migrate/d612fea134b700996d3abe242c186b08.gif)
代码滚动
有时候我们的文件中的代码长度超过了整个页面的高度,这个时候我们可能需要滚动页面,通常情况下我们会选择用鼠标滚轮操作,其实 VS Code 提供了非常方便的快捷键。
单行滚动
这个时候我们的滚动幅度是以行为单位的。
Mac:Ctrl + PgUp、PgDown
Win:Ctrl+ 上下方向键
![c0d8b275540cf4fe4fe47cfb021d8524.gif](https://i-blog.csdnimg.cn/blog_migrate/e04e4a4365505e6dfb2dda9cce77fd0c.gif)
整页滚动
这个时候是直接滚到文件的头部或者尾部。
Mac:Cmd + PgUp、PgDown
Win:Alt + PgUp + /
![0f9a2aa6c10330f04cfd2ef52d2414d5.gif](https://i-blog.csdnimg.cn/blog_migrate/e9dcf5f36d0b0209e693a97ad0c8edf2.gif)
选择操作
还记得我们移动光标的快捷键吗?在这里记忆选择操作的秘诀就是在所有移动操作的快捷键中再加入一个「Shift」键,这就是选择操作。
我们试试选择一个单词:
![71641b2e4b32d0ec37d2e33b906fd322.gif](https://i-blog.csdnimg.cn/blog_migrate/ac4049100f882a25ee84afd87c56e574.gif)
删除操作
删除行
Mac:Shift + Cmd + K
Win:Shift + Ctrl + K
![71641b2e4b32d0ec37d2e33b906fd322.gif](https://i-blog.csdnimg.cn/blog_migrate/ac4049100f882a25ee84afd87c56e574.gif)
删除光标左右文本
这里涉及两个 delete 键,比如我的键盘是这样的:
![c510ede7e31d4c56f087c6a8c391cc3b.png](https://i-blog.csdnimg.cn/blog_migrate/1617c40385650fed199ecf252d69a696.jpeg)
按照上图的按键提示,我们可以删除光标左侧文本:
![78fb1eccec6ba91e270b21ecbfc93d20.gif](https://i-blog.csdnimg.cn/blog_migrate/09a376ed94befb9b0923ceb26a0f25d4.gif)
再看下一个示意图:
![25f3fb8653fec20309d8c0e66df2955a.png](https://i-blog.csdnimg.cn/blog_migrate/d5980fe0d844900ae6cceb42af0eaff0.jpeg)
按照上图指示,我们可以删除光标右侧文本:
![8c2619b9d535fd8a26a0366ccd6909d6.gif](https://i-blog.csdnimg.cn/blog_migrate/6d17ab97ccf1d769b9d2a9a570921b16.gif)
小结
我们基本上把常用的快捷键进行了一个总结,在实际编码过程中我们可以可以练习这些常用快捷键,虽然一开始影响效率,但是长期而言这是个不错的投资。
公众号
想要实时关注笔者最新的文章和最新的文档更新请关注公众号程序员面试官,后续的文章会优先在公众号更新.
简历模板: 关注公众号回复「模板」获取
《前端面试手册》: 配套于本指南的突击手册,关注公众号回复「fed」获取
![466bcd86dc5514effda5064ac4a28aec.png](https://i-blog.csdnimg.cn/blog_migrate/64415b6102d7fb1433eac225dfeae046.jpeg)