如何编写VS Code Task运行NPM脚本？需配置task.json执行npm run dev

你可以根据需求选择以下两种方式添加任务，直接将对应代码片段插入现有tasks.json的tasks数组末尾即可：

方式一：npm类型任务（推荐，贴合VS Code npm任务规范） #

这种方式会直接调用npm的dev脚本，适合package.json在工作区根目录的场景：

{
  "type": "npm",
  "script": "dev",
  "problemMatcher": [],
  "label": "npm: dev",
  "detail": "执行npm run dev"
}

方式二：shell类型任务 #

如果需要自定义命令参数或更灵活的执行逻辑，可使用shell类型：

{
  "label": "npm run dev",
  "type": "shell",
  "command": "npm run dev",
  "presentation": {
    "reveal": "always"
  },
  "problemMatcher": []
}

修改后的完整tasks.json示例 #

以添加npm类型任务为例，最终文件内容如下：

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "type": "shell",
      "command": "msbuild",
      "args": [
        "/property:GenerateFullPaths=true",
        "/t:build",
        "/consoleloggerparameters:NoSummary"
      ],
      "group": "build",
      "presentation": {
        "reveal": "silent"
      },
      "problemMatcher": "$msCompile"
    },
    {
      "type": "npm",
      "script": "dev",
      "path": "client",
      "problemMatcher": [],
      "label": "npm: dev - client",
      "detail": "vite"
    },
    {
      "type": "npm",
      "script": "install",
      "path": "client",
      "group": "clean",
      "problemMatcher": [],
      "label": "npm: install - client",
      "detail": "install dependencies from package"
    },
    {
      "type": "npm",
      "script": "dev",
      "problemMatcher": [],
      "label": "npm: dev",
      "detail": "执行npm run dev"
    }
  ]
}

添加完成后，按下Ctrl+Shift+B（Windows/Linux）或Cmd+Shift+B（Mac）打开任务面板，就能找到新增的任务并执行。

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