VS Code 快捷键 💻Visual Studio Code 快捷键指南,提高工作效率以及您需要学习的 30 个我最喜欢的快捷键简介快捷键速查表键映射键盘快捷键设置(JSON)有用的快捷键结论

2025-05-25

VS Code 快捷键💻Visual Studio Code 快捷键指南,提高工作效率以及您需要学习的 30 个我最喜欢的快捷键

介绍

快捷备忘单

键盘映射

键盘快捷键设置(JSON)

有用的快捷方式

结论

介绍

Visual Studio Code 允许您通过命令面板或键盘上的快捷方式访问其提供的几乎所有功能。

你可能每个工作日都要工作 8 个小时,希望大部分时间都能用来写代码。所以你花了很多时间盯着你选择的代码编辑器。

了解一些快捷键可以帮助你更快地完成工作。知道如何更快地找到你需要的文件。立即运行你需要的 NPM 命令,而不是打开外部终端。

双手在键盘上快速打字

快捷备忘单

Visual Studio Code 的开发者

你可以下载这些速查表,打印出来放在桌上方便查阅,或者在上下班途中学习。不要试图一下子学会所有技能,这需要时间。所以要有耐心,最终你就能掌握它们。

键盘映射

你是 Vim 用户吗?也许 Emacs 的快捷键已经刻在你的脑子里了?又或者,不知何故,你用过 notepad++,并且很喜欢它的快捷键😵?

Visual Studio 为大家准备了一个扩展!让我们来安装 ⚛ Atom Keymap。我们几乎不用鼠标就能完成安装。

1)打开Visual Studio Code。

2) 打开 Visual Studio Code 后,按下:CTRL+SHIFT+X。该快捷键会打开扩展列表,并将光标聚焦到搜索栏上。输入以下内容@category:keymaps。(如果您想了解更多关于本节中扩展如何工作的信息,请在下方留言!)

3) 现在您将看到一个键盘映射列表。按下Tab,然后按下Down Arrow ⬇

4) 按直到选择了Atom Keymap。现在按Enter

5) 遗憾的是,我找不到选择“安装”按钮的方法。现在你需要点击🖱!

几乎所有你能想到的编辑器都能找到对应的键盘映射。安装你最喜欢的那个,就能拥有你的快捷键了!是不是很酷?

键盘快捷键设置(JSON)

有两种方法可以查看键盘快捷键设置。其中一种是通过图形界面,也可以选择通过 JSON 文件编辑快捷键。

图形界面

我们可以通过按下来打开图形界面CTRL+k,然后按住CTRL即可按下CTRL+s

键盘快捷键设置 GUI

在顶部,你有一个搜索栏,可以在其中搜索要查看的命令或键盘快捷键。这些对话框在 Visual Studio Code 中看起来大致相同,你会开始经常看到它们。

您可以看到四列。让我们逐一查看。

*命令:Visual Studio Code 执行的操作。

  • 按键绑定:您必须按下才能执行操作的组合键。

  • 适用场景:这是 Visual Studio Code 的过滤器,它会告知 Visual Studio Code 快捷方式在该上下文中是否可操作。某些过滤器可能是集成终端、源代码中的错误等等。

  • 来源:Visual Studio Code 可以通过多种方式获取快捷方式。最常见的方式Default是使用 Visual Studio Code 开箱即用的命令。User顾名思义,是用户创建的命令。第三种方式是通过Extension。扩展程序作者也可以决定添加快捷方式。如果您最喜欢的快捷方式不起作用,这可能是它停止工作的原因。

要更改按键绑定,请双击该行,然后弹出一个对话框。然后按下所需的组合键,再点击Enter

键绑定 JSON 文件

现在我们知道了键绑定的一般工作原理,让我们看一下该keybindings.json文件。

其中有两个:默认文件keybindings.json和用户自定义keybindings.json文件。按下CTRL+SHIFT+PF1打开命令面板并输入,keyboard shortcuts现在您应该在命令面板中看到至少两个条目。

  • 首选项:打开“默认键盘快捷键 (JSON)”。
    这是 Visual Studio Code 存储所有默认快捷键的文件,底部列出了未使用的可用快捷键列表。我建议避免在此处更改它们。

  • 首选项:打开键盘快捷键 (JSON)
    这是一个用户自定义的快捷键文件,您应该编辑此文件。一开始,它只是一个空数组,仅此而已!

要在 JSON 文件中添加快捷方式,您只需添加如下所示的对象:



[
    {
        "key": "CTRL+ALT+P",
        "command": "git.pull",
        "when": ""
    }
]


Enter fullscreen mode Exit fullscreen mode

您需要指定键和命令。这when会告诉 Visual Studio Code 应该在哪里运行此命令。如果您将其留空,它将在所有位置监听该命令。我们在上一部分中讨论过这一点。

有用的快捷方式

打开命令面板

你已经知道这一点,但也许你跳过了这一部分😉

  • CRTL+SHIFT+PF1这将打开 Visual Studio Code 中最强大的功能——命令面板。只需输入你想要的内容,它就能找到它!

打开和关闭侧边栏

有时你想获得更多水平空间,而侧边栏又挡住了你的视线!只需按下

  • CTRL+B

您可以打开或关闭侧边栏

进入 Zen Mod

你喜欢 Visual Studio Code 中的 Zen Mod 吗?没错,它内置了!
为此,你需要按下:

  • CTRL+k,松开两个键并按下z

这将打开或关闭 Zen Mod。

聚焦集成终端

我最喜欢的功能之一是 Visual Studio Code 中的集成终端。我 99% 的时间都在使用它!所以要快速打开或关闭它,你需要按下:

  • CTRL+j

这将打开集成终端并将光标聚焦在其中。如果再次按下它,它将关闭,并且光标将返回到原来的位置。

在项目中搜索文件

Visual Studio Code 内置了强大的文件搜索功能。使用远程扩展程序时,搜索速度也非常快。要打开它,只需按:

  • CTRL+p

这会打开一个对话框,您可以在其中查看最近打开的文件,这一点非常实用。它还支持模糊搜索。这意味着您可以输入任何单词,它会根据文件的整个路径进行搜索。所以您不必输入精确的单词!该对话框还支持更多功能,例如go-to line调试等等!如果您想了解更多信息,请在下方评论。

切换到最近打开的工作区

你在微服务架构中工作,需要一直切换文件夹吗?因为你不使用 Mono 仓库?我有个快捷方式给你!点击:

  • CTRL+r

这将打开一个对话框,其中显示最近打开的工作区/文件夹列表。
额外提示:如果您点击CTRL+ENTER该对话框,Visual Studio Code 会在新窗口中打开它。

拆分编辑器窗口

人们喜欢 Vim,因为它可以轻松地在编辑器中拆分视图。Visual Studio Code 也内置了此功能。只需按下

  • CTRL+\

要创建 2 列或

  • CTRL+k,松开k并按住CTRL并按下\

创建新行。第二个听起来比实际操作要难,但一旦你记住了,只需几分钟,你就知道如何更改或创建新的快捷方式了😉

聚焦编辑器窗口

现在你已经知道如何拆分编辑器窗口了,你还需要学习如何快速切换这些视图。这很简单,并且有一个默认的快捷键。你需要按下

  • CTRL+[1-9]

这意味着你需要按下 ,CTRL再加上你想要聚焦的窗口编号。对于第一个窗口,按下CTRL+1,第二个窗口CTRL+2,你明白了吗?很简单,对吧?

关闭当前编辑器窗口

现在您打开了太多编辑器窗口,想要关闭它们。按

  • CTRL+w

这将关闭当前打开的窗口。

仅关闭已保存的编辑器窗口

有时你打开了太多编辑器,以至于你不知道哪些文件被保存了,哪些文件被保存了。是的,我知道你可以通过标签栏上的那个点看到它,但仍然太多了,你无法集中注意力找到正确的文件。Visual Studio Code 可以帮你!只需按下

  • CTRL+k然后松开CTRLk按下u

这将保存所有窗口,以便您可以检查未保存的窗口并保存它们。

打开一个新文件

你需要一个新的文件来编写代码?或者,你需要为你的小项目创建一个新文件?点击

  • CTRL+n

这将打开一个新的编辑器。

更改当前文件的语言

您想切换当前文件中的选定语言,因为您想要Javascript (react)而不是Javascript?按

  • CTRL+k然后松开CTRL并按k“m”。

这将打开一个新的对话框,您可以在其中搜索您想要的语言。

转至行

现在我们来稍微讨论一下如何让编辑更容易。你在第 1042 行有一个错误(如果你的文件那么长,这本身就是问题所在)。你不想滚动!按

  • CTRL+g

这会打开一个对话框,你需要输入要跳转到的行号。这个功能与 结合使用CTRL+p会非常强大。

转到符号

你的第一个问题是,什么是符号?在编程语言中,符号通常是变量。在 CSS 中,它们是选择器。要查看对话框,请按

  • CTRL+SHIFT+O

这将打开一个对话框,其中显示当前文件中可用符号的列表。

  • CTRL+t

您会看到一个只有一个 的对话框#,您需要输入所需的符号,Visual Studio Code 会在整个工作区中搜索该符号(前提是您使用的语言支持该符号)。所以您需要自行检查。

向上或向下移动一行。

有时你需要移出你之前在行内的那一行if,或者只是移动一行,因为它被调用得太早了。你可以按

  • Alt+Down

将当前选定的行向下移动一行

  • Alt+Up

将当前选定的行向上移动一行

复制当前行

你想用一些变量填充这个数组,但又懒得写循环。那么如何获取array[0] array[1]array[2]填充呢?只需复制第一行两次,然后根据需要进行修改即可。为此,请按

  • ALT+SHIFT+Up

这将复制当前选定的行并将其粘贴到上面的一行

  • ALT+SHIFT+Down

这将复制当前选定的行并将其粘贴到下面的一行中
(此快捷方式在这里很方便)

显示建议

Visual Studio Code 内置了建议功能。大多数情况下,它会自动弹出,但有时你确实需要它,它却不会弹出。很简单,按下

  • CTRL+Spacebar

这将打开建议对话框

注释掉当前选择

有时你需要隔离代码并注释掉其周围的所有内容。按

  • CTRL+/

如果你选择了多行,它会将这些行注释掉。如果你没有选择任何内容,它只会注释掉那一行。

选择多行代码

要注释掉该代码块,您需要选择多行。按

  • CTRL+Shift+Up

从当前行开始选择并向上移动光标。

  • CTRL+Shift+down

从当前行开始选择并向下移动光标。

折叠和展开你的代码

你有这么一个大函数,但你实在看不下去了,因为它太大了,需要重构,但你又没时间,所以想把它忘掉?你可以折叠和展开代码,这样 100 行代码就能变成 1 行。要做到这一点,请按

  • CTRL+SHIFT+[

折叠(隐藏)代码

  • CTRL+SHIFT+]

展开(显示)代码

剪一条孔线

对于此代码,您不能选择任何代码。按

  • CTRL+x

当未选择任何内容时,这将剪切整条线。

缩进/减少缩进线

人们通常知道如何缩进代码。你可以选择要缩进的代码,然后按

  • Tab

根据需要按 Tab 键多次,直到代码看起来满意为止。
你知道你可以减少缩进吗?将代码从右移到左。只需按

  • SHIFT+tab

结论

还有更多快捷键。这些快捷键是我最常用的。希望这能帮助你更好地理解 Visual Studio Code 中的快捷键,并帮助你创建自己的快捷键。

我是否忽略了每个人都需要知道的有用命令?
您是否遗漏了什么?有什么不明白的地方?
请留言。我会尽力解答您的所有问题!

👋问好! Instagram | Twitter | LinkedIn | Medium | Twitch | YouTube

文章来源:https://dev.to/lampewebdev/the-guide-to-visual-studio-code-shortcuts-higher-productivity-and-30-of-my-favourite-shortcuts-you-need-to-learn-mb3
PREV
😲🤯你需要了解的 JavaScript 最出色的新功能:可选链式调用
NEXT
💻我的 Web 开发 VS 代码设置、主题、扩展、提示和技巧