20 几个 vscode 快捷键助你起飞

在VSCode的日常使用中,快捷键是我们提高编码效率的得力助手。虽然快捷键众多,但不是所有的都需要记住。专注于那些常用且能显著提升工作效率的快捷键即可。本文中介绍一些本人精选的VSCode快捷键,助你高效编程。

1. 界面导航

  • 显示/隐藏侧边栏 : Ctrl + B
    • 隐藏侧边栏可以提供更多的代码编辑空间。
  • 显示/隐藏终端 : Ctrl + ````` (通常位于键盘左上角)
    • 快速在代码和终端之间切换。
  • 打开命令面板 : Ctrl + P
    • 通过命令面板可以快速执行各种命令。

2. 文本编辑

  • 复制行 : 将光标放置在目标行,然后 Ctrl + C
    • 无需选中文本,直接复制整行。
  • 剪切行 : 将光标放置在目标行,然后 Ctrl + X
    • 类似复制,但会删除原行。

3. 代码视图操作

  • 查看代码大纲 : 侧边栏的"Outline"视图
    • 快速浏览文件结构。
  • 折叠代码 : Ctrl + K, Ctrl + [
    • 将光标下的代码块折叠起来。
  • 展开代码 : Ctrl + K, Ctrl + ]
    • 展开上一步折叠的代码块。
  • 展开所有代码 : Ctrl + K, Ctrl + 0
    • 展开当前视图中所有折叠的代码块。

4. 代码块操作

  • 向上移动代码块 : 选中代码块,然后 Alt + 上箭头
    • 将选中的代码块向上移动。
  • 向下移动代码块 : 选中代码块,然后 Alt + 下箭头
    • 将选中的代码块向下移动。

5. 快速定位与查找

  • 快速定位文件 : Ctrl + P 后输入文件名
    • 快速打开项目中的文件。
  • 查找并替换 : Ctrl + Shift + L
    • 选中文本后,可以快速替换当前文件中的所有匹配项。
  • 逐个查找匹配项 : Ctrl + D
    • 逐个查找并选中匹配的项。

6. 多光标编辑

  • 多光标定位 : 按住 Alt 键,点击多个位置
    • 实现多光标编辑,一次性修改多个地方的文本。

7. 特殊编辑操作

  • 行尾添加分号 : 在行尾按 Ctrl + Right Arrow,然后 ;
    • 自动跳到行尾并添加分号,适合某些语言的语法要求。

当然,让我们继续深入了解VSCode快捷键的妙用:

8. 高级查找与替换

  • 查找 : Ctrl + F
    • 打开当前文件的查找框,快速定位文本。
  • 替换 : Ctrl + Alt + F
    • 结合查找功能,替换当前文件中的文本。

9. 代码片段与格式化

  • 代码格式化 : Shift + Alt + F
    • 格式化当前文件的代码,符合设定的代码风格。
  • 插入代码片段 : Ctrl + Shift + P 然后输入"Insert Snippet"
    • 快速插入常用代码模板,提高编码速度。

10. 窗口管理

  • 拆分编辑器 : Ctrl + \ 然后 Ctrl + Shift + E
    • 将编辑器窗口拆分成多个,同时查看和编辑多个文件。
  • 关闭窗口 : Ctrl + F4
    • 关闭当前编辑的文件窗口。

11. 调试辅助

  • 设置断点 : 点击行号左侧区域,添加一个红点
    • 在调试时,程序会在此处暂停。
  • 启动调试 : F5
    • 开始调试程序,非常有用。

12. 文件操作

  • 保存文件 : Ctrl + S
    • 保存当前编辑的文件。
  • 打开文件 : Ctrl + OCtrl + Shift + O
    • 分别打开文件和跳转到项目中的文件。

通过这些快捷键的熟练使用,你将能够更加专注于编码本身,而不是被频繁的鼠标点击所打断。VSCode的快捷键系统非常强大,掌握它们,就是掌握了提高生产力的钥匙。

提示

  • 如果你在Mac系统下发现某些快捷键不起作用,可以查看VSCode的键盘快捷键设置,进行自定义调整。

通过上述快捷键的熟练运用,可以显著提高在VSCode中的编码效率。如果你有其他好用的快捷键技巧,不妨在评论区分享出来,让我们一起进步。

结语

掌握这些快捷键,让你在VSCode中如鱼得水。持续关注,获取更多前端开发小技巧和深度知识。

相关推荐
全宝10 小时前
🧑‍💻[2025最新]用oh-my-posh打造个性化终端
程序员·操作系统·visual studio code
阿里云云原生19 小时前
Python3 AI 通义灵码 VSCode插件安装与功能详解
后端·python·visual studio code
Selicens21 小时前
VSCode Snippets 魔改专属的 vue 代码片段
vue.js·visual studio code
阿里云云原生1 天前
Python2 AI 通义灵码 VSCode插件安装与功能详解
python·visual studio code
lilye661 天前
程序化广告行业(71/89):ABTester与Tag Manager系统深度解析
visual studio code·odps
阿虎儿2 天前
VS Code 的 launch.json 进行高效代码调试:配置和原理解析
前端·visual studio code
酱酱们的每日掘金3 天前
从零打造吉卜力风格AI绘图网站、写给普通人的 MCP 入门指南、VS Code 又行了!丨AI Coding 周刊第 3 期
ai编程·visual studio code·mcp
我命由我123454 天前
C++ - 头文件基础(常用标准库头文件、自定义头文件、头文件引入方式、防止头文件重复包含机制)
服务器·c语言·开发语言·c++·后端·visualstudio·visual studio code
Captaincc4 天前
Visual Studio Code 发布王炸更新:Agent 模式上线,支持 MCP 协议!
microsoft·visual studio code·mcp
Gixy5 天前
日常在VS Code开发中没注意到的一些实用配置
前端·visual studio code