diff --git a/README.md b/README.md index 7b8b38b..40e313c 100644 --- a/README.md +++ b/README.md @@ -166,6 +166,7 @@ ## 🔥 News +- **[2026-03-25]** 📚 **英文文档全面更新**：第二阶段（全栈开发）和第三阶段（高级开发）现已提供完整英文翻译。 - **[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-02-25]** 更新[附录知识库](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/)，涵盖 9 大知识领域、80+ 交互式专题。 diff --git a/docs-readme/en-US/README.md b/docs-readme/en-US/README.md index 2de241e..786884d 100644 --- a/docs-readme/en-US/README.md +++ b/docs-readme/en-US/README.md @@ -131,6 +131,7 @@ Easy-Vibe takes you from 0 to 1 through the following stages: ## 🔥 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-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. diff --git a/docs/en/stage-3/cross-platform/3.12-vscode-extension/index.md b/docs/en/stage-3/cross-platform/3.12-vscode-extension/index.md index 6032a14..dc3b361 100644 --- a/docs/en/stage-3/cross-platform/3.12-vscode-extension/index.md +++ b/docs/en/stage-3/cross-platform/3.12-vscode-extension/index.md @@ -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 +![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 @@ -53,6 +54,7 @@ VS Code editor ``` +![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? @@ -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 | +![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 @@ -145,6 +148,7 @@ ai-project-bot/ | `contributes` | All contributed features (commands, menus, keybindings, views, etc.) | +![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" @@ -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. +![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. @@ -268,6 +273,7 @@ This config does three things: 3. Adds a "+" button in the view title bar for project creation +![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 @@ -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. +![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) @@ -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. +![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) @@ -632,6 +640,7 @@ export function registerSelectionCommands(context: vscode.ExtensionContext) { ``` +![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 @@ -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. +![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) @@ -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). +![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)