在vscode/cursor中使用tasks自动执行npm

背景

在前端多包项目开发中，每次打开项目都需要手动启动多个服务是一件繁琐的事情。通过VSCode的tasks任务系统，我们可以实现打开项目文件夹时自动执行多个npm命令，提高开发效率和流畅度。

功能实现

1、在项目根目录创建.vscode/tasks.json文件(官方文档)，然后根据自身项目实际情况配置任务，配置完重启即可。本示例项目采用的是lerna架构存在多个分包，我希望一打开项目就跑多个项目的环境，因此需要按顺序执行多个子任务，具体的配置如下：

{
  "version": "2.0.0",
    "tasks": [
    {
      "label": "Open Bash Terminal",
      "type": "shell",
      "command": "echo '打开Bash终端，可以输入命令' && bash",
      "options": {
        "cwd": "${workspaceFolder}",
        "shell": {
          "executable": "C:\Program Files\Git\bin\bash.exe", //我希望用bash打开，所以要指定bash的安装目录
          "args": ["-c"]
        }
      },
      "presentation": {
        "reveal": "always",
        "panel": "shared",
        "group": "devServer"
      },
      "isBackground": true,
      "problemMatcher": []
    },
    {
      "label": "Run broadband-flow debug",
      "type": "shell",
      "command": "npm run debug",
      "options": {
        "cwd": "${workspaceFolder}/packages/broadband-flow",
        "shell": {
          "executable": "C:\Program Files\Git\bin\bash.exe",
          "args": ["-c"]
        }
      },
      "presentation": {
        "reveal": "always",
        "panel": "shared",
        "group": "devServer"
      },
      "isBackground": true,
      "problemMatcher": []
    },
    {
      "label": "Run business debug",
      "type": "shell",
      "command": "sleep 2 &&  npm run debug",
      "options": {
        "cwd": "${workspaceFolder}/packages/business",
        "shell": {
          "executable": "C:\Program Files\Git\bin\bash.exe",
          "args": ["-c"]
        }
      },
      "presentation": {
        "reveal": "always",
        "panel": "shared",
        "group": "devServer"
      },
      "isBackground": true,
      "problemMatcher": []
    },
    {
      "label": "Run group-customer debug",
      "type": "shell",
      "command": "sleep 4 && npm run debug",
      "options": {
        "cwd": "${workspaceFolder}/packages/group-customer",
        "shell": {
          "executable": "C:\Program Files\Git\bin\bash.exe",
          "args": ["-c"]
        }
      },
      "presentation": {
        "reveal": "always",
        "panel": "shared",
        "group": "devServer"
      },
      "isBackground": true,
      "problemMatcher": []
    },
    {
      "label": "Run mtapp-cli proxy",
      "type": "shell",
      "command": "mtapp-cli proxy",
      "options": {
        "cwd": "${workspaceFolder}",
        "shell": {
          "executable": "C:\Program Files\Git\bin\bash.exe",
          "args": ["-c"]
        }
      },
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "isBackground": true,
      "problemMatcher": []
    },
    {
      "label": "Run All Packages",
      "dependsOn": [
        "Run mtapp-cli proxy",
        "Open Bash Terminal",
        "Run broadband-flow debug",
        "Run business debug",
        "Run group-customer debug"
      ],
      "dependsOrder": "parallel",
      "runOptions": {
        "runOn": "folderOpen"
      } // 打开文件夹时自动运行
    }
  ]
}

效果如下

2、如果你不想要一打开项目就立即执行任务，你还可以通过设置快捷键来执行。点击 文件 -> 首选项 -> 键盘快捷键下右上角的（打开键盘快捷键json文件）的按钮，将以下代码添加进json文件保存重启编辑器即可，快捷键可以设置自己熟悉的。

{
  "key": "alt+numpad1",
    "command": "workbench.action.tasks.runTask",
    "args": { "task": "Run All Packages" }
},
{
  "key": "alt+numpad2",
    "command": "workbench.action.tasks.runTask",
    "args": { "task": "Run broadband-flow debug" }
},
{
  "key": "alt+numpad3",
    "command": "workbench.action.tasks.runTask",
    "args": { "task": "Run business debug" }
},
{
  "key": "alt+numpad4",
    "command": "workbench.action.tasks.runTask",
    "args": { "task": "Run group-customer debug" }
},
{
  "key": "alt+numpad5",
    "command": "workbench.action.tasks.runTask",
    "args": { "task": "Run mtapp-cli proxy" }
},
{
  "key": "alt+numpad6",
    "command": "workbench.action.tasks.runTask",
    "args": { "task": "Open Bash Terminal" }
}

结语

tasks可以自动化地执行各种脚本，是个不错的功能，各位小伙伴可以用起来~