6.9 KiB
6.9 KiB
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: 创建扩展目录
mkdir flutter-runner
- Step 2: 创建 package.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 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
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
# 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
使用
- 点击侧边栏 Flutter Runner 图标
- 点击对应按钮执行命令
---
### Task 4: 打包和安装扩展
**Files:**
- Modify: `flutter-runner/`
- [ ] **Step 1: 安装 vsce 工具**
```bash
npm install -g @vscode/vsce
- Step 2: 打包扩展
cd flutter-runner && vsce package
- Step 3: 安装扩展
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 按钮弹出平台选择
- 选择平台后执行对应构建命令