Visual Studio Code 快捷键终极指南（前端工程师专用）

Visual Studio Code 快捷键终极指南（前端工程师专用）

作为前端工程师，掌握 VS Code 快捷键能大幅提升开发效率。我整理了最实用的快捷键分类表，包含基础操作、代码编辑、导航等核心功能，并标注了 Windows/Linux 和 macOS 的键位差异。

一、基础操作快捷键

功能	Windows/Linux	macOS	使用场景
打开命令面板	Ctrl+Shift+P	Cmd+Shift+P	访问所有 VS Code 功能
快速打开文件	Ctrl+P	Cmd+P	通过文件名搜索打开文件
新建文件	Ctrl+N	Cmd+N	快速创建新文件
保存文件	Ctrl+S	Cmd+S	保存当前文件
保存所有文件	Ctrl+K S	Cmd+K S	保存所有打开的文件
关闭编辑器	Ctrl+F4	Cmd+W	关闭当前标签页
切换侧边栏	Ctrl+B	Cmd+B	显示/隐藏侧边栏
切换终端	Ctrl+``	Ctrl+``	显示/隐藏集成终端
切换问题面板	Ctrl+Shift+M	Cmd+Shift+M	查看错误和警告
重新加载窗口	Ctrl+R	Cmd+R	刷新 VS Code（插件开发常用）

二、代码编辑快捷键

文本操作

功能	Windows/Linux	macOS	使用场景
复制行	Shift+Alt+↓/↑	Shift+Option+↓/↑	快速复制当前行
移动行	Alt+↓/↑	Option+↓/↑	调整代码顺序
删除行	Ctrl+Shift+K	Cmd+Shift+K	删除整行代码
插入行	Ctrl+Enter	Cmd+Enter	在当前行下方插入新行
向上插入行	Ctrl+Shift+Enter	Cmd+Shift+Enter	在当前行上方插入新行
跳转到匹配括号	Ctrl+Shift+\	Cmd+Shift+\	在复杂代码中导航

多光标操作

功能	Windows/Linux	macOS	使用场景
添加光标	Alt+Click	Option+Click	在多个位置同时编辑
列选择	Shift+Alt+拖动	Shift+Option+拖动	垂直选择多行文本
选择所有匹配项	Ctrl+Shift+L	Cmd+Shift+L	批量修改相同变量名
添加下一个匹配项	Ctrl+D	Cmd+D	逐个选择相同文本

代码格式化

功能	Windows/Linux	macOS	使用场景
格式化文档	Shift+Alt+F	Shift+Option+F	使用 Prettier/ESLint 格式化代码
格式化选中部分	Ctrl+K Ctrl+F	Cmd+K Cmd+F	格式化选中代码段

三、导航与搜索快捷键

文件内导航

功能	Windows/Linux	macOS	使用场景
转到行号	Ctrl+G	Ctrl+G	输入行号快速跳转
转到符号	Ctrl+Shift+O	Cmd+Shift+O	快速定位函数/类
转到定义	F12	F12	查看变量/函数定义
查看引用	Shift+F12	Shift+F12	查找变量/函数使用位置
后退/前进	Alt+←/→	Ctrl+-/Ctrl+Shift+-	在代码历史位置导航

全局搜索

功能	Windows/Linux	macOS	使用场景
文件内搜索	Ctrl+F	Cmd+F	在当前文件搜索
全局搜索	Ctrl+Shift+F	Cmd+Shift+F	在整个项目搜索
替换文本	Ctrl+H	Cmd+Option+F	查找并替换内容
切换正则搜索	Alt+R	Option+Cmd+R	使用正则表达式搜索

四、编辑器管理快捷键

功能	Windows/Linux	macOS	使用场景
拆分编辑器	Ctrl+\	Cmd+\	并排查看多个文件
切换编辑器组	Ctrl+1/2/3	Cmd+1/2/3	在拆分视图间切换
聚焦下一个编辑器	Ctrl+PageDown	Cmd+Option+→	在标签页间切换
聚焦上一个编辑器	Ctrl+PageUp	Cmd+Option+←	反向切换标签页
关闭所有编辑器	Ctrl+K W	Cmd+K W	关闭所有打开的文件

五、前端开发专用快捷键

功能	Windows/Linux	macOS	使用场景
触发建议	Ctrl+Space	Ctrl+Space	手动触发代码补全
参数提示	Ctrl+Shift+Space	Cmd+Shift+Space	显示函数参数信息
快速修复	Ctrl+.	Cmd+.	显示代码问题修复建议
重命名符号	F2	F2	安全重命名变量/函数
折叠/展开区域	Ctrl+Shift+[/]	Cmd+Option+[/]	管理复杂代码结构
Emmet 展开缩写	Tab	Tab	使用 Emmet 快速生成 HTML/CSS

六、调试快捷键

功能	Windows/Linux	macOS	使用场景
切换断点	F9	F9	添加/移除断点
开始调试	F5	F5	启动调试会话
单步跳过	F10	F10	执行下一行代码
单步进入	F11	F11	进入函数内部
重启调试	Ctrl+Shift+F5	Cmd+Shift+F5	重新启动调试会话
停止调试	Shift+F5	Shift+F5	结束调试会话

七、自定义快捷键技巧

1. 修改快捷键：

   • 打开命令面板 → 输入 “Preferences: Open Keyboard Shortcuts”
   • 搜索要修改的命令 → 点击铅笔图标设置新快捷键

2. 常用自定义设置（前端推荐）：

// keybindings.json
[
  {
    "key": "ctrl+alt+r",  // Win/Linux
    "command": "workbench.action.tasks.runTask",
    "args": "npm: start"  // 一键启动开发服务器
  },
  {
    "key": "ctrl+shift+u",  // Win/Linux
    "command": "editor.action.transformToUppercase"  // 转大写
  },
  {
    "key": "ctrl+shift+l",  // Win/Linux
    "command": "editor.action.transformToLowercase"  // 转小写
  }
]

3. 必备扩展快捷键：
   • ESLint: Ctrl+Shift+E 修复所有可自动修复的问题
   • Prettier: Shift+Alt+F 格式化代码
   • Live Server: Alt+L Alt+O 启动本地服务器

使用快捷键提示：安装扩展如 “Which Key” 显示可用快捷键

专业提示：在 VS Code 中按 Ctrl+K Ctrl+S (Win/Linux) 或 Cmd+K Cmd+S (macOS) 可直接打开快捷键编辑器