🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

【VSCode快捷键列表】大幅提升工作效率的实用按键总结(支持Windows/Mac)

大家好!就在几个月前,我还是一个完全不懂编程的小白,但在AI的帮助下,我成功地独立建立(dúlì jiànlì)了两个网站。

通过这次经历,我深刻体会到,有太多技巧是“要是能早点知道就好了……”。其中,与工作效率直接相关的就是“快捷键”。

起初,我因为“太多了记不住!”而对它敬而远之。但实际上,真正有用的快捷键并不多。在本文中,我将结合我的亲身经历,为大家介绍那些我在网站制作过程中觉得“没有它就无法编程!”的精选快捷键。

本文不是简单罗列快捷键,而是会像教给初学者时的自己一样,通俗易懂地讲解“为什么方便”、“在什么场景下使用”。来吧,让我们一起大幅提升工作速度吧!


前言:致不擅长记快捷键的你

一听到“快捷键列表”,你是不是会想象出一张满是字母和符号的表格,然后就想悄悄地关掉页面呢?我也曾是这样。

我能熟练使用快捷键的秘诀只有两个:

  1. 不要试图一次性全部记住。首先,尝试从本文介绍的“神级快捷键”中选一个,有意识地在一天内使用它就好。
  2. 经常思考“这个操作有没有更简单的方法?”然后,用具体的话语向AI(如ChatGPT)提问,例如“在VSCode中,有没有一次性修改所有相同单词的快捷键?”。

本文精选的都是我在AI的帮助下实际掌握的、真正有用的快捷键。来吧,让我们迈出第一步。


必学!让编程速度飙升的“神级快捷键”BEST 5

在众多快捷键中,我精选了5个我每天——不,是每小时使用几十次的“神级快捷键”。只要记住这些,你的编程体验就会焕然一新。

第1名:瞬间选择并修改相同单词!多光标编辑

Windows: Ctrl + D
Mac: Cmd + D

这是我第一个学会并为之感动的快捷键。它可以让你选中页面内多个相同的单词或代码,并进行批量编辑。

经验之谈: 假设在用HTML制作商品列表时,你想把类名从<div class="card">改成<div class="product-card">。以前的我,会用搜索功能一个一个地替换。但自从知道了这个快捷键,我只需双击选中"card",然后按需多次按下Ctrl + D(Mac是Cmd + D)。光标会一个个增加,只用一次输入就能修改所有类名,那一刻的震撼我至今难忘。

使用技巧: 先用鼠标双击想要修改的单词,然后再开始使用这个快捷键,这样选择会更准确、更迅速。

使用Ctrl+D同时选择多个'card'单词,并批量替换为'product-card'的动画GIF。

第2名:告别复制粘贴!整行移动

Windows: Alt + ↑ / ↓
Mac: Option + ↑ / ↓

你可以将光标所在的行,或选中的多行,直接上下移动。再也不需要“选择行 → Ctrl + X → 点击目标位置 → Ctrl + V”这样繁琐的步骤了。

经验之谈: 在调整HTML列表<li>的顺序或整理CSS属性的顺序时,这个快捷键能发挥巨大威力。它完全避免了剪切粘贴时常会发生的缩进混乱或不小心删掉部分代码的错误。这简直就是一根能安全、直观地修改代码结构的“魔杖”。

使用Alt和箭头键上下移动列表项的动画GIF。

第3名:瞬间复制行

Windows: Shift + Alt + ↑ / ↓
Mac: Shift + Option + ↑ / ↓

将当前行向上或向下直接复制。在需要多次编写相似代码时,可以极大地缩短工作时间。

经验之谈: 例如,当你想批量生成相同结构的HTML元素(如导航菜单或列表项)时。以前,我需要复制一行,换行,再粘贴……如此反复。有了这个快捷键,只需连按Shift + Alt + ↓,瞬间就能生成所需数量的列表项。如果再结合第2名的“行移动”,编程速度能提升好几倍。


第4名:从任何地方打开文件!命令面板

Windows: Ctrl + P
Mac: Cmd + P

按下这个快捷键后,屏幕上方会出现一个搜索框,输入项目内的文件名即可瞬间打开。再也无需从左侧的文件浏览器中寻找文件了。

经验之谈: 随着网站制作越来越熟练,文件数量会增加到几十甚至几百个。这时候,光是寻找“那个CSS文件放哪个文件夹了?”就很费劲。自从学会了Ctrl + P,我找文件的时间几乎降为零。输入stylestyle.css就会出现在候选项中。它真正实现了不打断思路的编程。


第5名:一切始于此。命令面板

Windows: Ctrl + Shift + P
Mac: Cmd + Shift + P

和第4名相似,但这个不仅可以搜索文件,还可以搜索并执行VSCode的“所有功能(命令)”。即使忘了快捷键,只要输入想做的操作名称(例如formattheme),VSCode就会帮你调用相应功能。

经验之谈: 当我想“哎呀,格式化代码的快捷键是什么来着?”的时候,只要按下Ctrl + Shift + P,输入format,就能找到“格式化文档”这个命令。只要记住这一个,忘了其他快捷键也能应付,堪称“最后的堡垒”。安装新扩展后,我也会先从这里看看增加了哪些新功能。


【进阶篇】打造你自己的最强环境:修改按键绑定

VSCode的强大之处在于,你可以根据自己的喜好定制快捷键。如果你觉得“这个快捷键虽然方便,但按键位置不顺手”,那就改掉它吧。

这里,我将介绍如何打开配置文件keybindings.json,以及一些我亲测好用的自定义示例。只需复制粘贴,你的VSCode就能变得更顺手。

1. 打开 keybindings.json

  1. 首先,打开命令面板。(Windows: Ctrl + Shift + P / Mac: Cmd + Shift + P
  2. 在搜索框中输入keybindings
  3. 从候选项中选择“首选项: 打开键盘快捷方式(JSON)”,然后按Enter键。

这样就会打开名为keybindings.json的配置文件。一开始可能只有一个[]。我们将在这个括号内写入配置。

2. 复制粘贴即可!推荐的自定义设置

以下是我的推荐自定义设置。你可以将整个代码块复制并粘贴到你的keybindings.json[]中。

[
    // {
    //   "key": "原始按键",
    //   "command": "要执行的命令",
    //   "when": "仅在特定条件下启用"
    // },
    
    // 示例1:让打开终端的快捷键更好按
    // 默认的`Ctrl + ``不好按,所以修改一下
    {
        "key": "ctrl+shift+t", // Windows
        "command": "workbench.action.terminal.toggleTerminal"
    },
    {
        "key": "cmd+shift+t", // Mac
        "command": "workbench.action.terminal.toggleTerminal"
    },

    // 示例2:让关闭编辑器(标签页)更好按
    // 覆盖默认的`Ctrl+W`
    {
        "key": "ctrl+q", // Windows
        "command": "workbench.action.closeActiveEditor"
    },
    {
        "key": "cmd+w", // Mac的默认按键很顺手,不改也可以
        "command": "workbench.action.closeActiveEditor"
    }
]

解说:

就这样,在key部分写上你喜欢的按键组合,在command部分写上想要分配的功能。至于有哪些command可用,你可以在官网的按键绑定文档中查找,或是在命令面板中搜索。请务必构建一个属于你自己的最强快捷键环境。

注意点: keybindings.json是JSON格式的文件。除了最后一项,每个}后面都需要有一个逗号,,编辑时请注意语法错误。如果出现错误,VSCode会提示你,按照指示修改即可。


总结:用快捷键开启新的编程世界

这次,我介绍了从编程初学者时期就一直爱用的、真正有用的VSCode快捷键。最后,让我们再复习一下5个神级快捷键吧。

一开始不必全部记住。先从第1名的Ctrl + DCmd + D)开始,在今天的编程中有意识地使用它吧。当你的手指记住了操作,你的工作速度必将得到提升。

快捷键是能让你不打断思路、将想法直接转化为代码的强大工具。如果本文能成为你舒适编程生活的第一步,我将感到无比高兴。

下一步

掌握了快捷键之后,何不尝试用“扩展”让VSCode变得更强大呢?我们有一篇文章介绍了能进一步提升你生产力的推荐扩展。

【推荐扩展】10款提升VSCode生产力的人气扩展