feat(docs): add IDE basics guide and restructure development tools section
- Add comprehensive IDE basics documentation with interactive demos - Move prompt engineering content to artificial-intelligence section - Create new IDE basics page under development-tools section - Update sidebar config to reflect new structure
This commit is contained in:
sanbuphy
@@ -0,0 +1,313 @@
|
||||
# 集成开发环境 (IDE) 基础
|
||||
|
||||
::: tip 💡 学习指南
|
||||
本章节将带你深入了解程序员的核心生产力工具——**集成开发环境 (IDE)**。我们将从 IDE 的设计理念出发，逐一解析其核心组件，并通过虚拟 IDE 演示其工作原理。
|
||||
:::
|
||||
|
||||
## 遇到不懂的怎么办？(How to solve problems)
|
||||
|
||||
在学习和使用 IDE 的过程中，你可能会遇到各种看不懂的按钮、菜单或者代码报错。这时候，**不要慌张，利用 AI 助手是最高效的解决办法**。
|
||||
|
||||
**推荐做法：截图问 AI**
|
||||
|
||||
现在的 AI（如 ChatGPT、Claude、DeepSeek 等）都具备强大的识图能力。当你遇到不认识的界面元素或复杂的代码片段时：
|
||||
|
||||
1. **截图**：截取你不懂的那一部分（比如某个奇怪的图标，或者一段复杂的配置代码）。
|
||||
2. **提问**：把图片发给 AI，并问它：“这个是什么？有什么用？”或者“这段代码里的 xxx 是干嘛的？”。
|
||||
3. **追问**：如果 AI 的回答太专业看不懂，继续问：“请用大白话解释一下，最好举个生活中的例子。”
|
||||
|
||||
<AiHelpDemo />
|
||||
|
||||
---
|
||||
|
||||
## 0. 引言：为什么需要 IDE？
|
||||
|
||||
在软件开发过程中，程序员需要频繁地进行编写代码、管理文件、编译运行、调试错误等操作。如果这些操作都需要在不同的独立软件中完成（例如用记事本写代码，用命令行编译，用文件夹管理文件），效率将极低且容易出错。
|
||||
|
||||
**IDE (Integrated Development Environment)** 的核心价值在于**集成**。它将软件开发所需的各种工具（编辑器、编译器、调试器、文件管理器等）整合到一个统一的图形界面中，提供一站式的工作体验。
|
||||
|
||||
**VS Code 就是一种最流行的 IDE。** 虽然它本质上是一个轻量级的代码编辑器，但通过强大的插件系统，它具备了 IDE 的所有核心功能（代码编辑、调试、版本控制等），因此被广泛视为现代前端和全栈开发的首选 IDE。
|
||||
|
||||
简而言之，IDE 旨在最大化开发者的生产力，减少在不同工具间切换的时间成本。
|
||||
|
||||
> 🔗 **资源下载**：
|
||||
>
|
||||
> - [VS Code 官网下载](https://code.visualstudio.com/Download)
|
||||
> - [VS Code 网页版体验](https://vscode.dev/)
|
||||
>
|
||||
> **VS Code (Visual Studio Code)** 是由微软开发的一款免费、开源、跨平台的代码编辑器。它凭借**轻量级、插件丰富、启动速度快**等特点，成为了全球最受欢迎的开发工具之一。无论你是写 Python、JavaScript 还是 C++，VS Code 都能通过安装插件变成最适合你的“神器”。
|
||||
|
||||
---
|
||||
|
||||
## 1. 核心界面解析
|
||||
|
||||
现代 IDE（以 VS Code 为例）的界面布局经过精心设计，通常包含以下四个核心区域：
|
||||
|
||||
1. **侧边栏 (Sidebar)：资源管理**
|
||||
展示项目的文件树，支持新建、重命名、移动和删除文件，提供对项目结构的全局视图和快速访问能力。
|
||||
|
||||
2. **编辑区 (Editor Area)：代码创作**
|
||||
编写与修改代码的核心区域。支持语法高亮、智能代码补全、语法检查等功能，提供高效、智能的代码编写环境。
|
||||
|
||||
3. **底部面板 (Panel)：执行与反馈**
|
||||
与底层系统交互及查看运行结果。包括终端 (Terminal)、输出 (Output) 等，用于执行指令、查看日志及调试。
|
||||
|
||||
4. **活动栏 (Activity Bar)：功能导航**
|
||||
位于界面最左侧，包含文件资源管理器、搜索、Git 管理等图标，用于在不同的工作上下文（如“写代码”与“提交代码”）之间快速切换。
|
||||
|
||||
---
|
||||
|
||||
## 2. 交互演示：功能体验
|
||||
|
||||
百闻不如一见。为了让你真正感受到 IDE 的便捷，我们为你准备了一个**虚拟的 VS Code 环境**。
|
||||
|
||||
**请尝试以下操作**：
|
||||
|
||||
1. 点击右上角的 **“▶ 开始自动导览”**，跟随光标了解各个区域。
|
||||
2. **自由探索**：点击左侧图标切换视图，或者点击文件名打开代码。
|
||||
3. **体验集成**：你会发现，文件管理、代码编辑、终端运行，都在同一个窗口内无缝衔接。
|
||||
4. **安装插件**：在下拉菜单中选择 **“插件安装 (Extensions)”** 模式，体验如何在虚拟商店中安装 Python 插件。
|
||||
|
||||
<ClientOnly>
|
||||
<VirtualVSCodeDemo />
|
||||
</ClientOnly>
|
||||
|
||||
---
|
||||
|
||||
## 3. 核心机制：为什么 VS Code 无所不能？
|
||||
|
||||
你可能会好奇：为什么同一个软件，既能写 Python，又能写 C++，还能做网页开发？它是怎么做到的？
|
||||
其实，VS Code 的设计哲学可以总结为一句话：**“核心极简，能力外挂”。**
|
||||
|
||||
### 3.1 极简核心：只是一个“画板”
|
||||
|
||||
想象一下，你刚下载好的 VS Code，如果不安装任何插件，它其实**并不懂编程**。
|
||||
此时的它，本质上只是一个**功能强大的文本编辑器**。
|
||||
|
||||
- 它负责显示文字（渲染）。
|
||||
- 它负责管理文件（IO）。
|
||||
- 但它不知道 `print("Hello")` 是 Python 代码，也不知道 `int main()` 是 C++ 入口。
|
||||
|
||||
### 3.2 插件系统：注入“灵魂”
|
||||
|
||||
为了让 VS Code 能够“理解”代码，我们需要安装**插件 (Extensions)**。
|
||||
插件就像是专门的**翻译官**：
|
||||
|
||||
- **Python 插件**：告诉 VS Code 什么是变量，什么是函数，怎么运行 `.py` 文件。
|
||||
- **C++ 插件**：告诉 VS Code 如何调用编译器，如何调试内存。
|
||||
|
||||
这种设计使得 VS Code 非常轻量——你不写 Java，就不用背负 Java 的运行环境。
|
||||
|
||||
### 3.3 幕后流程：从代码到运行
|
||||
|
||||
<ClientOnly>
|
||||
<IdeArchitectureDemo />
|
||||
</ClientOnly>
|
||||
|
||||
让我们通过一个具体的场景，来看看 VS Code、插件和底层环境是如何协作的。
|
||||
假设你写了一行 Python 代码并点击了**运行**或**调试**：
|
||||
|
||||
#### 1. 语言识别 (Activation)
|
||||
|
||||
VS Code 检测到 `.py` 后缀，自动唤醒 **Python 插件**。插件立刻接管了编辑器，开始进行语法分析，将代码染上不同的颜色（语法高亮），并提供智能提示。
|
||||
|
||||
#### 2. 任务委托 (Delegation)
|
||||
|
||||
当你下达指令时，插件本身并不直接执行代码，而是将任务**委托**给底层的专业工具：
|
||||
|
||||
- **运行模式**：插件生成一条指令（如 `python main.py`），发送给系统的**终端**去执行。
|
||||
- **调试模式**：插件启动一个**调试适配器 (Debug Adapter)**。它就像一个“监控探头”，连接到 Python 解释器内部，让你能一行行地控制代码执行。
|
||||
|
||||
#### 3. 结果反馈 (Feedback)
|
||||
|
||||
Python 解释器（或编译器）执行完代码，将结果（或错误信息）返回给插件。插件再把这些信息“搬运”回来，显示在 VS Code 的**底部终端面板**中。
|
||||
|
||||
### 3.4 总结：用“餐厅”来打个比方
|
||||
|
||||
如果觉得上面的公式有点抽象，我们可以把写代码的过程想象成**去餐厅吃饭**：
|
||||
|
||||
1. **VS Code 是“餐厅大堂”**：
|
||||
- 这里装修豪华，环境舒适（代码高亮、好看的主题）。
|
||||
- **但大堂本身不生产食物**。你坐在这里，只是为了更舒服地“点菜”（写代码）。
|
||||
|
||||
2. **环境 (Python/Node) 是“后厨”**：
|
||||
- 这是真正**做饭（运行代码）**的地方。
|
||||
- 如果餐厅没有后厨（没安装 Python），你在大堂坐到天黑也吃不上饭。
|
||||
|
||||
3. **插件 是“服务员”**：
|
||||
- 他连接了大堂和后厨。
|
||||
- 他看得懂你的菜单，跑去告诉后厨：“3 号桌要一份‘运行 main.py’！”
|
||||
- 做好了，他又把结果（热腾腾的饭菜）端回到你面前。
|
||||
|
||||
**结论**：
|
||||
|
||||
- 只装 VS Code = **只有大堂没后厨**（只能看，不能吃）。
|
||||
- 只装 Python = **只有后厨没大堂**（能吃，但得蹲在厨房地上吃，体验很差）。
|
||||
- **装了 VS Code + 插件 + Python = 完美的就餐体验。**
|
||||
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
onMounted(() => {
|
||||
const openTarget = () => {
|
||||
const hash = window.location.hash
|
||||
if (hash) {
|
||||
try {
|
||||
// Handle encoded Chinese characters in hash
|
||||
const target = document.querySelector(decodeURIComponent(hash))
|
||||
// If the target is a details element, open it
|
||||
if (target && target.tagName === 'DETAILS') {
|
||||
target.setAttribute('open', '')
|
||||
}
|
||||
// If the target is inside a details element, open the parent details
|
||||
const parentDetails = target?.closest('details')
|
||||
if (parentDetails) {
|
||||
parentDetails.setAttribute('open', '')
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
openTarget()
|
||||
window.addEventListener('hashchange', openTarget)
|
||||
})
|
||||
</script>
|
||||
|
||||
# 附录： Visual Studio Code 菜单栏解析
|
||||
|
||||
为了方便大家理解每个选项的含义，在这里我们对菜单栏进行深入解析：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<details class="custom-block details" id="vscode-file-menu">
|
||||
<summary>File（文件）：项目与文件的打开/保存/工作区管理</summary>
|
||||
|
||||
本菜单主要负责：**创建/打开文件**、**打开项目文件夹（Folder）**、**管理工作区（Workspace）**、**保存与关闭**。
|
||||
|
||||
> 其中最常用的就是：Open Folder（打开文件夹） 来打开一个项目；Open…（打开…） 来单独打开一个文件；然后用 Save / Save All（保存/全部保存） 来保存修改，最后用 Close Editor / Close Folder（关闭编辑器/关闭文件夹） 结束本次工作。工作区（Workspace）、复制工作区之类的内容可以等你项目多起来再慢慢用，不必一上来全搞懂
|
||||
|
||||
- **New Text File（新建文本文件）**：新建一个未命名文本缓冲区，用于临时记录或快速粘贴内容。
|
||||
- **New File…（新建文件…）**：在项目中创建新文件（通常会要求你选择路径/命名）。
|
||||
- **New Window（新建窗口）**：开启一个新的 VS Code 窗口实例。
|
||||
- **New Window with Profile（使用配置档新建窗口）**：以指定 Profile（扩展/设置组合）打开新窗口，适合不同课程/项目隔离环境。
|
||||
- **Open…（打开…）**：打开单个文件进行编辑。
|
||||
- **Open Folder…（打开文件夹…）**：打开一个文件夹作为项目根目录（最常用的“打开项目”方式）。
|
||||
- **Open Workspace from File…（从文件打开工作区…）**：打开 `.code-workspace` 文件，加载多文件夹/特定设置的工作区。
|
||||
- **Open Recent（打开最近）**：快速进入最近打开的文件/文件夹/工作区。
|
||||
- **Add Folder to Workspace…（添加文件夹到工作区…）**：把另一个文件夹加入当前工作区（形成 multi-root workspace）。
|
||||
- **Save Workspace As…（工作区另存为…）**：将当前工作区结构保存为 `.code-workspace` 文件，便于分享/复用。
|
||||
- **Duplicate Workspace（复制工作区）**：复制当前工作区配置（常用于建立相似项目环境）。
|
||||
- **Save（保存）**：保存当前文件更改。
|
||||
- **Save As…（另存为…）**：以新名称/新路径保存当前文件。
|
||||
- **Save All（全部保存）**：保存所有已打开且有修改的文件。
|
||||
|
||||
- **Share（分享）**：与共享/协作相关的入口（具体内容取决于版本与扩展）。
|
||||
- **Auto Save（自动保存）**：切换自动保存策略（例如延迟保存/失焦保存）。
|
||||
- **Revert File（还原文件）**：丢弃当前文件未保存改动，回到磁盘版本。
|
||||
- **Close Editor（关闭编辑器）**：关闭当前标签页。
|
||||
- **Close Folder（关闭文件夹）**：关闭当前项目文件夹（工作区变为空）。
|
||||
- **Close Window（关闭窗口）**：关闭当前 VS Code 窗口。
|
||||
|
||||
</details>
|
||||
|
||||
<details class="custom-block details" id="vscode-edit-menu">
|
||||
<summary>Edit（编辑）：基础编辑、查找替换、注释与快速编辑动作</summary>
|
||||
|
||||
本菜单主要负责：**撤销/重做**、**剪切复制粘贴**、**查找替换**、**注释与编辑器动作**（提升编辑效率）。
|
||||
|
||||
- **Undo / Redo（撤销 / 重做）**：代码写错了后悔药，最基础的操作。
|
||||
- **Cut / Copy / Paste（剪切 / 复制 / 粘贴）**：文本搬运工。
|
||||
- **Find / Replace（查找 / 替换）**：在当前文件中搜索或批量修改。
|
||||
- **Find in Files / Replace in Files（在文件中查找 / 在文件中替换）**：全局（全项目）搜索与替换，非常强大但需谨慎使用。
|
||||
- **Toggle Line Comment（切换行注释）**：`Ctrl + /`，快速注释/取消注释当前行。
|
||||
- **Toggle Block Comment（切换块注释）**：`Shift + Alt + A`，快速注释/取消注释选区。
|
||||
- **Emmet: Expand Abbreviation（Emmet 展开）**：HTML/CSS 开发神器，输入简写按 Tab 展开代码。
|
||||
|
||||
</details>
|
||||
|
||||
<details class="custom-block details" id="vscode-selection-menu">
|
||||
<summary>Selection（选择）：多光标与智能选区</summary>
|
||||
|
||||
本菜单主要负责：**光标控制**、**多行编辑**、**扩大/缩小选区**。这是 VS Code 提升效率的杀手锏。
|
||||
|
||||
- **Select All（全选）**：选中当前文件所有内容。
|
||||
- **Expand Selection / Shrink Selection（扩大 / 缩小选区）**：智能感知语法结构，逐级扩大或缩小选中范围（例如：单词 -> 字符串 -> 括号内 -> 整行 -> 函数体）。
|
||||
- **Copy Line Up / Down（向上 / 向下复制行）**：快速克隆当前行。
|
||||
- **Move Line Up / Down（向上 / 向下移动行）**：`Alt + ↑ / ↓`，无需剪切粘贴，直接调整代码行顺序。
|
||||
- **Add Cursor Above / Below（在上方 / 下方添加光标）**：`Ctrl + Alt + ↑ / ↓`，开启多光标模式，同时编辑多行。
|
||||
- **Add Cursor to Line Ends（在行尾添加光标）**：选中多行文本后，在每一行末尾添加光标。
|
||||
|
||||
</details>
|
||||
|
||||
<details class="custom-block details" id="vscode-view-menu">
|
||||
<summary>View（查看）：界面布局与面板控制</summary>
|
||||
|
||||
本菜单主要负责：**开关侧边栏/面板**、**调整布局**、**命令面板**、**输出与调试控制台**。
|
||||
|
||||
- **Command Palette…（命令面板…）**：`Ctrl + Shift + P` / `F1`，VS Code 的总指挥中心，可以搜索并执行所有命令。
|
||||
- **Open View…（打开视图…）**：快速打开特定的侧边栏视图（如资源管理器、源代码管理）。
|
||||
- **Appearance（外观）**：控制全屏、菜单栏显隐、侧边栏位置、缩放级别（Zoom In/Out）。
|
||||
- **Editor Layout（编辑器布局）**：拆分编辑器（Split Up/Down/Left/Right），实现分屏对比代码。
|
||||
- **Explorer / Search / Source Control / Run / Extensions**：直接切换活动栏（Activity Bar）的视图。
|
||||
- **Problems / Output / Debug Console / Terminal**：直接控制底部面板（Panel）的显示内容。
|
||||
- **Word Wrap（自动换行）**：`Alt + Z`，控制长行代码是否自动换行显示（不影响实际文件内容）。
|
||||
|
||||
</details>
|
||||
|
||||
<details class="custom-block details" id="vscode-go-menu">
|
||||
<summary>Go（转到）：代码导航与跳转</summary>
|
||||
|
||||
本菜单主要负责：**在文件间跳转**、**在符号（函数/变量）间跳转**。
|
||||
|
||||
- **Back / Forward（后退 / 前进）**：像浏览器一样，在你的光标历史位置之间跳转。
|
||||
- **Switch Editor…（切换编辑器…）**：在已打开的标签页之间快速切换。
|
||||
- **Go to File…（转到文件…）**：`Ctrl + P`，输入文件名快速打开文件。
|
||||
- **Go to Symbol in Editor…（转到编辑器中的符号…）**：`Ctrl + Shift + O`，列出当前文件的函数/类/变量，快速跳转。
|
||||
- **Go to Definition（转到定义）**：`F12`，跳转到光标处变量或函数的定义处。
|
||||
- **Go to References（转到引用）**：`Shift + F12`，查看该变量或函数在哪些地方被使用了。
|
||||
- **Go to Line/Column…（转到行/列…）**：`Ctrl + G`，跳转到指定行号。
|
||||
|
||||
</details>
|
||||
|
||||
<details class="custom-block details" id="vscode-run-menu">
|
||||
<summary>Run（运行）：调试与执行</summary>
|
||||
|
||||
本菜单主要负责：**启动调试**、**断点管理**。
|
||||
|
||||
- **Start Debugging（开始调试）**：`F5`，以调试模式运行程序（支持断点、变量监视）。
|
||||
- **Run Without Debugging（以非调试模式运行）**：`Ctrl + F5`，直接运行程序，不驻留调试器（速度稍快）。
|
||||
- **Stop Debugging（停止调试）**：强行结束当前调试会话。
|
||||
- **Restart Debugging（重启调试）**：重新运行。
|
||||
- **Toggle Breakpoint（切换断点）**：`F9`，在当前行打上或取消红点（断点）。
|
||||
- **New Breakpoint（新建断点）**：支持条件断点、日志断点等高级功能。
|
||||
|
||||
</details>
|
||||
|
||||
<details class="custom-block details" id="vscode-terminal-menu">
|
||||
<summary>Terminal（终端）：集成命令行</summary>
|
||||
|
||||
本菜单主要负责：**新建终端**、**管理终端窗口**。
|
||||
|
||||
- **New Terminal（新建终端）**：在底部面板打开一个新的 Shell（PowerShell/Bash/Zsh）。
|
||||
- **Split Terminal（拆分终端）**：在同一个终端面板中左右/上下拆分，同时运行多个命令。
|
||||
- **Run Task…（运行任务…）**：运行 `tasks.json` 中定义的构建/测试任务。
|
||||
|
||||
</details>
|
||||
|
||||
<details class="custom-block details" id="vscode-help-menu">
|
||||
<summary>Help（帮助）：文档与反馈</summary>
|
||||
|
||||
- **Welcome（欢迎）**：打开欢迎页（包含入门引导、最近项目）。
|
||||
- **Show All Commands（显示所有命令）**：同命令面板。
|
||||
- **Documentation（文档）**：跳转官方文档。
|
||||
- **Editor Playground（编辑器演练场）**：交互式教程，学习编辑技巧。
|
||||
- **Check for Updates…（检查更新…）**：手动检查更新。
|
||||
- **About（关于）**：查看版本号、构建时间、Electron/Node 版本信息。
|
||||
|
||||
</details>
|
||||
Reference in New Issue
Block a user