修复 断点异常
This commit is contained in:
Developer
309
docs/superpowers/plans/2026-04-15-flutter-runner-extension.md
Normal file
309
docs/superpowers/plans/2026-04-15-flutter-runner-extension.md
Normal file
@@ -0,0 +1,309 @@
|
||||
# Flutter Runner VS Code 扩展实现计划
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** 创建一个 VS Code 扩展，在侧边栏提供 Flutter 命令快捷按钮面板。
|
||||
|
||||
**Architecture:** 使用 VS Code Extension API，通过 TreeView 提供按钮列表，点击按钮在集成终端执行对应 Flutter 命令。
|
||||
|
||||
**Tech Stack:** JavaScript, VS Code Extension API
|
||||
|
||||
---
|
||||
|
||||
## 文件结构
|
||||
|
||||
```
|
||||
flutter-runner/
|
||||
├── package.json # 扩展清单，定义命令、视图、激活事件
|
||||
├── extension.js # 主入口，实现命令逻辑和视图提供者
|
||||
└── README.md # 使用说明
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 1: 创建扩展目录和 package.json
|
||||
|
||||
**Files:**
|
||||
- Create: `flutter-runner/package.json`
|
||||
|
||||
- [ ] **Step 1: 创建扩展目录**
|
||||
|
||||
```bash
|
||||
mkdir flutter-runner
|
||||
```
|
||||
|
||||
- [ ] **Step 2: 创建 package.json**
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "flutter-runner",
|
||||
"displayName": "Flutter Runner",
|
||||
"description": "Flutter 命令快捷按钮面板",
|
||||
"version": "1.0.0",
|
||||
"publisher": "mom-kitchen",
|
||||
"engines": {
|
||||
"vscode": "^1.74.0"
|
||||
},
|
||||
"categories": ["Other"],
|
||||
"activationEvents": ["onView:flutterRunner"],
|
||||
"main": "./extension.js",
|
||||
"contributes": {
|
||||
"viewsContainers": {
|
||||
"activitybar": [
|
||||
{
|
||||
"id": "flutter-runner",
|
||||
"title": "Flutter Runner",
|
||||
"icon": "resources/icon.svg"
|
||||
}
|
||||
]
|
||||
},
|
||||
"views": {
|
||||
"flutter-runner": [
|
||||
{
|
||||
"id": "flutterRunner",
|
||||
"name": "Commands"
|
||||
}
|
||||
]
|
||||
},
|
||||
"commands": [
|
||||
{
|
||||
"command": "flutterRunner.run",
|
||||
"title": "Run",
|
||||
"icon": "$(play)"
|
||||
},
|
||||
{
|
||||
"command": "flutterRunner.clean",
|
||||
"title": "Clean",
|
||||
"icon": "$(trash)"
|
||||
},
|
||||
{
|
||||
"command": "flutterRunner.pubGet",
|
||||
"title": "Pub Get",
|
||||
"icon": "$(package)"
|
||||
},
|
||||
{
|
||||
"command": "flutterRunner.build",
|
||||
"title": "Build",
|
||||
"icon": "$(gear)"
|
||||
}
|
||||
],
|
||||
"menus": {
|
||||
"view/title": [
|
||||
{
|
||||
"command": "flutterRunner.run",
|
||||
"when": "view == flutterRunner",
|
||||
"group": "navigation@1"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 3: 创建图标文件**
|
||||
|
||||
创建 `flutter-runner/resources/icon.svg`:
|
||||
|
||||
```svg
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#007AFF" stroke-width="2">
|
||||
<polygon points="5 3 19 12 5 21 5 3"/>
|
||||
</svg>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 2: 创建 extension.js 主入口
|
||||
|
||||
**Files:**
|
||||
- Create: `flutter-runner/extension.js`
|
||||
|
||||
- [ ] **Step 1: 创建 extension.js**
|
||||
|
||||
```javascript
|
||||
const vscode = require('vscode');
|
||||
|
||||
let flutterTerminal = null;
|
||||
|
||||
function getTerminal() {
|
||||
if (!flutterTerminal || flutterTerminal.exitStatus !== undefined) {
|
||||
flutterTerminal = vscode.window.createTerminal('Flutter');
|
||||
}
|
||||
return flutterTerminal;
|
||||
}
|
||||
|
||||
function runCommand(cmd) {
|
||||
const terminal = getTerminal();
|
||||
terminal.show();
|
||||
terminal.sendText(cmd);
|
||||
}
|
||||
|
||||
async function selectBuildPlatform() {
|
||||
const platforms = [
|
||||
{ label: '$(device-mobile) APK (Android)', value: 'apk' },
|
||||
{ label: '$(apple) IPA (iOS)', value: 'ios' },
|
||||
{ label: '$(globe) Web', value: 'web' },
|
||||
{ label: '$(window) Windows', value: 'windows' },
|
||||
{ label: '$(vm) macOS', value: 'macos' },
|
||||
{ label: '$(terminal) Linux', value: 'linux' }
|
||||
];
|
||||
|
||||
const selected = await vscode.window.showQuickPick(platforms, {
|
||||
placeHolder: '选择构建平台'
|
||||
});
|
||||
|
||||
return selected ? selected.value : null;
|
||||
}
|
||||
|
||||
function activate(context) {
|
||||
const provider = new FlutterRunnerProvider();
|
||||
|
||||
context.subscriptions.push(
|
||||
vscode.window.registerTreeDataProvider('flutterRunner', provider)
|
||||
);
|
||||
|
||||
context.subscriptions.push(
|
||||
vscode.commands.registerCommand('flutterRunner.run', () => {
|
||||
runCommand('flutter run');
|
||||
})
|
||||
);
|
||||
|
||||
context.subscriptions.push(
|
||||
vscode.commands.registerCommand('flutterRunner.clean', () => {
|
||||
runCommand('flutter clean');
|
||||
})
|
||||
);
|
||||
|
||||
context.subscriptions.push(
|
||||
vscode.commands.registerCommand('flutterRunner.pubGet', () => {
|
||||
runCommand('flutter pub get');
|
||||
})
|
||||
);
|
||||
|
||||
context.subscriptions.push(
|
||||
vscode.commands.registerCommand('flutterRunner.build', async () => {
|
||||
const platform = await selectBuildPlatform();
|
||||
if (platform) {
|
||||
runCommand(`flutter build ${platform}`);
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
context.subscriptions.push(
|
||||
vscode.commands.registerCommand('flutterRunner.refresh', () => {
|
||||
provider.refresh();
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
class FlutterRunnerProvider {
|
||||
constructor() {
|
||||
this._onDidChangeTreeData = new vscode.EventEmitter();
|
||||
this.onDidChangeTreeData = this._onDidChangeTreeData.event;
|
||||
}
|
||||
|
||||
refresh() {
|
||||
this._onDidChangeTreeData.fire();
|
||||
}
|
||||
|
||||
getTreeItem(element) {
|
||||
return element;
|
||||
}
|
||||
|
||||
getChildren(element) {
|
||||
if (!element) {
|
||||
return [
|
||||
this.createButtonItem('▶️ Run', 'flutterRunner.run', '运行项目'),
|
||||
this.createButtonItem('🧹 Clean', 'flutterRunner.clean', '清理构建缓存'),
|
||||
this.createButtonItem('📦 Pub Get', 'flutterRunner.pubGet', '获取依赖'),
|
||||
this.createButtonItem('🔨 Build', 'flutterRunner.build', '构建发布包')
|
||||
];
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
createButtonItem(label, command, tooltip) {
|
||||
const item = new vscode.TreeItem(label, vscode.TreeItemCollapsibleState.None);
|
||||
item.command = { command, title: label };
|
||||
item.tooltip = tooltip;
|
||||
return item;
|
||||
}
|
||||
}
|
||||
|
||||
function deactivate() {}
|
||||
|
||||
module.exports = { activate, deactivate };
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 3: 创建 README.md
|
||||
|
||||
**Files:**
|
||||
- Create: `flutter-runner/README.md`
|
||||
|
||||
- [ ] **Step 1: 创建 README.md**
|
||||
|
||||
```markdown
|
||||
# Flutter Runner
|
||||
|
||||
Flutter 命令快捷按钮面板，在 VS Code 侧边栏提供一键执行 Flutter 命令的功能。
|
||||
|
||||
## 功能
|
||||
|
||||
- ▶️ **Run** - 运行 `flutter run`
|
||||
- 🧹 **Clean** - 运行 `flutter clean`
|
||||
- 📦 **Pub Get** - 运行 `flutter pub get`
|
||||
- 🔨 **Build** - 构建 APK/IPA/Web/Windows/macOS/Linux
|
||||
|
||||
## 安装
|
||||
|
||||
1. 复制 `flutter-runner` 文件夹到 VS Code 扩展目录
|
||||
2. 重启 VS Code
|
||||
|
||||
或使用命令行安装：
|
||||
```bash
|
||||
code --install-extension flutter-runner
|
||||
```
|
||||
|
||||
## 使用
|
||||
|
||||
1. 点击侧边栏 Flutter Runner 图标
|
||||
2. 点击对应按钮执行命令
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 4: 打包和安装扩展
|
||||
|
||||
**Files:**
|
||||
- Modify: `flutter-runner/`
|
||||
|
||||
- [ ] **Step 1: 安装 vsce 工具**
|
||||
|
||||
```bash
|
||||
npm install -g @vscode/vsce
|
||||
```
|
||||
|
||||
- [ ] **Step 2: 打包扩展**
|
||||
|
||||
```bash
|
||||
cd flutter-runner && vsce package
|
||||
```
|
||||
|
||||
- [ ] **Step 3: 安装扩展**
|
||||
|
||||
```bash
|
||||
code --install-extension flutter-runner-1.0.0.vsix
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 验证清单
|
||||
|
||||
- [ ] 扩展在 VS Code 中正确加载
|
||||
- [ ] 侧边栏显示 Flutter Runner 图标
|
||||
- [ ] 点击 Run 按钮执行 `flutter run`
|
||||
- [ ] 点击 Clean 按钮执行 `flutter clean`
|
||||
- [ ] 点击 Pub Get 按钮执行 `flutter pub get`
|
||||
- [ ] 点击 Build 按钮弹出平台选择
|
||||
- [ ] 选择平台后执行对应构建命令
|
||||
@@ -0,0 +1,68 @@
|
||||
# Flutter Runner VS Code 扩展设计
|
||||
|
||||
## 概述
|
||||
|
||||
创建一个轻量级 VS Code 扩展，在侧边栏提供 Flutter 命令快捷按钮面板。
|
||||
|
||||
## 功能需求
|
||||
|
||||
### 按钮列表
|
||||
|
||||
| 按钮 | 命令 | 说明 |
|
||||
|------|------|------|
|
||||
| ▶️ Run | `flutter run` | 运行项目 |
|
||||
| 🧹 Clean | `flutter clean` | 清理构建缓存 |
|
||||
| 📦 Pub Get | `flutter pub get` | 获取依赖 |
|
||||
| 🔨 Build | `flutter build <platform>` | 构建发布包 |
|
||||
|
||||
### Build 平台选择
|
||||
|
||||
点击 Build 按钮后，弹出快速选择：
|
||||
- APK (Android)
|
||||
- IPA (iOS)
|
||||
- Web
|
||||
- Windows
|
||||
- macOS
|
||||
- Linux
|
||||
|
||||
## 技术设计
|
||||
|
||||
### 文件结构
|
||||
|
||||
```
|
||||
flutter-runner/
|
||||
├── package.json # 扩展清单
|
||||
├── extension.js # 主逻辑
|
||||
└── README.md # 使用说明
|
||||
```
|
||||
|
||||
### 核心实现
|
||||
|
||||
1. **命令注册**：使用 `vscode.commands.registerCommand()`
|
||||
2. **终端管理**：使用 `vscode.window.createTerminal()` 创建/复用终端
|
||||
3. **视图提供者**：使用 TreeView 提供按钮列表
|
||||
4. **平台选择**：使用 `vscode.window.showQuickPick()` 弹出选择
|
||||
|
||||
### 命令执行逻辑
|
||||
|
||||
```javascript
|
||||
function runCommand(cmd) {
|
||||
const terminal = vscode.window.activeTerminal ||
|
||||
vscode.window.createTerminal('Flutter');
|
||||
terminal.show();
|
||||
terminal.sendText(cmd);
|
||||
}
|
||||
```
|
||||
|
||||
## 界面设计
|
||||
|
||||
- 侧边栏视图名称：Flutter Runner
|
||||
- 按钮样式：图标 + 文字，垂直排列
|
||||
- 点击反馈：按钮高亮，终端自动弹出
|
||||
|
||||
## 成功标准
|
||||
|
||||
1. 扩展可正常安装和激活
|
||||
2. 侧边栏显示 Flutter Runner 面板
|
||||
3. 点击按钮在终端执行对应命令
|
||||
4. Build 按钮支持平台选择
|
||||
Reference in New Issue
Block a user