21 常用的 VSCode 快捷键

F2E 前端

在这篇博文中,我将列出我最喜欢的快捷键,是它们让我成为更快的码农。我个人认为使用它们使编码更有趣。看着这事半功倍的操作让我更具积极主动性 :)

21 个 VS Code 快捷键让编码更快、更有趣:

1. 所有文件中搜索文本 (Windows: Ctrl + Shift + F, Mac: Control + Shift + F

我最喜欢的 VS Code 的功能之一,可以在项目目录下的 所有 文件中匹配任意文本。最出彩的部分?它相当的

要使用这个特性,你可以通过按下 Ctrl + Shift + F 来打开试图。它将会编辑器的侧边栏打开并展示:

show-search-1

通过输入文本并按下 回车键,VS code 将会以列表的形式提供给你匹配的结果,如下:

show-search-2

你还可以瞬间 替换所有  结果文件中匹配文本。如果你点击左边的箭头,他将会在下面弹出第二个输入框,你可以在该处输入文本,并点击右边的小框来 替换所有

show-search-3

这个特性可以在你以及团队在最紧迫的情况下节省大量时间。

2. 设置选项卡的着重颜色 (Material 主题--不是独占的)

你是否还在为每天都看到相同的着重颜色而厌倦?如果你使用 VS Code 的 Material 主题 扩展,你可以为你的选项卡选择一个自定义着重颜色,像这样:

红色:

accent-color1

紫色:

accent-color2

黄色:

accent color in vscode

你可以在这儿选择16种不同的颜色!

如果你有该扩展,打开你的命令面板(Ctrl + Shift + P),选择 Material Theme: Set accent color 然后从列表中选择一个颜色,这样就会改变选项卡的下划线颜色,如下:

accent-color in vscode 4

等一下啊...该示例中我并没有使用 Material 主题。

那是因为我已经安装了 Material 主题扩展,这个功能允许在 你所有的主题 中使用。你不是 必须 使用 Material 主题才能使用该功能!

3. 进程管理

你是否还在为 VS code 时不时龟速而烦恼?有没有想过看下是谁在吃你的内存呢?很好,如果你不知道 VS Code 已经有这功能了,就该了解下它允许你打开一个像下面这样的窗口:

process explorer1

是不是看着很眼熟?

你应该在 Windows 的 任务管理器 中看到过,可以通过在 VS Code 编辑器 外面 同时按下 Ctrl + Alt + Delete 打开。 (Mac: Control + Option + Delete)

4. 选择展开的括号块

打开键盘快捷键并搜索 Expand Bracket Selection

这是我花了一段时间才发现的功能之一,因为我根本猜不出这个功能的名称。

当我第一次从 YouTube 视频中看到某人在使用这个功能时,我知道我必须尽一切努力找到这个,这样我就可以在我的项目中使用这个键盘快捷键。

使用此功能将允许你自动选择从开始大括号到结束的整个块:

expand bracket selection for vs code

我发现在你想交换一个 if/else 块的情况下,这些非常有用。

5. 重新打开一个已关闭的编辑器

当你处理一个庞大的项目时,文件随处可见时,由于 VS 代码具有自动扩展目录的习惯,当你意外关闭选项卡并不得不在侧面菜单中再次搜索时,可能会感到有些沮丧。

好吧,实际上您可以通过按 Ctrl + Shift + T 重新打开一个关闭的编辑器。(Mac:Control + Shift + T)你甚至可以打开之前的选项卡,甚至打开在此更前的选项卡,依此类推。这是仅针对选项卡的撤消功能。

6. 通过匹配文本打开文件

说到搜索文件,你可以即时搜索和打开文件。这是我最喜欢的功能之一,因为你真的不需要手动单击目录来重新打开不再打开的文件。你不会相信这样每天能为我节省多少时间。

我将键盘快捷键绑定到 Ctrl+t(Mac:Control+t)来使用这个功能。当你按下时可能会打开一个 Go to Symbol in File 弹出窗口。我从未真正使用过该功能,因此已将其禁用。

如果你想要将其绑定到一个热键,你可以打开键盘快捷方式(File > Preferences > Keyboard Shortcuts),然后搜索 workbence.action.quickOpen。双击并为它分配 Ctrl + T

7. 集成终端

你可以通过按下 Ctrl +` (反引号)来打开 VS Code 的集成终端,并且像普通的 CLI 一样使用。不用离开 VS Code 使用命令行工具,它不香吗?

8. 运行扩展

你可以通过打开命令面板并输入 “Show Running Extensions”,来看看你都有哪些运行中的扩展。

你应该已经猜到它会打开什么了,一个运行扩展的列表。

……但不仅仅时这样。你还会得到这样的信息,可以看到扩展的启动时间比其他的如何。如果你想知道为啥你的编辑器启动时间比平时慢,答案就在下面的窗口里:

show running extensions in vs code

9. 重启

我个人认为i这个时 VS code 最酷的功能之一了,因为它允许你重启时保持你的窗口在面前,而且和你关闭再打开的效果一样。(译者注:个人测试并未发现该功能,查看官方文档也未得,如果你成功,记得留言。)

按 Ctrl + Alt + R. (Mac: Control + Option + R)

10. 将选项卡交换到不同的组

我有一个习惯,在开发时把有一个标签放在错误的标签组。我也尽量避免用鼠标来操作,因为这需要我把手从键盘上移开。我的手很重,所以我想一直放在键盘上。 幸运的是 VS code 有方法来转移一个标签到标签组,按 Ctrl + Alt + Right Arrow (Mac: Control + Option + 右方向键)可以把标签移动到右边的标签组,或者 Ctrl + Alt + Left Arrow (Mac: Control + Option + 左方向键) 移动到左边的标签组:

transfer tab to separate group

11. 选择左/右边全部

有时你想删除光标左/右的所有内容,如果你还没有意思到你可以选择光标左边或右边所有内容,它将提高你在代码中获取的效率,因为他能让操作 变快

例如,选择左边或右边的所有内容:

Windows: Ctrl + Shift + Home/End
Mac: Ctrl + Shift + Home/End

select all to the left or right in vscode1

选择 几乎 所有的左边或右边的内容(节省一半的时间哈):

select all to the left or right in vscode2

12. 删除前一个单词

删除前一个 单词,你可以按 Ctrl + Backspace (Mac: Control + Delete)。 在你输错的时候,这个操作非常有用,你肯定讨厌一直按退格键来删除你想删除的内容:

deleting a previous word in vscode1

实际上,你也可以在 VS Code 之外的 几乎任意地方 使用(译者注:近乎废话,这个是系统级别的快捷键。):

deleting a previous word in vscode2

13. 启动性能

有时,当你想找到为什么会出现性能问题时,又缺乏详细的性能信息时,会是多么痛苦的事啊。

有时候,如果你足够幸运,你会找到一个工具来提供给你所有的答案。在 VS code 中,启动性能是至关重要的。这就是为什么你可以弹出一个有用的窗口并且奇迹般的展示出所有你想要的信息:

startup performance 1

那么让我们行动起来,打开命令面板搜索 Startup Performance

14. 选择一个单词

你可以通过快捷键 Ctrl + Shift + 右方向键 (Mac: Control + Shift + 右方向键) 和 Ctrl + Shift + 左方向键 (Mac: Control + Shift + 左方向键) 来逐个单词选择。

非常有用,选择单词更快(译者注:坑爹的又是系统级别的支持):

select in words

15. 行复制

一个非常强大且广为人知的功能是能够复制行。只需按 Ctrl + Shift + D(Mac:Control + Shift + D):

21 常用的 VSCode 快捷键

16. 跳转文件的开头或结尾

将光标移至文件的第一行或最后一行的最快方法是按 Ctrl + Home(Mac:Control + Home)转到开始位置,按 Ctrl + End(Mac:Control + End)到末尾。

21 常用的 VSCode 快捷键

17. 替换当前文件中所有匹配的文本

回到开始编码时,我不得不用鼠标手动选择匹配的事件。我很高兴那些日子结束了,因为 VS 代码提供了 Change All Occurrences 功能。

你可以选择任意一组文本,如果该选择出现多次,你可以通过按 Ctrl+F2(Mac:Control+F2)一次性选择和修改所有。我个人认为,Alt+F3(Mac:Option+F3)在手腕上感觉更容易一些。

18. 向上或向下移动行

实际上每 10 分钟向上或向下移动一行是非常有用的。

Alt + Up Arrow(Mac:Option + Up Arrow)向上移动,按 Alt + Down Arrow(Mac:Option + Down Arrow)向下移动。

19. 删除一行

你可以通过两种方式立即删除行:

使用 Ctrl + X(Mac:Control + X)剪切:

21 常用的 VSCode 快捷键

使用 Ctrl + Shift + K(Mac:Control + Shift + K)保存到剪贴板。我个人更喜欢 Ctrl + Alt + D(Mac:Control + Option + D

21 常用的 VSCode 快捷键

20.向左或向右移动编辑器

如果您和我一样, 您可能有一种无法控制的愿望,希望在选项卡相互关联且左侧的选项卡为 高级别 文件的组中重新排序选项卡,而向右移动的文件是 较低级别

您可以使用命令 Move Editor LeftMove Editor Right 来控制此操作。我把它们分配到 Ctrl + Num Pad 4(Mac: Control + Num Pad 4)和 Ctrl + Num Pad 6(Mac: Control + Num Pad 6)这样它们对我来说更直观:

moving an editor to the left or right in vscode

21. 在上方/下方添加光标

复制光标可以说是VS代码中节省时间最多的一个功能。这在编写 typescript 时会变得很好

cursor above or below in vs code

按 Ctrl + Alt + Up Arrow(Mac: Control + Option + Up Arrow)将光标添加到上方或按下 Ctrl + Alt + Down Arrow(Mac: Control + Option + Down Arrow)在下面添加光标。

结束语

到此本文结束!希望您找到了一个新的快捷方式来使用!以后再找我发帖!

本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://dev.to/jsmanifest/21-vscode-shor...

译文地址:https://learnku.com/f2e/t/38817

本文为协同翻译文章,如您发现瑕疵请点击「改进」按钮提交优化建议
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!