# 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 按钮弹出平台选择
- [ ] 选择平台后执行对应构建命令