Visual Studio Code (VSCode) 使用指南

一、基本使用

1. 界面概览

• 资源管理器：查看和管理项目文件

• 搜索：全局搜索文件内容

• 源代码管理：Git 集成

• 调试：调试工具

• 扩展：管理插件

• 活动栏：左侧图标栏

• 状态栏：底部信息栏

2. 常用基础操作

• 打开文件夹：Ctrl+K Ctrl+O (Win/Linux) / Cmd+O (Mac)

• 新建文件：Ctrl+N

• 保存文件：Ctrl+S

• 关闭标签：Ctrl+W

• 切换标签：Ctrl+Tab

• 分屏编辑：

  • 垂直分屏：Ctrl+\

  • 水平分屏：Ctrl+K Ctrl+\

  • 切换分屏：Ctrl+1, Ctrl+2等

二、常用插件推荐

前端开发必备

1. ESLint - JavaScript 代码检查

2. Prettier - Code formatter - 代码格式化

3. Volar - Vue 3 官方支持

4. JavaScript (ES6) code snippets - ES6 代码片段

5. Auto Rename Tag - 自动重命名配对的 HTML 标签

6. Path Intellisense - 路径自动补全

7. Live Server - 实时预览网页

8. npm Intellisense - npm 模块导入自动补全

通用工具

1. Chinese (Simplified) Language Pack - 中文语言包

2. GitLens - Git 增强工具

3. Bracket Pair Colorizer - 彩色括号匹配

4. Code Runner - 快速运行代码片段

5. Todo Tree - 高亮 TODO 注释

6. REST Client - 发送 HTTP 请求

7. Markdown All in One - Markdown 增强

8. Remote - SSH - 远程开发

主题与图标

1. Material Icon Theme - 文件图标主题

2. One Dark Pro - 流行主题

3. Dracula Official - 暗色主题

三、必备快捷键

文件操作

快捷键 (Win/Linux)	快捷键 (Mac)	功能
Ctrl+N	Cmd+N	新建文件
Ctrl+O	Cmd+O	打开文件
Ctrl+S	Cmd+S	保存文件
Ctrl+Shift+S	Cmd+Shift+S	另存为
Ctrl+W	Cmd+W	关闭当前标签
Ctrl+K W	Cmd+K W	关闭所有标签

编辑相关

快捷键 (Win/Linux)	快捷键 (Mac)	功能
Ctrl+C	Cmd+C	复制
Ctrl+X	Cmd+X	剪切
Ctrl+V	Cmd+V	粘贴
Ctrl+Z	Cmd+Z	撤销
Ctrl+Y	Cmd+Y	重做
Ctrl+D	Cmd+D	选中下一个相同内容
Ctrl+F	Cmd+F	查找
Ctrl+H	Cmd+H	替换
Ctrl+/	Cmd+/	行注释
Shift+Alt+A	Shift+Option+A	块注释
Alt+↑/↓	Option+↑/↓	上下移动行
Shift+Alt+↑/↓	Shift+Option+↑/↓	复制行到上/下

代码导航

快捷键 (Win/Linux)	快捷键 (Mac)	功能
Ctrl+P	Cmd+P	快速打开文件
Ctrl+G	Cmd+G	跳转到行
Ctrl+Shift+O	Cmd+Shift+O	跳转到符号
F12	F12	转到定义
Alt+←/→	Ctrl+-/Ctrl+Shift+-	后退/前进

终端操作

快捷键 (Win/Linux)	快捷键 (Mac)	功能
`Ctrl+``	`Ctrl+``	显示/隐藏终端
`Ctrl+Shift+``	`Ctrl+Shift+``	新建终端

视图控制

快捷键 (Win/Linux)	快捷键 (Mac)	功能
Ctrl+B	Cmd+B	切换侧边栏
Ctrl+Shift+F	Cmd+Shift+F	全局搜索
Ctrl+Shift+X	Cmd+Shift+X	扩展视图
Ctrl+Shift+E	Cmd+Shift+E	资源管理器

四、实用技巧

1. 命令面板：Ctrl+Shift+P (Win/Linux) / Cmd+Shift+P (Mac)  - 访问所有功能

2. 多光标编辑：

   • Alt+Click 添加光标

   • Ctrl+Alt+↑/↓ (Win/Linux) / Cmd+Option+↑/↓ (Mac)  添加列光标

3. 快速重命名：F2 - 重命名符号

4. 格式化代码：Shift+Alt+F (Win/Linux) / Shift+Option+F (Mac)

5. 折叠代码：

   • Ctrl+Shift+[ / Ctrl+Shift+] (Win/Linux)

   • Cmd+Option+[ / Cmd+Option+] (Mac)

6. Emmet 缩写：HTML/CSS 快速编写工具，如输入 div.container>ul>li*5 然后按 Tab

五、设置建议

1. 自动保存：File > Auto Save

2. 字体大小：Ctrl+, 打开设置，搜索 "font size"

3. 缩进设置：设置中搜索 "tab size" 和 "insert spaces"

4. 用户代码片段：File > Preferences > User Snippets