delorex/test-repo
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: update english documentation and add missing images

Browse Source
This commit is contained in:
sanbuphy
2026-03-25 00:56:13 +08:00
parent ee4b8f18e3
commit f86668d458
3 changed files with 13 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1
View File
@@ -166,6 +166,7 @@
## 🔥 News ## 🔥 News
- **[2026-03-25]** 📚 **英文文档全面更新**：第二阶段（全栈开发）和第三阶段（高级开发）现已提供完整英文翻译。
- **[2026-03-02]** 🦞 **OpenClaw & AI Agent 友好支持**：新增 `llms.txt` AI 导航文件，让 OpenClaw、Claude、Cursor、Trae 等 AI Agent 能够快速理解本仓库结构，精准定位教程内容。希望每个🦞都学得愉快！ - **[2026-03-02]** 🦞 **OpenClaw & AI Agent 友好支持**：新增 `llms.txt` AI 导航文件，让 OpenClaw、Claude、Cursor、Trae 等 AI Agent 能够快速理解本仓库结构，精准定位教程内容。希望每个🦞都学得愉快！
- **[2026-03-01]** [高级开发部分](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/)全面升级：新增 Claude Code 七大深度指南（MCP、Skills、Agent Teams 等）及八大跨平台开发实战（PWA、Electron、NFT、VS Code 插件、Qt 工业应用等）。 - **[2026-03-01]** [高级开发部分](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/)全面升级：新增 Claude Code 七大深度指南（MCP、Skills、Agent Teams 等）及八大跨平台开发实战（PWA、Electron、NFT、VS Code 插件、Qt 工业应用等）。
- **[2026-02-25]** 更新[附录知识库](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/)，涵盖 9 大知识领域、80+ 交互式专题。 - **[2026-02-25]** 更新[附录知识库](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/)，涵盖 9 大知识领域、80+ 交互式专题。
docs-readme/en-US/README.md
+1
View File
@@ -131,6 +131,7 @@ Easy-Vibe takes you from 0 to 1 through the following stages:
## 🔥 News ## 🔥 News
- **[2026-03-25]** 📚 **English Documentation Fully Updated**: Complete English translations now available for Stage 2 (Full-stack Development) and Stage 3 (Advanced Development) sections.
- **[2026-03-02]** 🦞 **OpenClaw & AI Agent Friendly Support**: Added `llms.txt` AI navigation file, enabling OpenClaw, Claude, Cursor, Trae and other AI Agents to quickly understand the repository structure and accurately locate tutorial content. Hope every 🦞 enjoys learning! - **[2026-03-02]** 🦞 **OpenClaw & AI Agent Friendly Support**: Added `llms.txt` AI navigation file, enabling OpenClaw, Claude, Cursor, Trae and other AI Agents to quickly understand the repository structure and accurately locate tutorial content. Hope every 🦞 enjoys learning!
- **[2026-03-01]** [Advanced Development Section](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/) comprehensively upgraded: Added seven deep guides for Claude Code (MCP, Skills, Agent Teams, etc.) and eight cross-platform development tutorials (PWA, Electron, NFT, VS Code Extensions, Qt Industrial Applications, etc.). - **[2026-03-01]** [Advanced Development Section](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/) comprehensively upgraded: Added seven deep guides for Claude Code (MCP, Skills, Agent Teams, etc.) and eight cross-platform development tutorials (PWA, Electron, NFT, VS Code Extensions, Qt Industrial Applications, etc.).
- **[2026-02-25]** Updated [Appendix Knowledge Base](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/), covering 9 knowledge domains and 80+ interactive topics. - **[2026-02-25]** Updated [Appendix Knowledge Base](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/), covering 9 knowledge domains and 80+ interactive topics.
docs/en/stage-3/cross-platform/3.12-vscode-extension/index.md
+11
View File
@@ -26,6 +26,7 @@ VS Code extensions can do much more than many people expect:
* **Add AI capabilities**: create AI assistants with Chat Participant API, call models with Language Model API * **Add AI capabilities**: create AI assistants with Chat Participant API, call models with Language Model API
<!-- ![placeholder: VS Code extension ecosystem diagram showing expandable areas: sidebar, editor, status bar, command palette, Chat panel](../../../../zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image1.png) --> <!-- ![placeholder: VS Code extension ecosystem diagram showing expandable areas: sidebar, editor, status bar, command palette, Chat panel](../../../../zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image1.png) -->
![VS Code extension ecosystem diagram showing the areas extensions can extend: sidebar, editor, status bar, command palette, and Chat panel](/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image1.png)
## 1.2 Core Architecture of a VS Code Extension ## 1.2 Core Architecture of a VS Code Extension
@@ -53,6 +54,7 @@ VS Code editor
``` ```
<!-- ![placeholder: VS Code extension architecture diagram showing Extension Host vs editor main process](../../../../zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image2.png) --> <!-- ![placeholder: VS Code extension architecture diagram showing Extension Host vs editor main process](../../../../zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image2.png) -->
![VS Code extension architecture diagram showing the Extension Host process and the editor main process](/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image2.png)
## 1.3 What Extension Are We Building? ## 1.3 What Extension Are We Building?
@@ -67,6 +69,7 @@ We will build a VS Code extension named **"AI Project Bot"**, an AI project assi
| Shortcuts | Custom keybindings to trigger common actions quickly | | Shortcuts | Custom keybindings to trigger common actions quickly |
<!-- ![placeholder: AI Project Bot preview showing sidebar templates, @project-bot chat panel, and right-click menu](../../../../zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image3.png) --> <!-- ![placeholder: AI Project Bot preview showing sidebar templates, @project-bot chat panel, and right-click menu](../../../../zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image3.png) -->
![Preview of the AI Project Bot extension showing the sidebar template list, the @project-bot chat panel, and the right-click menu](/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image3.png)
## 1.4 Tutorial Roadmap ## 1.4 Tutorial Roadmap
@@ -145,6 +148,7 @@ ai-project-bot/
| `contributes` | All contributed features (commands, menus, keybindings, views, etc.) | | `contributes` | All contributed features (commands, menus, keybindings, views, etc.) |
<!-- ![placeholder: package.json screenshot with contributes field highlighted](../../../../zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image4.png) --> <!-- ![placeholder: package.json screenshot with contributes field highlighted](../../../../zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image4.png) -->
![Screenshot of the package.json file in the editor with the contributes field highlighted](/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image4.png)
## 2.3 Understand extension.ts: The Extension "Brain" ## 2.3 Understand extension.ts: The Extension "Brain"
@@ -185,6 +189,7 @@ Press **F5**, and VS Code opens a new **Extension Development Host** window. Thi
In the new window, press **Ctrl+Shift+P**, type "Hello World," and you will see a message popup. This means your extension is running. In the new window, press **Ctrl+Shift+P**, type "Hello World," and you will see a message popup. This means your extension is running.
<!-- ![placeholder: VS Code extension debugging screenshot showing Extension Development Host and Hello World message](../../../../zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image5.png) --> <!-- ![placeholder: VS Code extension debugging screenshot showing Extension Development Host and Hello World message](../../../../zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image5.png) -->
![Screenshot of debugging a VS Code extension, showing the Extension Development Host window and the Hello World message](/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image5.png)
> **Debug tip**: after code changes, in Extension Development Host press **Ctrl+Shift+P** -> **Developer: Reload Window** to reload extension quickly. > **Debug tip**: after code changes, in Extension Development Host press **Ctrl+Shift+P** -> **Developer: Reload Window** to reload extension quickly.
@@ -268,6 +273,7 @@ This config does three things:
3. Adds a "+" button in the view title bar for project creation 3. Adds a "+" button in the view title bar for project creation
<!-- ![placeholder: Screenshot showing AI Project Bot icon and project template list in VS Code sidebar](../../../../zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image6.png) --> <!-- ![placeholder: Screenshot showing AI Project Bot icon and project template list in VS Code sidebar](../../../../zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image6.png) -->
![Screenshot showing the AI Project Bot icon and the project template list in the VS Code sidebar](/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image6.png)
## 3.3 Implement TreeDataProvider ## 3.3 Implement TreeDataProvider
@@ -394,6 +400,7 @@ export function activate(context: vscode.ExtensionContext) {
Now press F5 for debugging. You will see AI Project Bot in activity bar. Expand template list and click any template to create a project. Now press F5 for debugging. You will see AI Project Bot in activity bar. Expand template list and click any template to create a project.
<!-- ![placeholder: Screenshot showing project name input and folder picker dialog after clicking a template](../../../../zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image7.png) --> <!-- ![placeholder: Screenshot showing project name input and folder picker dialog after clicking a template](../../../../zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image7.png) -->
![Screenshot showing the project name input box and folder picker dialog after clicking a template](/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image7.png)
# Chapter 4: Implement AI Chat Participant (5 Minutes) # Chapter 4: Implement AI Chat Participant (5 Minutes)
@@ -531,6 +538,7 @@ export function activate(context: vscode.ExtensionContext) {
Now input `@project-bot /explain what does this code do?` in Chat panel, and your extension will call model and generate explanation. Now input `@project-bot /explain what does this code do?` in Chat panel, and your extension will call model and generate explanation.
<!-- ![placeholder: VS Code Chat screenshot showing @project-bot, /explain command, and streaming response](../../../../zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image8.png) --> <!-- ![placeholder: VS Code Chat screenshot showing @project-bot, /explain command, and streaming response](../../../../zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image8.png) -->
![Screenshot of the VS Code Chat panel showing @project-bot, the /explain command, and a streaming response](/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image8.png)
# Chapter 5: File/Snippet Chat and Multi-file Q&A (5 Minutes) # Chapter 5: File/Snippet Chat and Multi-file Q&A (5 Minutes)
@@ -632,6 +640,7 @@ export function registerSelectionCommands(context: vscode.ExtensionContext) {
``` ```
<!-- ![placeholder: Screenshot of editor context menu showing AI items after selecting code](../../../../zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image9.png) --> <!-- ![placeholder: Screenshot of editor context menu showing AI items after selecting code](../../../../zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image9.png) -->
![Screenshot of the editor context menu showing AI items after selecting code](/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image9.png)
## 5.3 Multi-file Q&A: Batch Analyze File Relationships ## 5.3 Multi-file Q&A: Batch Analyze File Relationships
@@ -729,6 +738,7 @@ export function registerMultiFileCommands(context: vscode.ExtensionContext) {
Usage: in explorer, hold `Ctrl` (`Cmd` on Mac) to multi-select files, right-click and choose "AI: Analyze Relationships of Selected Files." AI reads all selected files and returns analysis. Usage: in explorer, hold `Ctrl` (`Cmd` on Mac) to multi-select files, right-click and choose "AI: Analyze Relationships of Selected Files." AI reads all selected files and returns analysis.
<!-- ![placeholder: Screenshot of explorer with multi-selected files and AI analysis context menu item](../../../../zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image10.png) --> <!-- ![placeholder: Screenshot of explorer with multi-selected files and AI analysis context menu item](../../../../zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image10.png) -->
![Screenshot of the explorer with multiple selected files and an AI analysis item in the context menu](/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image10.png)
# Chapter 6: Shortcuts and UX Optimization (3 Minutes) # Chapter 6: Shortcuts and UX Optimization (3 Minutes)
@@ -799,6 +809,7 @@ export function createStatusBarItem(context: vscode.ExtensionContext) {
`$(hubot)` is VS Code built-in icon syntax. You can find all icons in [Codicon library](https://microsoft.github.io/vscode-codicons/dist/codicon.html). `$(hubot)` is VS Code built-in icon syntax. You can find all icons in [Codicon library](https://microsoft.github.io/vscode-codicons/dist/codicon.html).
<!-- ![placeholder: Screenshot of AI Bot icon displayed in VS Code status bar](../../../../zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image11.png) --> <!-- ![placeholder: Screenshot of AI Bot icon displayed in VS Code status bar](../../../../zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image11.png) -->
![Screenshot of the AI Bot icon displayed in the VS Code status bar](/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image11.png)
# Chapter 7: Publish to Marketplace (Optional) # Chapter 7: Publish to Marketplace (Optional)