Happy VSCode 插件
一个基于 VS Code 的聊天插件示例。
项目结构
happy/
├── src/ # 源代码目录
│ ├── extension.ts # 插件主入口
│ └── webview/ # WebView 前端项目
│ ├── src/ # 前端源代码
│ ├── package.json # 前端依赖配置
│ └── vite.config.ts # Vite 配置
└── package.json # 插件依赖配置
开发环境准备
确保已安装以下工具：
- Node.js (推荐 v16 或更高版本)
- pnpm (推荐使用 pnpm 作为包管理器)
- Visual Studio Code
安装项目依赖：
# 安装插件主项目依赖
pnpm install
# 安装 WebView 前端项目依赖
cd src/webview
pnpm install
cd ../..
开发调试
启动 WebView 前端开发服务：
# 在项目根目录执行
pnpm run watch:webview
启动 VS Code 插件调试：
- 按 F5 启动调试
- 或在 VS Code 中按 Ctrl+Shift+D，选择 "Run Extension"
在新窗口中测试插件：
- 点击左侧活动栏中的 Happy 图标
- 在聊天界面中输入消息并测试
常用命令
pnpm run compile: 编译插件代码pnpm run watch: 监视模式编译插件代码pnpm run watch:webview: 监视模式编译前端代码pnpm run package: 打包插件pnpm run lint: 运行代码检查
发布插件
更新版本号：
- 修改 package.json 中的 version 字段
打包插件：
pnpm run package
发布到 VS Code 插件市场：
vsce publish
注意事项
修改 WebView 前端代码后需要：
- 等待 watch:webview 自动编译
- 在 VS Code 中重新加载窗口（Ctrl+R 或 Cmd+R）
修改插件主代码后需要：
开发时建议：
- 保持 watch:webview 运行以实时编译前端代码
- 使用 VS Code 调试功能进行开发测试
更新日志
1.0.0
- 初始版本发布
- 实现基本的聊天功能
- 支持 WebView 前端项目独立开发
Features
Describe specific features of your extension including screenshots of your extension in action. Image paths are relative to this README file.
For example if there is an image subfolder under your extension project workspace:
Tip: Many popular extensions utilize animations. This is an excellent way to show off your extension! We recommend short, focused animations that are easy to follow.
Requirements
If you have any requirements or dependencies, add a section describing those and how to install and configure them.
Extension Settings
Include if your extension adds any VS Code settings through the contributes.configuration extension point.
For example:
This extension contributes the following settings:
myExtension.enable: Enable/disable this extension.myExtension.thing: Set to blah to do something.
Known Issues
Calling out known issues can help limit users opening duplicate issues against your extension.
Release Notes
Users appreciate release notes as you update your extension.
1.0.0
Initial release of ...
1.0.1
Fixed issue #.
1.1.0
Added features X, Y, and Z.
Following extension guidelines
Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.
Working with Markdown
You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:
- Split the editor (
Cmd+\ on macOS or Ctrl+\ on Windows and Linux).
- Toggle preview (
Shift+Cmd+V on macOS or Shift+Ctrl+V on Windows and Linux).
- Press
Ctrl+Space (Windows, Linux, macOS) to see a list of Markdown snippets.
Enjoy!
