Skip to content

Commit bdd764d

Browse files
committed
docs: 添加开发指南和IDE配置文件
- 新增开发环境搭建指南文档 - 添加VS Code调试和任务配置 - 添加开发脚本和运行截图 - 完善插件开发环境配置
1 parent 524d2ce commit bdd764d

7 files changed

Lines changed: 505 additions & 0 deletions

File tree

doc/DEVELOPMENT_GUIDE.md

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
# VoidMuse Development Guide
2+
3+
## 项目结构
4+
5+
VoidMuse 采用独立开发模式,每个组件都有自己的开发和构建脚本:
6+
7+
```
8+
voidmuse/
9+
├── gui/ # React Web GUI 界面
10+
├── extensions/
11+
│ ├── vscode/ # VSCode 扩展
12+
│ └── intellij/ # IntelliJ IDEA 插件
13+
├── doc/ # 项目文档
14+
```
15+
16+
## 环境要求
17+
18+
- **Node.js** >= 16.0.0
19+
- **Java** >= 17 (IntelliJ插件开发)
20+
- **Gradle** (IntelliJ插件构建,通过Gradle Wrapper自动管理)
21+
- **VSCode** (VSCode扩展开发)
22+
23+
## 快速开始
24+
25+
### 安装依赖
26+
```bash
27+
# GUI 项目依赖
28+
cd gui && npm install
29+
30+
# VSCode 扩展依赖
31+
cd extensions/vscode && npm install
32+
33+
# IntelliJ 插件使用 Gradle 管理依赖,无需手动安装
34+
```
35+
36+
## 开发环境启动
37+
38+
### 🎨 GUI 开发
39+
40+
```bash
41+
cd gui
42+
npm run dev # 启动开发服务器 (http://localhost:3002)
43+
npm run build:test # 构建静态文件版本
44+
npm run preview # 预览生产构建
45+
npm run lint # 运行代码检查
46+
```
47+
48+
### 📝 VSCode 扩展开发
49+
50+
```bash
51+
cd extensions/vscode
52+
npm run debug # 🚀 启动 VSCode 调试环境(推荐)
53+
npm run build-gui # 仅构建GUI并复制到扩展
54+
npm run dev # 启动开发环境(自动编译)
55+
npm run build # 构建和打包扩展
56+
npm run package # 创建 .vsix 包
57+
```
58+
59+
**VSCode 扩展调试说明:**
60+
- `npm run debug` 会自动:
61+
1. 构建GUI项目(在gui目录执行`npm run build:prod`
62+
2. 删除扩展中的旧GUI资源
63+
3. 复制新的GUI构建产物到扩展的`gui`目录
64+
4. 安装VSCode扩展依赖
65+
5. 编译 TypeScript
66+
6. 启动 VSCode 并加载扩展进行调试
67+
- 这是最便捷的开发方式,包含完整的GUI构建流程
68+
- VSCode扩展依赖GUI构建产物,`gui/`目录由自动化管理
69+
70+
**重要提示:**
71+
- VSCode扩展依赖GUI构建产物,`gui/`目录由自动化管理,不应手动编辑
72+
- 始终使用 `npm run debug` 获得最新的开发体验
73+
- `.vscode/` 配置文件已包含在版本控制中,确保标准化的开发体验
74+
75+
或者使用独立脚本:
76+
```bash
77+
cd extensions/vscode
78+
node dev.js dev # 启动开发环境
79+
node dev.js build # 构建和打包扩展
80+
node dev.js install # 仅安装依赖
81+
```
82+
83+
### 🧠 IntelliJ 插件开发
84+
85+
#### 前置步骤:启动 GUI 开发服务器
86+
```bash
87+
cd gui
88+
npm install # 安装依赖
89+
npm run dev # 启动开发服务器 (http://localhost:3002)
90+
```
91+
92+
#### IntelliJ 插件开发步骤
93+
1. **打开项目**
94+
- 启动 IntelliJ IDEA
95+
- `File → Open` → 选择 `extensions/intellij` 目录
96+
- 等待 Gradle 同步完成
97+
98+
2. **配置运行环境**
99+
- `Run → Edit Configurations`
100+
- 添加 Gradle 配置:
101+
- Name: `Run Plugin`
102+
- Tasks: `runIde`
103+
-`Environment variables` 中添加:`VOIDMUSE_DEV_MODE=true`
104+
- 或在 `VM options` 中添加:`-Dvoidmuse.dev.mode=true`
105+
![runIde](img/run/runIde.jpg)
106+
3. **启动调试**
107+
- 点击调试按钮启动插件开发环境
108+
- 插件会自动连接到 GUI 开发服务器
109+
110+
#### 手动构建命令
111+
```bash
112+
cd extensions/intellij
113+
./gradlew build # 构建插件
114+
./gradlew test # 运行测试
115+
./gradlew clean # 清理构建文件
116+
```
117+
118+
#### 开发模式配置
119+
插件支持自动检测开发模式,通过环境变量或系统属性控制:
120+
121+
1. **推荐方式 - 在 IntelliJ IDEA 运行配置中设置**
122+
- `Run → Edit Configurations`
123+
-`Environment variables` 中添加:`VOIDMUSE_DEV_MODE=true`
124+
- 或在 `VM options` 中添加:`-Dvoidmuse.dev.mode=true`
125+
126+
2. **手动设置环境变量**
127+
```bash
128+
set VOIDMUSE_DEV_MODE=true # Windows
129+
export VOIDMUSE_DEV_MODE=true # Linux/Mac
130+
```
131+
132+
## 依赖管理
133+
134+
每个项目独立管理自己的依赖:
135+
136+
- **GUI**: 使用 npm,依赖安装在 `gui/node_modules/`
137+
- **VSCode**: 使用 npm,依赖安装在 `extensions/vscode/node_modules/`
138+
- **IntelliJ**: 使用 Gradle,依赖由 Gradle 管理
139+
140+
## 工作流程建议
141+
142+
### 日常开发
143+
1. **GUI 开发**
144+
```bash
145+
cd gui && npm run dev
146+
```
147+
148+
2. **VSCode 扩展开发**
149+
```bash
150+
cd extensions/vscode && npm run debug
151+
```
152+
153+
3. **IntelliJ 插件开发**
154+
```bash
155+
# 1. 启动 GUI 开发服务器
156+
cd gui && npm install && npm run dev
157+
158+
# 2. 在 IntelliJ IDEA 中打开 extensions/intellij 项目
159+
# 3. 配置 runIde 任务并设置环境变量 VOIDMUSE_DEV_MODE=true
160+
# 4. 启动调试
161+
```
162+
163+
### 测试发布
164+
1. 构建所有组件并测试功能
165+
2. 确认功能正常后发布
166+
167+
## 故障排除
168+
169+
### GUI 开发服务器问题
170+
- 检查端口 3002 是否被占用
171+
- 确认 GUI 目录下的依赖已安装
172+
- 修改 `vite.config.ts` 中的端口配置(如需要)
173+
174+
### IntelliJ 插件无法连接到开发服务器
175+
- 确认 GUI 开发服务器正在运行
176+
- 检查环境变量或 JVM 参数设置
177+
- 查看 IntelliJ 控制台日志
178+
179+
## 最佳实践
180+
181+
1. **GUI 开发**:使用 `npm run dev` 启动开发服务器
182+
2. **VSCode 扩展开发**:使用 `npm run debug` 获得完整的开发体验
183+
3. **IntelliJ 插件开发**:在 IntelliJ IDEA 中直接打开项目进行开发
184+
4. **构建时**:使用对应的 `npm run build``./gradlew build` 命令
185+
5. **发布前**:确保所有组件都能正常构建和运行
186+
6. **多人协作**:提交代码前确保开发环境配置文档是最新的

doc/img/run/intellij-plugin.jpg

62.1 KB
Loading

doc/img/run/runIde.jpg

62.2 KB
Loading

doc/img/run/vscode-plugin.jpg

55.8 KB
Loading
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"version": "0.2.0",
3+
"configurations": [
4+
{
5+
"name": "Run Extension",
6+
"type": "extensionHost",
7+
"request": "launch",
8+
"args": [
9+
"--extensionDevelopmentPath=${workspaceFolder}"
10+
],
11+
"outFiles": [
12+
"${workspaceFolder}/out/**/*.js"
13+
],
14+
"preLaunchTask": "${workspaceFolder}/npm: compile"
15+
},
16+
{
17+
"name": "Extension Tests",
18+
"type": "extensionHost",
19+
"request": "launch",
20+
"args": [
21+
"--extensionDevelopmentPath=${workspaceFolder}",
22+
"--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
23+
],
24+
"outFiles": [
25+
"${workspaceFolder}/out/test/**/*.js"
26+
],
27+
"preLaunchTask": "${workspaceFolder}/npm: compile"
28+
}
29+
]
30+
}
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"version": "2.0.0",
3+
"tasks": [
4+
{
5+
"type": "npm",
6+
"script": "compile",
7+
"group": "build",
8+
"presentation": {
9+
"panel": "shared",
10+
"reveal": "silent"
11+
},
12+
"problemMatcher": "$tsc"
13+
},
14+
{
15+
"type": "npm",
16+
"script": "watch",
17+
"group": "build",
18+
"presentation": {
19+
"panel": "shared",
20+
"reveal": "silent"
21+
},
22+
"isBackground": true,
23+
"problemMatcher": "$tsc-watch"
24+
}
25+
]
26+
}

0 commit comments

Comments
 (0)