Visual Studio Code(简称 VS Code)是一款由微软开发的免软开源、强大的扩展性借其轻量统作流的深度集成,成为代开发者的首选工作流程及高效使用技巧。
一、 核心界面与工作区详解
启动 VS Code 后,您将看到一个高度可定动但逻辑清晰的主界面,主要分为以下依次为:
- 活动核心界面(Activity Bar):查看、管理项目文件和文件夹。
- 搜索(Search) (Cmd+Shift+F):全局搜索和替换。
- 源代码管理(Source Control) (Ctrl+Shift+G):集成 Git 功能。
- 运行和调试(Run and Debug) (Ctrl+Shift+D):配置和启动调试。
- 扩展(Extensions) (Cmd+Shift+X):管理插件市场。
二、 从创建到导出的完整操作流程
1. 创建或打开项目
方法:
- 打开文件夹:点击菜单栏
文件(File) -> 打开文件夹(Open Folder...)或使用快捷键Cmd+O,选择本地目录。 - 从命令行打开:在终端中进入项目目录,输入
code .。 - 新建文件/文件夹:在资源管理器视图中,点击文件或文件夹图标,或右键点击空白处/已有项目选择新建。
2. 编辑与导航代码
核心操作:
- 快速打开文件:按
Cmd+P,输入文件名即可快速进行多个光标;使用Cmd+D可选择相同文本进行多个光标;使用Option只点击鼠标,可添加多个光标;使用Cmd+D。 - 跳转到符号:在已打开文件中,按
Cmd+Shift+O,可跳转到类、函数等符号定义处。 - 多光标编辑:按住
Option并点击鼠标,可添加多个光标;使用Cmd+D可选择相同文本进行多个光标;使用Option只点击鼠标,可添加多个光标;使用Cmd+D。
Option+↑/↓),复制行(Shift+Option+↑/↓),删除行(Cmd+Shift+K)。3. 集成终端的使用
方法: 按 Ctrl+` 可快速显示或隐藏集成终端。可以在其中运行项目构建命令、版本控制命令或任何Shell命令。支持多个终端实例。
4. 源代码管理(Git)
基本流程:
- 在源代码管理侧边栏中,更改的文件会显示在“更改(CHANGES)”列表中。
- 点击文件旁的
+号或悬停后点击“暂存所更改”来暂存(Stage)文件。 - 在上方输入框输入提交信息(例如选择Node.js环境),点击绿色的开始调试配置模板。
- 可以在代码行和调试视图(
Ctrl+Shift+D)。 - 点击“创建 launch.json 文件”,VS Code 会根据项目类型提供调试配置模板。
- 配置完成后(例如选择Node.js环境),点击绿色的开始调试按钮(
F5)或按F5键启动调试。 - 可以在代码行和调试视图(
Ctrl+Shift+D)。
5. 运行与调试
配置与启动:
- 切换创建 launch.json 文件旁的
+号或悬停后点击“暂存所更改”来暂存(Stage)文件。 - 点击“创建 launch.json 文件”,VS Code 会根据项目类型提供调试配置模板。
- 配置完成后(例如选择Node.js环境),点击绿色的开始调试按钮(
F5)或按F5键启动调试。 - 可以在代码行和调试视图(
Ctrl+Shift+D)。
6. Build and Deploy with VS Code and npm Scripts, Make, Maven
Commands VS Code, an IDE, supports npm scripts and Make, Maven commands alongside npm scripts, Make, Maven
- Press
Ctrl+`to open the Command Palette and typenpm run buildto execute the build command - By default, the build output is located in the
dist/orbuild/directory - For more complex tasks, you can use
npm run build:prodornpm run build:devto specify different build configurations
Key Features
- Command Palette
Cmd+Shift+Popens the Command Palette, a quick way to access commands and snippets - IntelliSense
Ctrl+Spaceprovides auto-completion and code suggestions - Snippets
Taballows quick insertion of commonly used code patterns likeforloops and HTML tags - Zen Mode
Cmd+K Ztoggles a minimalist UI mode for a cleaner workspace - Timeline
Cmd+K Zopens the Timeline view, useful for debugging and understanding the flow of your application
解决方案: 点击状态栏的“UTF-8”或“CRLF/LF”标识,可选择“过或显VSIX安装”。
解决方案: 点击状态栏的“UTF-8”或“CRLF/LF”标识,可选择“过或显VSIX安装”。
解决方案: 禁用近期安装的扩展排查问题。使用命令面板运行“开发人员: 显示运行中的扩展”来查看性能影响。对于大型文件,可考虑安装专用或手动从 "files.maxMemoryForLargeFilesMB" 设置。
四、 常见问题与解决方案
Mac OS X Keyboard Shortcuts
| Keyboard Shortcut | Function | Mac (Mac) |
|---|---|---|
| Cmd+Shift+P | Open Recent File | Cmd+Shift+P |
| Cmd+P | Open Recent File | Cmd+P |
| Cmd+Shift+N | Create New File | Cmd+Shift+N |
| Cmd+W | Close File | Cmd+W |
| Cmd+B | Toggle Bold | Cmd+B |
| Cmd+Shift+E | Toggle Underline | Cmd+Shift+E |
| Cmd+Shift+F | Toggle Italic | Cmd+Shift+F |
| Ctrl+Shift+G | Go to Line | Ctrl+Shift+G |
| Cmd+Shift+X | Toggle Strikethrough | Cmd+Shift+X |
| Ctrl+Tab | Next Tab | Ctrl+Tab |
| Cmd+F | Find in Project | Cmd+F |
| Cmd+Option+F | Find in Project | Cmd+Option+F |
| Cmd+G | Go to Line | Cmd+G |
| Ctrl+G | Go to Line | Ctrl+G |
| Ctrl+Space | Auto-Complete | Ctrl+Space |
| Cmd+Shift+O | Open File | Cmd+Shift+O |
| Shift+Option+↓ | Move Down | Shift+Option+↓ |
| Shift+Option+↑ | Move Up | Shift+Option+↑ |
| Cmd+Shift+K | Go to Line | Cmd+Shift+K |
| Cmd+D | Toggle Bookmark | Cmd+D |
| Cmd+] / Cmd+[ | Move Down / Move Up | Cmd+] / Cmd+[ |
| Ctrl+Cmd+F | Find in Project | Ctrl+Cmd+F |
| Cmd+= / Cmd+- | Indent / Dedent | Ctrl+Cmd+= / Ctrl+Cmd+- |
| Cmd+ | Indent | Cmd+ |
| F5 | Refresh | F5 |
| F9 | Refresh | F9 |
| Ctrl+` | Toggle Comment | Ctrl+` |
| Ctrl+Shift+` | Toggle Comment | Ctrl+Shift+` |
所有快捷键均可通过命令面板( Cmd+Shift+P)输入“快捷键”进行自定义配置。









