VSCode经常使用快捷键大全｜VSCode高级玩家宝典之第一篇

点赞是动力 💪，关注是支持 👊！ 建议、疑问、话题欢迎在评论区留言哦！

我以前也是用过不少代码编辑器，从NotePad++、SublimeText一直到PHPStorm，最后VSCode。这个过程每个编辑器我都折腾了不少配置，插件和主题。开发者的编辑器就等同于一个刀客的随身佩刀，一个枪手的随身配枪。一个好的装备的配件能够大大提高咱们的战斗力。

因此对于一个好的程序员，一个好的代码编辑器能够起到很大的做用，在开发的过程当中能够给咱们带来不少便利、帮助、效率和影响。甚至一个好的编辑器能够给开发者平常编程中带来更高的喜悦感。

枪手挑选一把枪会经过几个纬度来选择：重量，击倒力，子弹量和精准度等等。那对开发者来讲也同样的，咱们会考虑这个编辑器的插件，扩展性，兼容性，功能性，美观和快捷键等等。

其中咱们最在意的就是：

• “ 有多少实用的插件给咱们带来开发便利和效率”
• “ 可否兼容咱们的编程语言”
• “ 有没有定义或者方法跳转，让我在复杂的代码中定位到方法、变量和函数”
• “ 代码要看的舒服，代码高亮要优美好看，养眼”
• “ 有经常使用的快捷键，提升开发效率（最好让我不须要用鼠标）”

🌟总结一下其实就是“让咱们写代码更快速，更愉悦，更舒服”

「始」前沿

要全面教你们高效使用VSCode，就要讲到3大板块：快捷键，插件和配置。由于内容很是之多，因此我拆分红了3篇文章提供给你们学习。（感兴趣的童鞋能够关注一下哦 😁）

这篇文章主要详细讲解VSCode的经常使用快捷键，让你们在VSCode中编写代码时，更加的顺手，基本能够脱离鼠标。

基本上记住这些经常使用的快捷键，咱们就能够立刻提升使用VSCode的效率，也会提高咱们编写代码的速度！

让咱们一块儿成为VSCode的高级玩家！

「一」编辑器使用

先讲讲使用编辑器功能的快捷键，这些可让咱们更快捷和顺手的使用VSCode的一些经常使用功能。同时可使用这些快捷键挖掘更多编辑器的隐藏功能哦。

快捷键列表查看「View Shortcut」

若是想查看全部快捷键的童鞋，可使用一下快捷键：

Mac：Command + K，再按Command + S

Linux/Windows：Ctrl + K，再按Ctrl + S

🌟若是须要快速查看某一个特定的快捷键，只须要快捷键列表上方的搜索栏输入直接搜索便可

快速打开文件「Quick open」

能够用于快速搜索，而后打开项目中的文件，当你想在一个大型项目中打开某一个代码文件时，此方法很是实用。

Mac: Command + P

Linux/Windows：Ctrl + P

🌟小技巧

• 输入 ?能够查看帮助文档
• 搜索中会优先列出最近打开过的文件
• 若是想打开多个文件有两种方法：（会在背后打开新的文件，搜索不会被关闭）

  • 打开新文件 Mac: Option + → 或者 Linux/Windows： Alt + →
  • 多窗口打开 Mac: Command + → 或者 Linux/Windows： Ctrl + →

编辑器命令「Command Palette」

在搜索加上>前缀就能够调用命令了。编辑器的命令能够作不少，能够快速搜索快捷键，还能够执行插件的一些命令，很是实用哦！

Mac: Command + P

Linux/Windows：Ctrl + P

🌟小技巧

想快速查看快捷键按钮也能够经过这种方式搜索。

拆分编辑器「Split Editor」

在开发的过程当中，咱们会常常打开几个文件同时编辑，特别是高度封装的代码就会同时在更改多个文件。

前端就更不用说的，不少时候咱们都在同时编辑HTML，CSS和JavaScript文件。

编写Vue的时候就更难受了，HTML和CSS和脚本都是在一个文件中，代码会很是的长，把当前文件在同一个编辑器拆分开，而后分别滑动到HTML，CSS和脚本部分就能够同时更改了。​

Mac: Command +\ 或者 2,3,4

Windows: Shift + Alt + \ 或者 2,3,4

Linux: Shift + Alt + \ 或者 2,3,4

编辑器网格布局「Editor Grid Layout」

默认状况下，编辑器组是垂直列布局的（例如，当您拆分一个编辑器，默认会横向拆分到右手边的）。可是不少时候拆分了多几个编辑器就会发现每一个编辑器的宽度会愈来愈窄，可视度就会大大降低。这个时候咱们但愿可使用网格布局。因此咱们能够用编辑器的2x2 网格布局。

首先咱们须要建立空的编辑器组：打开方式查看 > 编辑器布局 > 2x2 网格：

默认状况下，关闭编辑器组的最后一个编辑器也将关闭整个编辑组，下次要使用的时候须要从新开启网格布局，可是咱们能够在setting.json的配置里改变workbench.editor.closeEmptyGroups: false。

快速打开和关闭侧边栏「Opening and Closing the Sidebar」

在咱们专一于编程的时候，左边的侧边栏会占用咱们必定的宽度，特别是使用双屏（尤为是竖向的屏幕）或者是使用拆分编辑器模式。​收起侧边栏能够帮咱们节省不少空间。

Mac: Command + B

Windows/Linux: Ctrl + B

快速打开集成终端「Open new Terminal」

在开发的过程当中，咱们常常须要用到终端来执行命令。快速打开终端会给咱们带来不少便捷。

Mac: Control + `

Windows/Linux: Ctrl + `

「二」辅助代码编写

接下来咱们来说讲在编程中经常使用的辅助快捷键。这些快捷键能够辅助咱们提高编写代码的速度和效率，让咱们的双手更集中​在键盘上，减小消耗在键盘和鼠标切换过程的时间。

合并行「Join Line」

Mac：Control + J

Linux/Windows：使用上面说到的快捷键打开快捷键查询列表，搜索"合并行"（editor.action.joinLines），鼠标放在合并行的快捷键上，而后点击编辑图标，这里能够设置一个你喜欢的快捷键。

代码格式化「Code Formatting」

这个快捷键帮咱们快速调整代码缩减，不过我更加推荐使用Prettier插件，这边文章后面会讲到。

Mac: Shift + Option + F

Windows：Shift + Alt + F

Linux：Ctrl + Shift + I

清楚多余空格「Trim Trailing White Space」

这个命令帮助咱们清楚代码先后的多余空格，若是咱们项目有设置严格的Lint规范，这个会帮咱们减小多余空格的报错。

Mac: Command + K Command + X

Windows/Linux：Ctrl + K Ctrl + X

🌟小技巧

这个功能是能够自动执行的，不须要咱们一个个选择去清除，咱们能够在VSCode的配置里面设置自动清除。下面教你们两种配置方式。

使用settings.json

1. 打开 编辑器命令（Mac： Command+ P/Windows： Ctrl+ P）
2. 在搜索框输入 > Open Settings，而后选择 首选项：打开设置(json)
3. 而后settings.confg中加入 "files.trimTrailingWhitespace": true，若是已存在这个配置，确保值是 true。
4. 保存文件便可生效（若是没有立刻生效，能够重启VSCode）

使用可视化（UI）设置

1. 打开 编辑器命令（Mac： Command+ P/Windows： Ctrl+ P）
2. 在搜索框输入 > Open Settings，而后选择 首选项：打开设置(ui)
3. 在 文本编辑器> 文件中找到 Trim Trailling Whitespace而且勾上（咱们也能够在搜索框直接输入 Trim Trailling Whitespace快速找到这个配置的位置），可参考下面的截图。

代码折叠「Code Folding」

在开发项目中，不少时候前端的代码在单个文件下都会越写越多，当咱们想专一看一部分或者寻找某段代码时就很有困难了​。通常这个时候咱们都会把一些不重要的代码段折叠起来。可是手动用鼠标一个一个点击效率是很低的。代码折叠快捷键在这种状况就很是实用了。

折叠代码快捷键

Mac: Command + Option + [

Windows/linux: Ctrl + Shift + [

展开代码快捷键

Mac: Command + Option + ]

Windows/linux: Ctrl + Shift + ]

往上/下复制行「Copy Line Up/Down」

在写代码的时候，咱们常常会编写一些很是类似的代码连续几遍或者是先复制而后稍微更改一下。​特别是在JS中的require或者import这种引入包的时候。若是咱们须要选中一行而后复制，回车而后粘贴，这波操做确实不够快呀，有没有更快速的复制方式呢？有的！

Mac: Shift + Option + ⬆️ / ⬇️

Windows: Shift + Alt + ⬆️ / ⬇️

Linux: Ctrl + Shift + Alt + ⬆️ / ⬇️

固然，若是你不喜欢这个默认的快捷键，能够在快捷键列表中修改。

选择单词「Select Word」

不少时候在开发过程当中，咱们都会须要多个相同单词（多个变量名）同时修改，多是局部方法中的单词，也多是这个文件中的同名单词的修改。比较古老的方法就是用全局搜索而后替换。

在VSCode中有一个更加快速和简便的方法，而且可让你局部选择或者是快速所有选择。选中后就能够同时修改选中的单词了。

局部选择

首先选中你须要的单词而后按下面的快捷键便可：

Mac: Command + D

Windows/Linux: Ctrl + D

若是咱们屡次按下快捷键，编辑器会继续往下找到相同的单词，而后自动选中。

全局选中

同样首先选中你须要的单词，而后按下快捷键便可：

Mac: Command + Shift + L

Windows/Linux: Ctrl + Shift + L

这个惟一不同的就是，这个会找到当前文件下的全部相同的单词，而且选中。

跳转到特定行数「Navigate to a Specific Line」

在排查错误的时候常常会用到的一个快捷键，咱们须要找到当前文件下特定行的代码。

Mac: Command + G

Windows/Linux: Ctrl + G

🌟小技巧 结合咱们上面学习到的，咱们也能够先使用快捷键（Mac：Command + P）打开编辑器命令 而后输入: 再输入行数便可。

文件中跳转特定符号「Go to Symbol in File」

这里我讲解一下符号指的是什么，它就是在代码中的方法、类或者是属性。

因此在一个比较大的代码文件中，这个快捷键会很是实用。能让咱们快速找到想要编辑的方法、属性或者类！

Mac: Command + Shift + O

Windows/Linux: Ctrl + Shift + O

🌟小技巧

若是文件中的符号过多，咱们能够在@后面加上:，就能够为全部符号分类让，咱们更好找到须要的符号和位置。

项目中跳转特定符号 「Go to Symbol in Workspace」

这个快捷键与文件中跳转的雷同，惟一区别就是这个能够搜索出整个项目中的方法、类和属性，而且快速跳转到这些符号的位置。

Mac: Command + T

Windows/Linux: Ctrl + T

删除整个单词「Delete Previous Word」

在咱们打错一个单词的时候，咱们常常都会连续按删除键直到咱们想要从新开始的地方。其实对咱们程序员来讲，打字都是飞快的，从新打过远远比一个一个字母删除来的快的多。（有些童鞋可能还会用鼠标来选中要删除的，其实在写代码的时候，能够不用鼠标尽可能不用鼠标，这样速度会更快哦）只要按下这个快捷键就能够整个单词删除掉。

Mac: Command + Delete

Windows/Linux: Ctrl + Backspace

按单词选择「Select by words」

为了在编程中脱离使用鼠标，咱们常常须要选中一行代码中的几个单词，这个快捷键可让咱们快速作到这样的操做。

Mac: Command + Shift + ← / →

Windows/Linux: Ctrl + Shift + ← / →

快速复制当前行「Duplicate Line」

用过IDE的基本都很熟悉这个操做，就是快速往下复制当前行的代码。这个在编程过程当中也是很是实用。​

其实咱们能够选中一段代码，按下这个快捷键也能够​往下复制整个内容哦。

Mac: Command + Shift + D

Windows/Linux: Ctrl + Shift + D

删除一行「Deleting a Line」

用于快速删除一整行的代码。

Mac: Command + X

Windows/Linux: Ctrl + X

往上/下添加同时编辑「Add Cursor Above/Below」

用过SublimeText的同窗应该都很熟悉这个功能。咱们能够在多个位置添加鼠标编辑点，而后同时编辑。VSCode也有这样的快捷键。

Mac: Command + Option + ↑ / ↓

Windows/Linux: Ctrl + Alt + ↑ / ↓

🌟小技巧

若是想和上图同样，在属性的单词前添加好同时编辑鼠标点后，一会儿即跳到全部属性名的最后面，咱们只须要先在全部名字前面加入同时编辑鼠标而后用一下快捷键便可：

---

Mac: Command + →

Windows/Linux: Ctrl + →

多行选中同时编辑 「Column Selection」

这个快捷键须要配合鼠标一块儿使用。咱们常常会在编写代码的时候选中一大串代码进行编辑，这个时候这个快捷键就很是使用。

咱们还能够按住这个快捷键，而后选择咱们须要同时修改的位置，而后多个鼠标位置同时编辑哦！

Mac: Shift + Option

Windows/Linux: Shift + Alt

修改“符号” 「Rename Symbol」

VSCode默认支持JavaScript和TypeScript的方法名、类名和属性名等符号修改。在修改后，文件下引用到这些符号的地方都会被自动的同时修改。其余语言的支持须要插件。

Mac: F2

Windows/Linux: F2

「待续」总结

这里我已介绍完全部经常使用的快捷键和编辑器中的使用小技巧。不少须要学习快捷键的小伙伴们不可能一会儿就会使用和记住。舒适提示：​因此能够先收藏本文章，当须要的时候就能够立刻搜索找到并使用。当咱们用多了，也就天然而然熟能生巧了。

当咱们习惯于使用这些快捷键，咱们就会发现咱们代码编写速度都会有所提高的。

下一篇VSCode高级玩家宝典，我会讲解VSCode中的全部经常使用插件（包括前端/后端），敬请期待！

好文推荐

• 🔥 《前端必看的8个HTML+CSS技巧》 --- CSS是一个很独特的语言。看起来很是简单，可是某种特殊效果看似简单，实现起来就很有难度。这篇文章主要是给在学习前端的童鞋分享一些新的CSS技巧，一些在前端教程和培训课堂中不会讲到的知识。第二就是让还在前端开发这条道路上的童鞋们，从新燃起对前端排版和特效的热爱和热情！🔥
• 🔥 《写给想学和在学编程的大家，学习编程的7个好处》 --- 其实选择学编程是能改变人生的。可能起初不少人学编程，报了一个编程培训班，为了就是能拿到更高的工资或者有更好的工做环境。最后坚持着坚持着，最后会发现编程还会给咱们带来不少我的能力和技能上的提高。
• 🔥 《5大法则助你 成为更出色的开发者》 --- 这篇文章传授5大法则助咱们成为更出色的开发者，在众多开发者中脱颖而出的诀窍，也会在咱们的技术职业生涯中给咱们不少的帮助。
• 🔥 《用“易于改编”原则，提高编程水平，写出更好的代码》 --- 不管新手仍是资深开发者都会常常问一个问题，“怎么写好的代码？”，要知道怎么写好代码，首先咱们要知道怎么样才是好的代码。要有明确的目标，才能知道如何达成目标。在《程序员修炼之道》中提到的“ETC Principle” -- 易于改编原则。这个原则看似简单，可是咱们越是深刻思考越是以为“简约而不简单”。

本文使用 mdnice 排版