VS Code Tasks 怎样保存可复用的构建命令

把可复用的构建命令保存到项目的 .vscode/tasks.json，为任务设置清晰名称、命令参数和工作目录，之后就能从 VS Code 的任务菜单重复调用。若将它设为默认 build 任务，还可以直接使用“运行生成任务”入口。

官方地址：https://code.visualstudio.com/

Tasks 官方说明：https://code.visualstudio.com/docs/debugtest/tasks。下面的图均为原创界面说明图，帮助辨认入口与配置，不是软件截图或本机执行记录。

使用场景与操作前提

假设你正在维护一个名为 catalog-web 的项目，团队已有可用的 npm run build，但每次都要重新输入命令，有人还会在错误目录执行。本文只把已有命令保存为一个稳定入口，不替项目新增构建脚本，也不自动安装 Node.js 或依赖。

先用“文件（File）→ 打开文件夹（Open Folder）”打开含 package.json 的项目根目录。左侧资源管理器应出现项目文件树，而不是只有一个临时打开的文件。本文使用桌面版 VS Code；界面语言不同可对照括号中的英文。配置中的 2.0.0 是任务文件格式版本，不是 VS Code 版本号。

步骤一：进入任务配置并建立文件

打开“终端（Terminal）→ 配置任务（Configure Tasks）”。没有任务文件时，按提示选择“使用模板创建 tasks.json 文件（Create tasks.json file from template）”，再选“其他（Others）”。如果已存在 tasks.json，通常直接打开现有文件；保留原来的任务，在 tasks 数组中追加本任务，不要为了套用示例删除团队配置。

继续前确认编辑器已经打开 .vscode/tasks.json。这里保存的是当前文件夹配置；若打开的是用户级任务文件，请回到项目文件树选择正确位置。多根工作区还要确认目标文件夹，本文示例以单文件夹为准。

步骤二：保存命令、参数和工作目录

在“资源管理器 → .vscode → tasks.json”中编辑任务。下面是完整 JSONC 示例，允许使用中文注释。新文件可使用整段；已有文件只合并 tasks 中的对象，并保持 label 不重复。

{
  "version": "2.0.0",
  "tasks": [
    {
      // 菜单通过这个名称识别项目构建入口
      "label": "catalog-web: build",
      "type": "shell",
      "command": "npm",
      "args": ["run", "build"],
      "options": {
        // 固定到项目根目录，避免受当前编辑文件位置影响
        "cwd": "${workspaceFolder}"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      },
      // 展示构建日志，同一任务复用专属面板
      "presentation": {
        "reveal": "always",
        "panel": "dedicated"
      },
      // 示例不假定某个构建工具的诊断输出格式
      "problemMatcher": []
    }
  ]
}

通过“文件 → 保存（Save）”保存后，标签页不再显示未保存标记。label 用于选择任务；command 和 args 保存实际调用；cwd 用工作区变量避免把某个人电脑上的绝对路径写进配置。若 package.json 在子目录，应把 cwd 改为相应子目录，而不是期待 VS Code 自动猜测。

problemMatcher 为空不意味着忽略命令失败，只表示不按预设模式把日志解析到 Problems 面板。构建是否成功仍应看命令退出状态和项目产物。

步骤三：从构建入口重复运行

选择“终端 → 运行生成任务（Run Build Task）”。本例设置了默认 build 任务，入口可以直接调用它；没有默认项时，在列表中选择 catalog-web: build。也可从命令面板执行 Tasks: Run Task，在任务列表里选择相同名称。

确认任务面板显示正在调用预期的构建命令，再等待进程结束。退出状态正常只是第一项依据，还应核对项目约定的输出目录、产物更新时间或构建日志中的目标信息。不同项目可能输出到不同位置，本文不假定一定存在 dist，也不把“终端出现了”当作成功。

下一次仍从相同菜单运行，无须重新输入命令。Windows/Linux 的默认构建快捷键通常为 Ctrl+Shift+B，macOS 为 Shift+Command+B；改过快捷键时以菜单和键盘快捷方式设置为准。保存任务并不会自动让它在每次保存文件时执行，本例也没有启用打开文件夹后自动运行。

常见问题与最终确认

把文件提交到仓库就能在所有电脑运行吗？

它可以共享入口定义，但工具版本、依赖和系统 shell 仍由环境决定。确认仓库允许跟踪 .vscode/tasks.json，且不在文件中保存密码、令牌或个人专属目录。构建命令本身也应来自可信项目。

为什么在远程窗口找不到本机安装的工具？

任务使用相应工作区运行环境。远程开发时应检查远端环境，而不是只看本机是否安装过同名工具。

能用它代替持续集成吗？

Tasks 解决编辑器中的重复调用。团队仍应维护独立可运行的构建脚本，让命令行与持续集成使用同一套构建逻辑。

最终确认三件事即可：配置位于正确项目目录，菜单能够选到明确命名的任务，任务结束后真实产物符合项目约定。做到这些，再把配置交给团队复用。