计算机知识篇
什么是VS Code编辑器
VS Code：程序员的瑞士军刀
VS Code（Visual Studio Code）是微软开发的免费、开源代码编辑器，也是目前全球最流行的编程工具。超过 70% 的开发者都在使用它。
💡 类比：如果代码是文章，VS Code 就是一个超级Word——不仅能写字，还能检查语法、自动排版、一键发布。
加载图表中...
VS Code 界面一览
VS Code 的界面由 5 个核心区域组成：
| 区域 | 位置 | 作用 | 快捷键 |
|---|---|---|---|
| 命令面板 | 顶部 | 万能搜索入口，任何操作都能找到 | Ctrl/Cmd + Shift + P |
| 侧边栏 | 左侧 | 文件浏览器、搜索、Git、插件管理 | Ctrl/Cmd + B 切换 |
| 编辑区 | 中央 | 写代码的主区域，支持多标签、分屏 | — |
| 终端面板 | 底部 | 内置命令行，运行命令不用切窗口 | Ctrl/Cmd + ` |
| 状态栏 | 最底部 | 显示当前分支、编码、语言等信息 | 点击可切换 |
安装 VS Code
- 访问 code.visualstudio.com
- 下载对应系统的安装包（macOS / Windows / Linux）
- 安装后打开，建议第一件事安装中文语言包
必备插件推荐
VS Code 的强大在于它的插件生态。以下是 AI 编程新手必装的插件：
| 插件 | 作用 | 安装量 |
|---|---|---|
| Chinese (Simplified) | 中文界面 | 12M+ |
| Prettier | 代码自动格式化，一键整理代码风格 | 45M+ |
| GitHub Copilot | AI 代码补全，写代码时自动建议 | 18M+ |
| GitLens | 增强 Git 功能，查看代码修改历史 | 30M+ |
| ESLint | JavaScript 代码检查，发现潜在错误 | 30M+ |
| Auto Rename Tag | 修改 HTML 标签时自动同步修改配对标签 | 15M+ |
安装方式：点击左侧边栏的 🧩 图标 → 搜索插件名 → 点击「Install」
快捷键速查
掌握这些快捷键能大幅提高效率（不用死记硬背，用多了自然就记住了）：
| 快捷键 | 功能 | 使用频率 |
|---|---|---|
Ctrl/Cmd + S | 保存文件 | ⭐⭐⭐⭐⭐ |
Ctrl/Cmd + Z | 撤销 | ⭐⭐⭐⭐⭐ |
Ctrl/Cmd + Shift + P | 命令面板（万能入口） | ⭐⭐⭐⭐⭐ |
Ctrl/Cmd + ` | 打开/关闭终端 | ⭐⭐⭐⭐ |
Ctrl/Cmd + P | 快速打开文件 | ⭐⭐⭐⭐ |
Ctrl/Cmd + B | 切换侧边栏 | ⭐⭐⭐ |
Ctrl/Cmd + / | 注释/取消注释代码 | ⭐⭐⭐ |
Ctrl/Cmd + D | 选中下一个相同的词 | ⭐⭐⭐ |
Alt + ↑/↓ | 上下移动整行代码 | ⭐⭐⭐ |
VS Code 与 AI 编程工具的关系
很多 AI 编程工具都基于 VS Code 构建：
加载图表中...
- Cursor：在 VS Code 基础上深度集成了 AI 对话和代码生成
- GitHub Copilot：以插件形式安装在 VS Code 中
- Windsurf：类似 Cursor，也是 VS Code 的 AI 增强版
🎯 学会 VS Code，你就掌握了这些 AI 编程工具的基础操作。
新手入门三步走
- 打开文件夹：
文件 → 打开文件夹，选择你的项目目录 - 打开终端：按
Ctrl/Cmd + `，在终端里运行npm install和npm run dev - 编辑代码：在左侧文件树中点击文件，在编辑区修改，
Ctrl/Cmd + S保存
🎯 AI编程小贴士：你不需要精通 VS Code 的每个功能。先装好它，能打开项目、编辑文件、用终端跑命令就够了。随着使用深入，你会自然学会更多技巧。
小结
- VS Code 是全球最流行的免费代码编辑器
- 五大核心区域：命令面板、侧边栏、编辑区、终端、状态栏
- 插件生态是 VS Code 最强大的特性，可以无限扩展功能
- 很多 AI 编程工具（Cursor、Copilot、Windsurf）都基于 VS Code
- 快捷键不用死记硬背，用多了自然就会了