VS Code 前端开发常用快捷键插件

VS Code 前端开发常用快捷键与插件推荐如下：

一、常用快捷键

代码注释
单行注释：Ctrl + / 或 Ctrl + K, Ctrl + C
取消单行注释：Ctrl + K, Ctrl + U
多行注释：Alt + Shift + A 或手动输入 /
行操作
移动行：Alt + ↑/↓
复制当前行：Shift + Alt + ↑/↓
删除当前行：Shift + Ctrl + K
编辑器与窗口管理
显示/隐藏左侧目录栏：Ctrl + B
拆分编辑器：Ctrl + 1/2/3（分屏布局）
切换全屏：F11
关闭编辑器窗口：Ctrl + W
关闭所有窗口：Ctrl + K, Ctrl + W
代码格式化与缩进
格式化整个文件：Shift + Alt + F
格式化选定代码：Ctrl + K, Ctrl + F
增加缩进：Ctrl + ]
减少缩进：Ctrl + [
搜索与导航
全局查找文件：Ctrl + Shift + F
快速打开文件：Ctrl + P
跳转到行首/尾：Ctrl + Home / Ctrl + End
终端与调试
显示/隐藏终端：Ctrl + ~
全局替换：Ctrl + Shift + H
当前文件替换：Ctrl + H

二、前端开发常用插件

HTML/CSS 辅助
Auto Close Tag：自动闭合 HTML 标签。
Auto Rename Tag：修改 HTML 标签时自动同步闭合标签。
HTML CSS Support：在 HTML 中写 class 时智能提示项目中的 CSS 类名。
HTML Snippets：提供 H5 代码片段快速生成。
Pug (Jade) Snippets：Pug 语法高亮与代码提示。
JavaScript/TypeScript 工具
ESLint：实时检查 JavaScript 语法错误。
JS-CSS-HTML Formatter：一键格式化代码。
jQuery Code Snippets：jQuery 方法快速提示。
Npm Intellisense：require 导入包时自动补全路径。
框架支持
Vue 2 Snippets / VueHelper：Vue 2 代码片段与 API 提示。
React Components：根据文件名生成 React 组件模板。
React Native Tools：React Native 项目开发环境支持。
调试与预览
Debug for Chrome：映射 Chrome 调试功能，支持静态页面断点调试。
Open in Browser：快速在默认浏览器中打开 HTML 文件（可自定义快捷键）。
Auto-Open Markdown Preview：Markdown 文件自动预览。
效率增强
Path Intellisense：自动补全文件路径。
Project Manager：快速切换多个项目。
Git History (git log)：查看 Git 提交记录。
Vscode-icons：为资源目录添加图标，提升可读性。
主题与美化
One Dark Theme / Atom One Dark：经典暗色主题。
Vue-color：Vue 语法高亮主题。

三、使用建议

以上内容覆盖了前端开发中高频使用的快捷键与插件，可根据实际需求调整配置。

热门标签