feat(docs): restructure appendix content into organized directories
- Move standalone AI-related files into 8-artificial-intelligence directory - Move development tools content into 2-development-tools directory - Move server/backend content into 4-server-and-backend directory - Create new index files for each section - Update .gitignore to exclude old backup directories - Update theme imports for new component locations
This commit is contained in:
sanbuphy
@@ -0,0 +1,284 @@
|
||||
# 命令行与 Shell 脚本
|
||||
> 💡 **学习指南**：本章节旨在为零基础读者提供一个关于终端（Terminal）工作原理的系统性认知。无需具备计算机专业背景，我们将通过交互式演示，由浅入深地解析终端的运行机制。
|
||||
|
||||
## 0. 快速上手：如何打开终端？
|
||||
|
||||
在你开始学习之前，首先得找到它。终端是每个操作系统的“出厂标配”，你不需要安装任何软件就能使用它。
|
||||
|
||||
::: info 🖥️ 不同系统的打开方式
|
||||
|
||||
** macOS (苹果电脑)**
|
||||
|
||||
1. 按下 `Command (⌘) + Space` 打开聚焦搜索（Spotlight）。
|
||||
2. 输入 `Terminal` 或 `终端`。
|
||||
3. 按回车键，你就会看到一个白底黑字（或黑底白字）的窗口。
|
||||
|
||||
**🪟 Windows**
|
||||
|
||||
- **方法一 (CMD)**：按下 `Win + R`，输入 `cmd`，按回车。这是最古老的命令行。
|
||||
- **方法二 (PowerShell)**：按下 `Win + R`，输入 `powershell`，按回车。这是更现代、功能更强大的终端。
|
||||
- _建议：日常简单操作两者皆可，开发环境推荐使用 PowerShell 或安装 WSL (Windows Subsystem for Linux)。_
|
||||
|
||||
**🐧 Linux**
|
||||
|
||||
- 通常快捷键是 `Ctrl + Alt + T`。
|
||||
- 或者在应用菜单中搜索 `Terminal`。
|
||||
|
||||
:::
|
||||
|
||||
### 0.1 实操演练：先玩玩看 (Hands-on Lab)
|
||||
|
||||
光说不练假把式。在你了解枯燥的原理之前，我们先亲手体验一下“敲命令”的感觉。
|
||||
|
||||
> 💡 **提示**：为了安全和方便，推荐你在下方的**网页模拟器**中操作。如果你有信心，也可以按照第 0 章的方法打开你电脑上真实的终端，跟随步骤一起练习（效果是一样的）。
|
||||
|
||||
在这个练习中，你将学会：
|
||||
|
||||
1. **查看文件**：学会用 `ls` 或 `dir` 看看当前目录下有什么。
|
||||
2. **创建与进入**：学会用 `mkdir` 创建新文件夹，用 `cd` 像传送门一样进入它。
|
||||
3. **新建文件**：学会用命令快速创建一个新文件。
|
||||
4. **安装软件**：体验一行代码安装 Python 库或系统软件的快感。
|
||||
5. **删除清理**：学会如何删除不需要的文件（慎用！）。
|
||||
6. **求助 AI**：这是最重要的！当你忘记命令时，学会问 AI：“在 Mac 上怎么删除文件？”，它会直接告诉你答案。
|
||||
|
||||
_请在下方选择你常用的操作系统，然后跟随引导开始操作：_
|
||||
|
||||
<TerminalHandsOn />
|
||||
|
||||
### 0.2 为什么要放弃鼠标？(Why CLI?)
|
||||
|
||||
你可能会问：_“现在的图形界面（GUI）这么好用，鼠标点点就行，为什么还要对着黑底白字的窗口敲复杂的命令？”_
|
||||
|
||||
这并非为了“装极客”，而是因为在特定场景下，**语言（命令）比手势（鼠标）更强大**。
|
||||
|
||||
#### 1. 鼠标难以表达“批量”与“逻辑”
|
||||
|
||||
- **GUI (鼠标)**：适合“看见什么点什么”。如果你想删除一张照片，右键删除很快。但如果你想“删除所有 2023 年拍摄的、大小超过 5MB 的、格式为 PNG 的照片”，鼠标就无能为力了，你可能需要手动筛选半天。
|
||||
- **CLI (命令)**：适合“描述你想做什么”。上述需求只需要一行命令，计算机会自动帮你找出符合条件的文件并处理，哪怕有 10000 张。
|
||||
|
||||
#### 2. 命令可以被记录和复用
|
||||
|
||||
- **GUI**：你配置一次环境，需要点击几十次菜单。下次换台电脑，你还得凭记忆重新点一遍，很容易漏掉步骤。
|
||||
- **CLI**：你可以把所有命令写进一个文件（脚本）。下次只需要运行这个文件，计算机会**零误差**地重现你的操作。这就是“自动化”的基础。
|
||||
|
||||
#### 3. 远程控制的唯一选择
|
||||
|
||||
- **GUI**：传输画面就像看高清视频，需要极高的网速。如果网稍微卡一点，鼠标就会卡顿，根本没法操作。
|
||||
- **CLI**：传输的只是纯文本，几十个字符。哪怕你在信号极差的山区，也能流畅地控制远在地球另一端的数据中心服务器。
|
||||
|
||||
**总结**：GUI 适合**探索**（浏览网页、看图），CLI 适合**生产**（开发、运维、批处理）。作为开发者，我们用终端是因为它**更精确、更可控、更高效**。
|
||||
|
||||
## 1. 概念界定：终端是什么？ (Definition)
|
||||
|
||||
_不同操作系统下的终端长相不同，**命令方式也不同**。点击下方按钮切换查看，注意观察 macOS, Windows 和 Linux 是如何用不同的命令（如 `dir` vs `ls`）做同一件事的：_
|
||||
|
||||
<TerminalOSDemo />
|
||||
|
||||
在图形用户界面（GUI）普及之前，终端是人类与计算机交互的主要方式。即便在今天，它依然是开发者控制计算机最精确、最高效的工具。
|
||||
|
||||
<TerminalDefinition />
|
||||
|
||||
本质上，终端是一个**字符流输入/输出环境**：
|
||||
|
||||
- **输入**：通过键盘发送指令（字符信号）。
|
||||
- **输出**：通过屏幕网格显示文本反馈。
|
||||
|
||||
它不处理复杂的图形、图片或视频，而是专注于**文本信息的交互**。
|
||||
|
||||
## 2. 核心架构：解耦的艺术 (The Big Picture)
|
||||
|
||||
在深入了解之前，请先思考一个问题：**终端窗口自己真的懂你在说什么吗？**
|
||||
|
||||
其实，终端（Terminal）就像是一个**只会传话的显示器**。当你输入 `date` 命令时，终端并不知道这是“查看日期”的意思，它只是把这 4 个字母打包发给了幕后的真正大佬——**Shell**。
|
||||
|
||||
Shell 才是那个能听懂你说话、并指挥计算机干活的“大脑”。
|
||||
|
||||
为了搞清楚它们是如何配合的，我们来看这三个分工明确的“打工人”。要理解它们的关系，最好的比喻是**浏览器**与**网站服务器**。
|
||||
|
||||
### 2.1 角色分工
|
||||
|
||||
- **🖥️ 终端 (Terminal) —— 就像“浏览器”**
|
||||
- **职责**：它只负责**输入**（把你的按键告诉对方）和**显示**（把对方传回来的字符画在屏幕上）。
|
||||
- **特点**：它本身**没有任何智能**，也不懂什么叫 `ls` 或 `cd`。它就像 Chrome 浏览器，不管你访问的是百度还是谷歌，它只管渲染网页。
|
||||
- _常见的终端_：Windows 的 CMD/PowerShell 窗口, macOS 的 Terminal.app, VS Code 内置的终端。
|
||||
|
||||
- **🧠 Shell (壳) —— 就像“网站服务器”**
|
||||
- **职责**：它才是有逻辑的大脑。它运行在后台，负责**接收**你发来的命令字符串，**解析**它的含义，然后**指挥**操作系统干活。
|
||||
- **特点**：它看不见摸不着，只能通过文本流与外界交流。
|
||||
- _常见的 Shell_：Bash, Zsh, Fish, PowerShell。
|
||||
|
||||
- **⚙️ 内核 (Kernel) —— 幕后的“大管家”**
|
||||
- **职责**：操作系统的核心，只有它能直接控制硬件（读写硬盘、分配内存、控制 CPU）。
|
||||
- **关系**：Shell 是内核的“秘书”，帮你把人话翻译给内核听。
|
||||
|
||||
### 2.2 为什么分开？(可替换性)
|
||||
|
||||
正因为**显示层**（终端）和**逻辑层**（Shell）是完全分开的，所以它们可以自由搭配：
|
||||
|
||||
- **换个“皮肤”**：你可以在 macOS 上用自带的 Terminal，也可以下载 iTerm2，或者用 VS Code 的终端。它们长相不同，但连的都是同一个 Shell (zsh)，所以命令一模一样。
|
||||
- **换个“大脑”**：你可以在同一个终端窗口里，从 bash 切换到 zsh，或者切换到 python 交互环境。这时，终端没变，但处理命令的逻辑变了。
|
||||
|
||||
### 2.3 交互流程：消失的按键
|
||||
|
||||
你可能认为：_“我在键盘上按个 'a'，终端就在屏幕上画个 'a'。”_
|
||||
**错！** 真实的流程是这样的（这叫**回显 Echo**）：
|
||||
|
||||
1. **按下 'a'**：键盘信号传给终端。
|
||||
2. **发送信号**：终端把 'a' 的编码发给 Shell。
|
||||
3. **Shell 处理**：Shell 收到 'a'，觉得没问题，于是原样把 'a' 发回给终端。
|
||||
4. **显示字符**：终端收到 Shell 发回来的 'a'，这才把它画在屏幕上。
|
||||
|
||||
> 💡 **小实验**：有些命令（如输入密码时）会关闭 Shell 的回显功能。这时你按键盘，终端发给了 Shell，但 Shell **不发回**任何东西，所以屏幕上一片空白。这就是为了保护隐私。
|
||||
|
||||
**一句话总结流程**：
|
||||
你在终端打字 ➡️ 信号传给 Shell ➡️ Shell 原样发回（你看到了字）并理解 ➡️ Shell 指挥内核干活。
|
||||
|
||||
_下面的演示展示了这个过程，注意看 Shell 和内核之间那道“墙”，以及字符是如何一来一回的：_
|
||||
|
||||
<ArchitectureDemo />
|
||||
|
||||
## 3. 视觉模型：网格系统 (The Grid System)
|
||||
|
||||
与现代图形界面使用“像素”不同，终端的显示基础是**字符网格（Character Grid）**。
|
||||
终端屏幕被划分为若干行和列，每一个格子称为一个**单元格（Cell）**。
|
||||
|
||||
### 3.1 单元格的构成
|
||||
|
||||
每个单元格是终端显示的最小单位，它包含两类核心信息：
|
||||
|
||||
1. **字符 (Glyph)**：实际显示的文字（如 `A`, `中`, `$`）。
|
||||
2. **属性 (Attributes)**：字符的样式（如前景色、背景色、加粗、下划线）。
|
||||
|
||||
当你拖动终端窗口改变大小时，本质上是在改变这个网格的**行数 (Rows)** 和 **列数 (Columns)**。
|
||||
|
||||
_请在下方交互区域尝试操作，观察网格如何承载字符：_
|
||||
|
||||
<TerminalGrid />
|
||||
|
||||
### 3.2 样式检查
|
||||
|
||||
终端无法显示图片，所有的“界面”都是通过字符颜色和样式的组合来实现的。
|
||||
|
||||
_点击下方单元格，查看每个格子背后包含的样式属性：_
|
||||
|
||||
<CellInspector />
|
||||
|
||||
## 4. 通信协议：转义序列 (Escape Sequences)
|
||||
|
||||
你可能会疑惑：既然终端只传输文本，那彩色的文字、移动的光标、清屏操作是如何实现的？
|
||||
|
||||
答案是**转义序列 (Escape Sequences)**。
|
||||
这是一串特殊的字符指令（通常以 `ESC` 字符开头）。当终端接收到这些字符时，**不会将它们显示在屏幕上**，而是将其解释为**控制指令**。
|
||||
|
||||
例如：
|
||||
|
||||
- 普通字符 `A` → 在屏幕上画出 A。
|
||||
- 序列 `\033[31m` → **指令**：将后续文字颜色设为红色。
|
||||
- 序列 `\033[2J` → **指令**：清空屏幕。
|
||||
|
||||
这就好比你和朋友约定：如果我正常说话，你就记录下来；如果我举起左手（相当于 `ESC`），接下来的那句话就是命令而不是内容。
|
||||
|
||||
_点击下方的“播放”按钮，观察终端是如何逐个处理字符流，并识别出隐藏的指令：_
|
||||
|
||||
<EscapeParserDemo />
|
||||
|
||||
_下方组件则展示了更多种类的转义序列及其渲染效果：_
|
||||
|
||||
<EscapeSequences />
|
||||
|
||||
## 5. 输入机制：字节流 (Input as Byte Stream)
|
||||
|
||||
输入过程往往被误解。当你按下键盘时，终端并没有直接把字符“画”在屏幕上，而是进行了一次**编码传输**。
|
||||
|
||||
1. **按键捕获**：终端捕获你的物理按键动作。
|
||||
2. **编码转换**：将按键转换为特定的**字节序列**。
|
||||
- 按下 `a` → 发送字节 `a`。
|
||||
- 按下 `向上箭头` → 发送序列 `^[[A`。
|
||||
3. **发送**：将字节流发送给 Shell 或当前运行的程序。
|
||||
|
||||
**关键点**：所有的按键（包括功能键、鼠标点击）在传输层面上都是**字节数据**。
|
||||
|
||||
_在下方尝试按键，观察你的输入是如何被转换为底层数据的：_
|
||||
|
||||
<InputVisualizer />
|
||||
|
||||
## 6. 运行模式：打字机 vs 游戏机 (Cooked vs. Raw Mode)
|
||||
|
||||
终端有两种截然不同的性格。理解这一点，你就能明白为什么在终端里**打命令**和**玩贪吃蛇**是完全不同的体验。
|
||||
|
||||
- **加工模式 (Cooked Mode) —— 像打字机**
|
||||
- 这是默认模式。
|
||||
- **行为**：你输入的字符会被终端**暂时扣留**，直到你按下回车键（Enter）。
|
||||
- **好处**：这给了你修改的机会。打错了？按退格键（Backspace）删掉重写，程序根本不知道你之前打错过。
|
||||
- _适用场景：平时敲命令（如 `ls`, `cd`）。_
|
||||
|
||||
- **原始模式 (Raw Mode) —— 像游戏手柄**
|
||||
- 这是“高手”模式。
|
||||
- **行为**：你按下的每一个键（包括方向键、Ctrl组合键），都会**瞬间**发送给程序，没有任何缓冲。
|
||||
- **好处**：程序能实时响应你的操作。
|
||||
- _适用场景：玩终端游戏（如贪吃蛇）、使用 Vim 编辑器（一种纯键盘操作的编辑器）。_
|
||||
|
||||
_点击下方按钮切换模式，体验“写信”与“打游戏”的不同手感：_
|
||||
|
||||
<CookedRawDemo />
|
||||
|
||||
## 7. 进程控制：信号 (Signals)
|
||||
|
||||
在终端中按下 `Ctrl+C` 通常能停止程序。这并非通过发送字符实现，而是触发了**信号 (Signal)**。
|
||||
|
||||
信号是操作系统级别的通知机制，用于告诉程序发生了特定事件。
|
||||
|
||||
- **Ctrl+C** → 发送 `SIGINT` (Interrupt)：通知程序“请中断当前操作”。
|
||||
- **Ctrl+Z** → 发送 `SIGTSTP` (Suspend)：通知程序“请暂停并挂起到后台”。
|
||||
|
||||
这一机制绕过了标准的数据输入通道，确保在程序卡死时用户仍有控制权。
|
||||
|
||||
<SignalsDemo />
|
||||
|
||||
## 8. 高级应用：全屏界面与缓冲区 (Buffers & TUI)
|
||||
|
||||
你有没有发现，当你用 `vim` 编辑文件或者用 `htop` 看系统状态时，它们会占满整个屏幕？而当你退出它们时，屏幕瞬间变回了原来的样子，之前的命令记录完全没变。
|
||||
|
||||
这是因为终端有两块“画布”在来回切换：
|
||||
|
||||
- **主缓冲区 (Primary Buffer)**：就像**草稿本**。
|
||||
- 你写一行，系统回一行。
|
||||
- 写满了就翻页（滚动），以前写的东西都在上面。
|
||||
- _用于：日常敲命令。_
|
||||
|
||||
- **备用缓冲区 (Alternate Buffer)**：就像**黑板**。
|
||||
- 程序把黑板擦干净，在上面画画（全屏显示）。
|
||||
- 不管怎么画，都不会影响你桌子上的草稿本。
|
||||
- 当你退出程序时，就像把黑板收起来，你又回到了草稿本面前。
|
||||
- _用于：Vim, Nano, 游戏等全屏软件。_
|
||||
|
||||
_点击下方按钮，体验“草稿本”和“黑板”是如何瞬间切换的：_
|
||||
|
||||
<BufferSwitchDemo />
|
||||
|
||||
---
|
||||
|
||||
## 9. 总结 (Summary)
|
||||
|
||||
终端并非神秘的黑盒，它是一个标准化的文本交互接口。
|
||||
|
||||
- **显示**：基于网格和字符。
|
||||
- **控制**：基于转义序列。
|
||||
- **交互**：基于输入输出流和信号。
|
||||
|
||||
通过理解这些底层原理，你不再只是死记硬背命令，而是能真正理解每一次敲击键盘背后发生的逻辑流转。
|
||||
|
||||
## 附录：常用术语表 (Vocabulary)
|
||||
|
||||
| 术语 | 英文 | 解释 |
|
||||
| :---------------- | :--------------------- | :------------------------------------------------- |
|
||||
| **终端** | Terminal | 负责显示和输入的窗口程序（前端）。 |
|
||||
| **Shell** | Shell | 负责解析命令和执行逻辑的程序（后端）。 |
|
||||
| **CLI** | Command Line Interface | 命令行界面，一种基于文本的交互方式。 |
|
||||
| **TUI** | Text User Interface | 文本用户界面，指在终端中通过字符构建的伪图形界面。 |
|
||||
| **转义序列** | Escape Sequence | 用于控制终端光标、颜色等的特殊字符指令。 |
|
||||
| **标准输入/输出** | Stdin/Stdout | 程序接收数据和输出数据的标准通道。 |
|
||||
|
||||
## 参考资料 (Reference)
|
||||
|
||||
- [How Terminals Work](https://how-terminals-work.vercel.app/)：本文的结构与演示灵感深受该项目的启发。如果你希望深入了解工程实现细节，强烈推荐阅读原版教程。
|
||||
@@ -0,0 +1,2 @@
|
||||
# 调试的艺术
|
||||
> 待实现
|
||||
@@ -0,0 +1,152 @@
|
||||
# 浏览器调试器 (DevTools) 指南
|
||||
|
||||
::: tip 💡 核心作用
|
||||
浏览器开发者工具（DevTools）是前端开发的“X光机”和“手术台”。它能让你看穿网页的骨架（HTML）、皮肤（CSS）和神经系统（JavaScript），并且允许你实时地修改和调试它们。
|
||||
:::
|
||||
|
||||
## 1. 什么是 DevTools？
|
||||
|
||||
**DevTools** 是现代浏览器（Chrome, Edge, Firefox, Safari 等）内置的一套 Web 开发和调试工具。对于开发者来说，它比代码编辑器更接近“真相”，因为**它展示的是代码在浏览器中实际运行的样子**。
|
||||
|
||||
**如何打开 DevTools？**
|
||||
|
||||
- **快捷键**：`F12` 或 `Ctrl + Shift + I` (Mac: `Cmd + Option + I`)
|
||||
- **鼠标**：在网页任意元素上**右键点击**，选择 **“检查 (Inspect)”**。
|
||||
- **菜单**：浏览器右上角菜单 -> 更多工具 -> 开发者工具。
|
||||
|
||||
---
|
||||
|
||||
## 2. 交互式演示：DevTools 模拟器
|
||||
|
||||
为了让你快速上手，我们制作了一个模拟的 DevTools 面板，复刻了 Chrome 浏览器的调试界面。
|
||||
**请尝试点击下方的“▶ 开始自动导览”按钮，跟随光标了解各个区域的功能。**
|
||||
|
||||
<ClientOnly>
|
||||
<BrowserDevToolsDemo />
|
||||
</ClientOnly>
|
||||
|
||||
### 2.1 进阶演示：实时修改网页 (Live Edit)
|
||||
|
||||
DevTools 最强大的功能之一就是**实时修改**。下方的演示包含了一个“虚拟网页”（上方）和一个“DevTools”（下方）。
|
||||
|
||||
**请尝试：**
|
||||
|
||||
1. 在下方的 Elements 面板中，点击 DOM 树中的 `h1` 或 `button` 元素。
|
||||
2. 在右侧的 Styles 面板中，修改 `element.style` 中的属性值（例如将 `color` 改为 `red`）。
|
||||
3. 观察上方的虚拟网页如何**实时发生变化**。
|
||||
|
||||
<ClientOnly>
|
||||
<BrowserDevToolsLiveDemo />
|
||||
</ClientOnly>
|
||||
|
||||
### 2.2 实战挑战：修改真实网页文字
|
||||
|
||||
既然你已经掌握了修改样式的技巧，现在让我们来点更刺激的——**直接修改你当前看到的网页！**
|
||||
|
||||
1. **打开真实的 DevTools**：按下 `F12`（或右键点击本行文字 -> 选择“检查”）。
|
||||
2. **定位元素**：在 Elements 面板中，你会看到一行被高亮选中的代码，那正是你刚刚点击的文字。
|
||||
3. **修改内容**：**双击** 这行代码中的黑色文字部分，将其修改为“**我是黑客！**”，然后按下回车。
|
||||
4. **见证奇迹**：看！网页上的文字是不是变了？
|
||||
|
||||
::: info 🤔 为什么刷新后就没了？
|
||||
你可能会发现，当你刷新页面后，所有的修改都消失了，网页又变回了原来的样子。
|
||||
|
||||
这是因为 DevTools 的修改仅仅发生在**你的浏览器本地内存**中。
|
||||
|
||||
- 当你访问网页时，浏览器从**远程服务器**下载了 HTML 代码并在本地渲染出来。
|
||||
- 你修改的只是**本地的副本**，并没有权限去修改服务器上的**源代码**。
|
||||
- 所以每次刷新，浏览器都会重新去服务器拉取最新的（未被修改的）代码，一切就复原了。
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## 3. 核心面板详解
|
||||
|
||||
### 3.1 Elements (元素面板)
|
||||
|
||||
<ClientOnly>
|
||||
<DevToolsElementsDemo />
|
||||
</ClientOnly>
|
||||
|
||||
**作用**：查看和实时编辑页面的 HTML 和 CSS。
|
||||
|
||||
- **左侧 (DOM 树)**：显示网页的 HTML 结构。你可以双击标签或文本进行修改，甚至拖拽节点改变位置。
|
||||
- **右侧 (Styles)**：显示选中元素的 CSS 样式。你可以勾选/取消样式查看变化，或者直接修改数值（如颜色、边距）。
|
||||
- **应用场景**：
|
||||
- "为什么这个按钮没有对齐？" -> 检查 CSS 样式。
|
||||
- "我想试试这个标题变成红色好看吗？" -> 直接在 Styles 里修改 `color: red`。
|
||||
|
||||
### 3.2 Console (控制台面板)
|
||||
|
||||
<ClientOnly>
|
||||
<DevToolsConsoleDemo />
|
||||
</ClientOnly>
|
||||
|
||||
**作用**：查看日志信息，运行 JavaScript 代码。
|
||||
|
||||
- **日志输出**：网页运行时的 `console.log()` 信息、警告（黄色）和报错（红色）都会显示在这里。
|
||||
- **交互环境**：你可以在这里输入任意 JS 代码并立即执行。例如输入 `alert('Hello')` 会弹窗，输入 `document.body.style.background = 'red'` 会把背景变红。
|
||||
- **应用场景**：
|
||||
- "为什么点击按钮没反应？" -> 查看是否有红色报错信息。
|
||||
- "验证一个 JS 函数的返回值。" -> 直接在控制台运行测试。
|
||||
|
||||
### 3.3 Network (网络面板)
|
||||
|
||||
<ClientOnly>
|
||||
<DevToolsNetworkDemo />
|
||||
</ClientOnly>
|
||||
|
||||
**作用**：监控所有网络请求。
|
||||
|
||||
- **列表视图**：显示加载的所有资源（HTML, CSS, JS, 图片, 接口请求）。
|
||||
- **交互详情**：点击任意请求行，右侧会滑出详情面板：
|
||||
- **Headers (标头)**：查看请求头、响应头（如 `Content-Type`）。
|
||||
- **Response (响应)**：查看服务器返回的原始数据（JSON、HTML 代码等）。
|
||||
- **Preview (预览)**：以更易读的格式预览响应内容。
|
||||
- **关键指标**：
|
||||
- **Status**：状态码（200 成功，404 找不到，500 服务器错误）。
|
||||
- **Type**：资源类型（fetch/xhr 代表接口请求）。
|
||||
- **Time**：加载耗时。
|
||||
- **应用场景**：
|
||||
- "接口是不是挂了？" -> 看接口请求是不是红色的 500。
|
||||
- "页面加载为什么这么慢？" -> 找哪个图片或文件加载时间最长。
|
||||
|
||||
### 3.4 Sources (源代码面板)
|
||||
|
||||
<ClientOnly>
|
||||
<DevToolsSourcesDemo />
|
||||
</ClientOnly>
|
||||
|
||||
**作用**：查看源代码，调试 JavaScript。
|
||||
|
||||
- **断点调试**：点击行号可以设置“断点 (Breakpoint)”。当代码执行到这一行时会**暂停**，让你有机会查看当前的变量值，并单步执行代码。
|
||||
- **应用场景**：
|
||||
- "代码逻辑哪里出错了？" -> 打断点，一步步看着代码跑，看变量值是否符合预期。
|
||||
|
||||
### 3.5 Application (应用面板)
|
||||
|
||||
<ClientOnly>
|
||||
<DevToolsApplicationDemo />
|
||||
</ClientOnly>
|
||||
|
||||
**作用**：查看和管理浏览器存储。
|
||||
|
||||
- **Storage**：
|
||||
- **Local Storage**：持久化存储的数据。
|
||||
- **Session Storage**：会话级存储（关闭标签页消失）。
|
||||
- **Cookies**：用于身份验证等的小型文本数据。
|
||||
- **应用场景**：
|
||||
- "清除登录状态" -> 删除 Cookies 或 Local Storage 中的 token。
|
||||
- "查看缓存的数据" -> 检查 Local Storage 里存了什么。
|
||||
|
||||
---
|
||||
|
||||
## 4. 实战小技巧
|
||||
|
||||
1. **手机模式调试**：点击 DevTools 左上角的“手机图标” 📱，可以模拟不同型号的手机（iPhone, Pixel 等）屏幕尺寸，测试网页的响应式效果。
|
||||
2. **强制状态**：在 Elements 面板，右键点击一个元素，选择 `Force state` -> `:hover`，可以强制让元素保持悬停状态，方便调试鼠标悬停时的样式。
|
||||
3. **截图节点**：在 Elements 面板选中一个节点，按下 `Ctrl + Shift + P` (Mac: `Cmd + Shift + P`) 打开命令菜单，输入 `screenshot`，选择 `Capture node screenshot`，可以直接把这个 DOM 节点截图保存为图片。
|
||||
|
||||
::: warning ⚠️ 注意
|
||||
DevTools 中的所有修改（修改 HTML、CSS、JS）都是**临时的**，仅在当前浏览器页面生效。一旦刷新页面，所有修改都会丢失。如果想永久生效，必须修改你的源代码文件。
|
||||
:::
|
||||
@@ -0,0 +1,3 @@
|
||||
# 编辑器与 AI 编程助手
|
||||
|
||||
> 待实现
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 383 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 278 KiB |
@@ -0,0 +1,3 @@
|
||||
# 环境变量与 PATH
|
||||
|
||||
> 待实现
|
||||
@@ -0,0 +1,348 @@
|
||||
# Git：代码的时光机
|
||||
::: tip 🎯 核心问题
|
||||
**写代码时最怕什么?** 写错了想回退、改崩了想重来、多人同时改同一个文件...这些头疼的事,Git 都能帮你搞定!它就像是代码世界的"时光机",让你随时回到过去,又能和队友在各自的"平行宇宙"里安全开发。
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## 0. 最常用的 5 个场景(直接照抄)
|
||||
|
||||
如果你只想"立刻能用",先把这块过一遍:每个场景都是现实工作中最常见的 Git 流程。
|
||||
|
||||
<GitScenariosDemo />
|
||||
|
||||
---
|
||||
|
||||
## 1. 为什么要学 Git?三大痛点
|
||||
|
||||
### 1.1 痛点一:版本混乱
|
||||
|
||||
你是否经历过这种绝望?
|
||||
|
||||
```text
|
||||
论文_初稿.doc
|
||||
论文_修改版.doc
|
||||
论文_最终版.doc
|
||||
论文_最终版_打死不改版.doc
|
||||
论文_绝对是最后一次修改版.doc
|
||||
```
|
||||
|
||||
**Git 的解决方案**:不需要复制副本,一个文件夹搞定所有历史版本。想回到哪次修改,一键恢复。
|
||||
|
||||
### 1.2 痛点二:无法后悔
|
||||
|
||||
::: tip 💡 这个场景你一定遇到过
|
||||
写代码写了 3 小时,突然发现之前的思路更好,但已经改不回去了...或者删错了一段代码,想找回原来的版本。
|
||||
|
||||
有了 Git,这种情况永远不会发生。每次重要节点都能"存档",出问题随时"读档"重来。
|
||||
:::
|
||||
|
||||
### 1.3 痛点三:协作冲突
|
||||
|
||||
你和队友同时改同一个文件:
|
||||
|
||||
- 你改了 A 文件的第 10 行
|
||||
- 队友改了 A 文件的第 15 行
|
||||
- 怎么合并?谁覆盖谁?
|
||||
|
||||
**Git 的解决方案**:智能合并,自动处理大部分冲突。只有当你们真的改了同一行代码时,才需要手动决定用谁的。
|
||||
|
||||
---
|
||||
|
||||
## 2. 核心概念:三区模型
|
||||
|
||||
Git 的设计哲学其实很像**寄快递**。
|
||||
|
||||
<GitThreeAreasDemo />
|
||||
|
||||
### 2.1 三个区域是什么?
|
||||
|
||||
::: tip 📦 用快递理解 Git
|
||||
想象你在寄快递:
|
||||
|
||||
- **工作区(Working Dir)** = 你的**书桌**。你在这里整理要寄的东西,想怎么乱改都行。
|
||||
- **暂存区(Staging Area)** = **快递盒**。你把要寄的文件放进去(`git add`),准备打包。
|
||||
- **仓库(Repository)** = **快递柜**。一旦你封箱寄出(`git commit`),这个版本就被永久记录下来了。
|
||||
:::
|
||||
|
||||
| 区域 | 作用 | 对应命令 | 状态 |
|
||||
| ---------- | ------------------ | --------------------- | ------------- |
|
||||
| **工作区** | 你当前正在改的代码 | `git status` 查看修改 | 红色 = 未暂存 |
|
||||
| **暂存区** | 准备提交的文件 | `git add` 添加 | 绿色 = 已暂存 |
|
||||
| **仓库** | 永久保存的历史版本 | `git commit` 提交 | 只读,不能改 |
|
||||
|
||||
::: tip 💡 关键理解
|
||||
只有提交到**仓库**的内容才是安全的。工作区里没提交的内容,丢了就真丢了。所以经常`git commit`是好习惯!
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## 3. 基础工作流:存档三步走
|
||||
|
||||
日常开发中,你 90% 的时间都在重复这三个动作。
|
||||
|
||||
<GitWorkflowDemo />
|
||||
|
||||
### 3.1 第一步:修改代码(工作区)
|
||||
|
||||
在工作区写写画画,想怎么改就怎么改。这时候修改只在你本地,还没记录。
|
||||
|
||||
### 3.2 第二步:挑选文件(git add → 暂存区)
|
||||
|
||||
::: tip 🤔 为什么要先 add 再 commit?
|
||||
你可能问:为什么不能直接 commit 所有修改?
|
||||
|
||||
**答案**:因为有时候你不想一次性提交所有改动。
|
||||
|
||||
- 今天改了 5 个文件,但只想提交其中 3 个(完成了一个功能)
|
||||
- 另外 2 个文件还在调试中,不想现在提交
|
||||
|
||||
`git add` 让你有选择权:决定这次提交包含哪些文件。
|
||||
:::
|
||||
|
||||
**常用命令**:
|
||||
|
||||
```bash
|
||||
# 添加单个文件
|
||||
git add index.html
|
||||
|
||||
# 添加所有修改
|
||||
git add .
|
||||
|
||||
# 查看哪些文件被暂存了
|
||||
git status
|
||||
```
|
||||
|
||||
### 3.3 第三步:封箱提交(git commit → 仓库)
|
||||
|
||||
给这次修改起个名字(比如"修复了登录 Bug"),永久存档。
|
||||
|
||||
**重要:commit message 要写清楚!**
|
||||
|
||||
```bash
|
||||
# ❌ 不好的写法
|
||||
git commit -m "update"
|
||||
|
||||
# ✅ 好的写法
|
||||
git commit -m "feat: 添加用户登录功能"
|
||||
git commit -m "fix: 修复首页在 iOS 的显示问题"
|
||||
git commit -m "docs: 更新 README 的部署说明"
|
||||
```
|
||||
|
||||
::: tip 💡 commit message 规范
|
||||
推荐用**类型+描述**的格式:
|
||||
|
||||
- `feat:` 新功能
|
||||
- `fix:` 修复 bug
|
||||
- `docs:` 文档更新
|
||||
- `style:` 代码格式(不影响功能)
|
||||
- `refactor:` 重构(不改变功能)
|
||||
- `test:` 测试相关
|
||||
- `chore:` 构建/工具相关
|
||||
|
||||
这样以后翻历史记录,一眼就知道每次提交做了什么。
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## 4. 平行宇宙:分支(Branch)的魔法
|
||||
|
||||
这是 Git 最强大的功能!
|
||||
|
||||
::: tip 🌌 用游戏理解分支
|
||||
想象你在玩游戏,前面有个大 Boss(上线新功能),你怕打不过导致游戏结束(系统崩溃)。
|
||||
|
||||
这时候,你可以开一个**分支(Branch)**,相当于**复制了一个平行世界**:
|
||||
|
||||
- 在**平行世界**(新分支)里打 Boss,输了也不怕,因为主世界(主分支)没影响
|
||||
- 打赢了就把成果"合并"回主世界
|
||||
- 多个队友可以在各自的平行世界开发,互不干扰
|
||||
:::
|
||||
|
||||
<GitBranchMergeDemo />
|
||||
|
||||
### 4.1 主分支 vs 开发分支
|
||||
|
||||
| 分支类型 | 作用 | 特点 |
|
||||
| ------------------- | -------------- | ------------------------------------ |
|
||||
| **main/master** | 稳定的线上版本 | 只有测试通过的代码才能进来 |
|
||||
| **dev/feature-xxx** | 你的试验田 | 这里炸了地球也没关系,不影响主分支 |
|
||||
| **hotfix-xxx** | 紧急修复 | 生产出 bug 时,从 main 开分支快速修复 |
|
||||
|
||||
### 4.2 分支操作流程
|
||||
|
||||
**创建分支并切换**:
|
||||
|
||||
```bash
|
||||
# 创建新分支
|
||||
git branch feature-login
|
||||
|
||||
# 切换到新分支
|
||||
git checkout feature-login
|
||||
|
||||
# 或者一步到位:创建并切换
|
||||
git checkout -b feature-login
|
||||
```
|
||||
|
||||
**在分支上开发**:
|
||||
|
||||
```bash
|
||||
# 在 feature-login 分支上改代码...
|
||||
git add .
|
||||
git commit -m "feat: 添加登录表单"
|
||||
```
|
||||
|
||||
**合并回主分支**:
|
||||
|
||||
```bash
|
||||
# 切回主分支
|
||||
git checkout main
|
||||
|
||||
# 合并 feature-login
|
||||
git merge feature-login
|
||||
|
||||
# 删除已合并的分支(可选)
|
||||
git branch -d feature-login
|
||||
```
|
||||
|
||||
::: tip 💡 什么时候用分支?
|
||||
**个人开发**:
|
||||
|
||||
- 要尝试新想法,不确定会不会搞崩现有代码 → 开分支
|
||||
- 修一个复杂 bug,需要多次实验 → 开分支
|
||||
|
||||
**团队开发**:
|
||||
|
||||
- 每个功能一个分支,互不干扰
|
||||
- 开发完提 Pull Request,队友 review 后再合并
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## 5. 常用命令速查表
|
||||
|
||||
| 命令 | 作用 | 人话解释 | 使用频率 |
|
||||
| ----------------------- | ---------- | ------------------------------ | --------------------- |
|
||||
| `git init` | 初始化 | "在这里建个新仓库" | 项目开始时用一次 |
|
||||
| `git status` | 查看状态 | "现在乱不乱?有没有东西没提交?" | ⭐⭐⭐⭐⭐ 极高频 |
|
||||
| `git add .` | 添加所有 | "把桌上所有文件都扔进快递盒" | ⭐⭐⭐⭐⭐ 每次提交前 |
|
||||
| `git add file.txt` | 添加单个 | "只要这个文件" | ⭐⭐⭐⭐ 选择性添加 |
|
||||
| `git commit -m "..."` | 提交 | "封箱!贴上标签,写上这次改了啥" | ⭐⭐⭐⭐⭐ 完成功能时 |
|
||||
| `git log` | 查看历史 | "翻翻以前的日记" | ⭐⭐⭐ 回顾历史 |
|
||||
| `git checkout -b dev` | 创建新分支 | "我要去平行宇宙 dev 探险了" | ⭐⭐⭐⭐ 开新功能 |
|
||||
| `git checkout main` | 切换分支 | "回地球(主分支)看看" | ⭐⭐⭐⭐ 切换任务 |
|
||||
| `git merge dev` | 合并分支 | "把平行宇宙的成果带回地球" | ⭐⭐⭐ 完成功能 |
|
||||
| `git branch` | 查看分支 | "现在有哪些平行世界?" | ⭐⭐⭐ 查看状态 |
|
||||
| `git branch -d feature` | 删除分支 | "这个平行世界不需要了,删掉" | ⭐⭐ 合并后清理 |
|
||||
| `git push` | 推送 | "把本地存档上传到云端" | ⭐⭐⭐⭐⭐ 团队协作 |
|
||||
| `git pull` | 拉取 | "把云端最新存档下载到本地" | ⭐⭐⭐⭐⭐ 团队协作 |
|
||||
|
||||
---
|
||||
|
||||
## 6. 进阶:解决冲突与远程协作
|
||||
|
||||
### 6.1 冲突(Conflict)是什么?
|
||||
|
||||
当你和队友**同时修改了同一个文件的同一行代码**,Git 就会懵:"我该听谁的?"这就是**冲突(Conflict)**。
|
||||
|
||||
<GitConflictDemo />
|
||||
|
||||
### 6.2 怎么解决冲突?
|
||||
|
||||
**Step 1**:打开冲突文件,会看到这样的标记:
|
||||
|
||||
```text
|
||||
<<<<<<< HEAD
|
||||
你的代码
|
||||
=======
|
||||
队友的代码
|
||||
>>>>>>> feature-branch
|
||||
```
|
||||
|
||||
**Step 2**:手动选择要保留的代码,或合并两者:
|
||||
|
||||
```text
|
||||
# 保留你的代码 → 删除队友的部分和标记
|
||||
# 保留队友的 → 删除你的部分和标记
|
||||
# 合并两者 → 综合两边的代码
|
||||
```
|
||||
|
||||
**Step 3**:删除所有标记,保存文件
|
||||
|
||||
**Step 4**:重新提交
|
||||
|
||||
```bash
|
||||
git add 解决冲突的文件
|
||||
git commit # Git 会自动生成合并提交
|
||||
```
|
||||
|
||||
::: tip 💡 避免冲突的最佳实践
|
||||
|
||||
- **频繁沟通**:队友改同一个文件前,先打个招呼
|
||||
- **小步提交**:不要攒着大量代码最后才提交,增加冲突概率
|
||||
- **分支隔离**:不同功能用不同分支,减少直接冲突
|
||||
- **用 Pull Request**:合并前让队友 review,提前发现问题
|
||||
:::
|
||||
|
||||
### 6.3 远程仓库(Remote)
|
||||
|
||||
**远程仓库**(比如 GitHub/GitLab)就是**云端的备份中心**。
|
||||
|
||||
<GitRemoteDemo />
|
||||
|
||||
**核心操作**:
|
||||
|
||||
| 操作 | 命令 | 作用 |
|
||||
| ------------ | ---------------------------------------------- | ------------------------ |
|
||||
| **关联远程** | `git remote add origin https://github.com/...` | 第一次连接云端 |
|
||||
| **推送** | `git push -u origin main` | 把本地存档上传 |
|
||||
| **拉取** | `git pull` | 把云端最新存档下载并合并 |
|
||||
| **克隆** | `git clone https://github.com/...` | 复制整个仓库到本地 |
|
||||
|
||||
::: tip 💡 push 和 pull 的区别
|
||||
|
||||
- **push**:你的本地代码 → 云端(你改了东西,要同步给队友)
|
||||
- **pull**:云端代码 → 你的本地(队友改了东西,你要同步下来)
|
||||
|
||||
**最佳实践**:每天开始工作前先`git pull`,下班前`git push`,这样减少冲突。
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## 7. 总结:Git 的核心思想
|
||||
|
||||
Git 不是简单的"版本备份",而是一个**完整的代码协作系统**:
|
||||
|
||||
| 特性 | 解决的问题 | 生活类比 |
|
||||
| ------------ | ------------------------------- | --------------------- |
|
||||
| **版本管理** | 代码改错了怎么办? | 时光机,随时回退 |
|
||||
| **分支** | 多人同时改同一个文件怎么办? | 平行宇宙,互不干扰 |
|
||||
| **暂存区** | 这次提交不想包含所有修改怎么办? | 快递盒,挑拣要寄的东西 |
|
||||
| **远程协作** | 怎么和队友共享代码? | 云备份,随时随地同步 |
|
||||
| **冲突处理** | 真的改到同一行了怎么办? | 智能合并 + 手动协调 |
|
||||
|
||||
**学习建议**:
|
||||
|
||||
1. **先用起来**:不要等"完全理解"再用,一边用一边理解
|
||||
2. **从简单开始**:个人项目先掌握`add/commit/push/pull`,团队项目再学分支
|
||||
3. **看 Git 图形化工具**:SourceTree、GitHub Desktop 等,可视化帮助理解
|
||||
4. **遇到问题不要慌**:Git 的设计就是为了让你能安全地尝试,大不了`git reset`
|
||||
|
||||
---
|
||||
|
||||
## 附录:名词速查表
|
||||
|
||||
| 名词 | 英文 | 用人话解释 |
|
||||
| -------- | ---------- | ------------------------------------- |
|
||||
| **仓库** | Repository | 存放所有版本历史的数据库 |
|
||||
| **提交** | Commit | 一次完整的版本记录,像存档点 |
|
||||
| **分支** | Branch | 独立的开发线,像平行宇宙 |
|
||||
| **合并** | Merge | 把一个分支的改动整合到另一个分支 |
|
||||
| **冲突** | Conflict | 同一行代码被修改多次,Git 不知道选哪个 |
|
||||
| **暂存** | Stage | 把修改加入"准备提交"的列表 |
|
||||
| **远程** | Remote | 云端的仓库副本(GitHub/GitLab) |
|
||||
| **克隆** | Clone | 复制整个远程仓库到本地 |
|
||||
| **推送** | Push | 本地 → 远程,上传代码 |
|
||||
| **拉取** | Pull | 远程 → 本地,下载代码 |
|
||||
| **检出** | Checkout | 切换到某个分支或版本 |
|
||||
| **HEAD** | - | 当前所在的分支/版本的指针 |
|
||||
@@ -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>
|
||||
@@ -0,0 +1,3 @@
|
||||
# 包管理器（npm / pip / cargo）
|
||||
|
||||
> 待实现
|
||||
@@ -0,0 +1,3 @@
|
||||
# 端口与 localhost
|
||||
|
||||
> 待实现
|
||||
@@ -0,0 +1,3 @@
|
||||
# 正则表达式
|
||||
|
||||
> 待实现
|
||||
@@ -0,0 +1,3 @@
|
||||
# SSH 与密钥认证
|
||||
|
||||
> 待实现
|
||||
Reference in New Issue
Block a user