前端快捷键
前端开发快捷键
| 工具 | Windows | Mac | 说明 |
|---|---|---|---|
| VS Code | Ctrl + P | Cmd + P | 快速打开文件 |
| VS Code | Ctrl + Shift + P | Cmd + Shift + P | 命令面板 |
| VS Code | Ctrl + / | Cmd + / | 注释/取消注释 |
| VS Code | Alt + ↑/↓ | Option + ↑/↓ | 上下移动行 |
| VS Code | Shift + Alt + ↑/↓ | Shift + Option + ↑/↓ | 复制当前行 |
| VS Code | Ctrl + D | Cmd + D | 选择相同词 |
| VS Code | Ctrl + Shift + K | Cmd + Shift + K | 删除整行 |
| VS Code | Ctrl + B | Cmd + B | 显示/隐藏侧边栏 |
| Chrome | F12 | Cmd + Option + I | 开发者工具 |
| Chrome | Ctrl + Shift + C | Cmd + Shift + C | 审查元素 |
| Chrome | Ctrl + Shift + Delete | Cmd + Shift + Delete | 清除浏览数据 |
| Chrome | Ctrl + R / F5 | Cmd + R | 刷新页面 |
| Chrome | Ctrl + Shift + R | Cmd + Shift + R | 强制刷新（忽略缓存） |
| Photoshop | V | V | 移动工具 |
| Photoshop | M | M | 选框工具 |
| Photoshop | L | L | 套索工具 |
| Photoshop | T | T | 文字工具 |
| Photoshop | Ctrl + T | Cmd + T | 自由变换 |
| Photoshop | Ctrl + J | Cmd + J | 复制图层 |
| Photoshop | Ctrl + Shift + N | Cmd + Shift + N | 新建图层 |
工具简介
前端开发快捷键速查表汇总了主流代码编辑器(VS Code / WebStorm / Sublime Text / Vim)和浏览器开发者工具(Chrome DevTools / Firefox DevTools)中最常用和最实用的键盘快捷键。按功能分类展示:编辑操作(复制行/多光标/注释切换)、导航操作(跳转到定义/符号搜索)、调试操作(断点/单步/继续)、代码重构(重命名/提取函数)等。支持按编辑器和操作系统(Win/Mac/Linux)筛选快捷键组合,Mac 下自动显示 Cmd 替代 Ctrl 的映射。是前端工程师提升开发效率的日常参考工具。
使用步骤
1
选择编辑器和系统
顶部选择你要查询的编辑器(VS Code/WebStorm/Sublime Text/Vim)和操作系统(Win/Mac),工具自动筛选快捷键。
2
按分类浏览
按功能分类(编辑/导航/调试/重构/文件操作等)浏览快捷键列表,每个快捷键附带简要功能说明。
3
搜索和收藏
使用搜索框输入关键词(如「多光标」「格式化」)快速定位,常用快捷键可收藏到个人收藏夹。
常见问题
快捷键在 Mac 和 Windows 下不一样怎么办?
工具左上角提供操作系统切换按钮(Win / Mac)。Mac 下 Ctrl 替换为 Cmd,Alt 替换为 Option。所有快捷键在切换后自动映射显示。如果你使用的键盘是 Mac 但装 Windows,也能手动切换。
这些快捷键是哪个版本的?
VS Code 快捷键基于 1.85+ 版本,WebStorm 基于 2023.3+ 版本,Sublime Text 基于 4 版本,Chrome DevTools 基于最新正式版。部分工具可能因版本差异存在微调,工具底部会标注最后更新日期。
可以自定义快捷键吗?
本工具是参考速查表,不可以直接修改。但 VS Code 和 WebStorm 都支持自定义键绑定。工具中提供跳转到对应编辑器「快捷键设置」页面的链接,方便你进行个性化配置。
Vim 快捷键和其他编辑器冲突吗?
Vim 有自己独立的模式系统(普通/插入/可视/命令行),快捷键在普通模式下生效。如果安装了 Vim 扩展的 VS Code,在 Vim 模式下可以使用 Vim 快捷键,但两者互不冲突。工具中 Vim 快捷键单独列为一个分类。