vscode 使用 task 同时执行多个 npm 脚本vscode 提供了复合执行多个 task 的功能。比如当你的项

并行执行多个 npm 脚本

假设项目的 package.json 存在如下 scripts：

"scripts": {
	"server": "cd D:/app/server && node app.js",
	"client1": "cd D:/app/client1 && yarn serve",
	"client2": "cd D:/app/client2 && yarn serve"
},

如果想要同时运行 server 和 client1 脚本，可以在脚本之间以 ; 分隔两个命令，即在命令行直接执行如下命令：

npm run server; npm run client1

但是这种方式没办法同时执行 npm run client1 和 npm run client2 （我在项目中需要在两个文件夹下分别启动 yarn serve，本质是使用 vue-cliservice serve 命令），此时可以考虑使用 vscode 提供的 task 功能。

vscode 并行执行多个 task

vscode 提供了复合执行多个 task 的功能。比如当你的项目中存在客户端和服务端两个文件夹，它们都需要运行各自的 build 脚本，那么可以创建一个新的 task 来并行启动这两个 build 脚本。

点击快捷键 ctrl+shift+p 输入 task 选择 Tasks: Configure Task=>Select a task to configure，然后选择需要配置的 npm 脚本，此时会在项目的根目录下创建 .vscode/tasks.json 文件，假如需要配置如下两个 task：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Client Build",
      "command": "gulp",
      "args": ["build"],
      "options": {
        "cwd": "${workspaceFolder}/client"
      }
    },
    {
      "label": "Server Build",
      "command": "gulp",
      "args": ["build"],
      "options": {
        "cwd": "${workspaceFolder}/server"
      }
    }
  ]
}

在 tasks.json 文件中新添加一个 task，并设置 dependsOn 属性，在其中填写需要并行启动的所有 task 即可。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Client Build",
      "command": "gulp",
      "args": ["build"],
      "options": {
        "cwd": "${workspaceFolder}/client"
      }
    },
    {
      "label": "Server Build",
      "command": "gulp",
      "args": ["build"],
      "options": {
        "cwd": "${workspaceFolder}/server"
      }
    },
    {
      "label": "Build",
      "dependsOn": ["Client Build", "Server Build"]
    }
  ]
}

如果你还指定了 "dependsOrder": "sequence"，那么你的 task 的依赖项将按照 dependsOn 中的顺序执行，需要指定 problem matcher 来追踪 task 是否完成。

{
  "label": "Build",
  "dependsOn": ["Client Build", "Server Build"],
  "dependsOrder": "sequence",
}

如果想要在每次使用 vscode 打开项目时就运行 task，可以添加 runOptions 属性：

"runOptions": {
	"runOn": "folderOpen"
}

如果有更好的方法欢迎评论区给出~

参考