如何编写VS Code Task启动dev server并打开Simple Browser访问指定URL

完整配置 #

在项目根目录的.vscode文件夹下新建tasks.json文件，粘贴以下内容，根据你的实际场景修改标注的自定义项即可：

{
  "version": "2.0.0",
  "tasks": [
    // 任务1：启动本地开发服务器
    {
      "label": "start-dev-server",
      "type": "shell",
      "command": "npm run dev", // 替换为你实际的dev server启动命令
      "isBackground": true,
      "problemMatcher": [],
      "presentation": {
        "reveal": "always"
      }
    },
    // 任务2：调用Simple Browser打开固定URL
    {
      "label": "open-simple-browser",
      "command": "${command:simpleBrowser.show}",
      "args": ["http://localhost:5173"], // 替换为你的固定访问URL
      "dependsOn": [
        // 可选配置：添加2秒延迟，等dev server启动完成再打开浏览器，按需调整时长
        {
          "label": "wait-server-start",
          "type": "shell",
          "command": "sleep 2", // Windows系统替换为 timeout /t 2 /nobreak >nul
          "presentation": {
            "reveal": "never"
          }
        }
      ]
    },
    // 复合任务：并行执行上述两个任务
    {
      "label": "启动开发服务并打开预览",
      "dependsOn": ["start-dev-server", "open-simple-browser"],
      "dependsOrder": "parallel",
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

使用方式 #

• 按下 Ctrl+Shift+P（Mac系统为 Cmd+Shift+P）唤起命令面板
• 输入 Tasks: Run Task，选择名为 启动开发服务并打开预览 的任务即可运行

注意事项 #

• 若不需要启动延迟，可以删掉open-simple-browser任务下的整个dependsOn配置项
• isBackground: true 配置会让dev server任务在后台持续运行，不会自动退出

内容的提问来源于stack exchange，提问作者Blaine