首先配置tasks.json文件定义构建任务,再通过快捷键Ctrl+Shift+B或命令面板运行;例如用npm run build或tsc编译,任务输出显示在终端面板,提升开发效率。

在 VSCode 中运行构建任务,需要先配置 tasks.json 文件,然后通过命令或快捷键触发任务。整个过程不复杂,关键是正确设置任务内容。
创建 tasks.json 配置文件
VSCode 使用 tasks.json 来定义可运行的构建任务。你需要把它放在项目的 .vscode 文件夹中。
操作步骤:- 打开你的项目根目录
- 按下 Ctrl + Shift + P 打开命令面板
- 输入并选择 Tasks: Configure Task
- 选择 Create tasks.json file from template,然后选一个合适的模板,比如 npm 或 Others
VSCode 会自动生成 .vscode/tasks.json 文件。
编写构建任务示例
假设你想运行一个简单的 npm 构建命令(如 npm run build),可以这样写:
tasks.json 示例内容:{
"version": "2.0.0",
"tasks": [
{
"label": "build",
"type": "shell",
"command": "npm",
"args": ["run", "build"],
"group": {
"kind": "build",
"isDefault": true
},
"problemMatcher": [],
"detail": "Runs npm run build"
}
]
}
其中 group.kind: "build" 表示这是一个构建任务,可使用默认构建快捷键触发。
运行构建任务
配置完成后,有几种方式可以运行任务:
千博企业网站管理系统主要面向大中型企业电子商务网站的构建与运营管理进行设计研发,拥有极为灵活的产品架构、极强的可扩展性与可伸缩性,可广泛适合于新闻资讯门户、企业内部知识门户、报社/杂志阅读、影音资讯、视频音频在线播放、法律顾问、政务公开、企业办公信息化等网络业务管理平台的建设,最大限度地满足客户现今乃至未来的应用需求。借助于千博企业网站管理系统极强的灵活性和便捷的可扩展性,企业级客户能够迅速流畅的
- 快捷键运行:按下 Ctrl + Shift + B,执行默认的构建任务
- 命令面板运行:按 Ctrl + Shift + P,输入 Tasks: Run Build Task
- 手动选择任务:输入 Tasks: Run Task,然后从列表中选择你要运行的任务
任务输出会显示在底部的集成终端面板中,方便查看结果和错误信息。
自定义其他构建命令
除了 npm,你也可以运行任意命令,比如编译 TypeScript、调用 Python 脚本等。
例如运行 tsc 编译:{
"label": "tsc compile",
"type": "shell",
"command": "tsc",
"args": ["-p", "."],
"group": "build"
}
只要确保相关工具已安装且在系统路径中可用即可。
基本上就这些。配置一次后,每次按 Ctrl + Shift + B 就能快速构建,效率提升明显。









