如何为VS Code各调试配置自定义integratedTerminal的图标颜色与名称

核心实现逻辑 #

要实现每个调试配置对应独立可区分的集成终端，只需要在工作区的.vscode/launch.json文件中，为每个启动配置添加终端专属配置字段即可，无需额外安装插件。

完整配置示例 #

{
  "version": "0.2.0",
  "configurations": [
    // 启动Django应用
    {
      "name": "启动Django应用",
      "type": "python",
      "request": "launch",
      "program": "${workspaceFolder}/backend/manage.py",
      "args": ["runserver", "8000"],
      "console": "integratedTerminal",
      "presentation": {
        "group": "后端服务",
        "order": 1
      },
      "terminalOptions": {
        "name": "Django服务",
        "color": "green",
        "icon": "server"
      }
    },
    // 启动Celery Worker
    {
      "name": "启动Celery Worker",
      "type": "python",
      "request": "launch",
      "program": "${workspaceFolder}/backend/manage.py",
      "args": ["celery", "-A", "替换为你的Django项目名", "worker", "--loglevel=info"],
      "console": "integratedTerminal",
      "presentation": {
        "group": "后端服务",
        "order": 2
      },
      "terminalOptions": {
        "name": "Celery Worker",
        "color": "yellow",
        "icon": "flame"
      }
    },
    // 启动Celery Beat
    {
      "name": "启动Celery Beat",
      "type": "python",
      "request": "launch",
      "program": "${workspaceFolder}/backend/manage.py",
      "args": ["celery", "-A", "替换为你的Django项目名", "beat", "--loglevel=info"],
      "console": "integratedTerminal",
      "presentation": {
        "group": "后端服务",
        "order": 3
      },
      "terminalOptions": {
        "name": "Celery Beat",
        "color": "orange",
        "icon": "watch"
      }
    },
    // 启动Node React
    {
      "name": "启动Node React",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "start"],
      "cwd": "${workspaceFolder}/frontend",
      "console": "integratedTerminal",
      "presentation": {
        "group": "前端服务",
        "order": 1
      },
      "terminalOptions": {
        "name": "React前端",
        "color": "blue",
        "icon": "browser"
      }
    }
  ],
  // 复合启动配置：一键启动所有服务
  "compounds": [
    {
      "name": "全栈服务一键启动",
      "configurations": ["启动Django应用", "启动Celery Worker", "启动Celery Beat", "启动Node React"],
      "stopAll": true
    }
  ]
}

配置字段说明 #

• console：固定设置为integratedTerminal，指定调试输出到VS Code内置集成终端
• presentation：控制调试配置在启动面板的展示规则
  • group：可将同类型配置分组，比如分为后端服务、前端服务，方便分类管理
  • order：同组内配置的排序序号
• terminalOptions：自定义集成终端的展示属性，是区分不同终端的核心配置
  • name：终端标签显示的名称，直接对应服务类型即可
  • color：终端标签的标识色，可选值包括red、green、yellow、blue、magenta、cyan等
  • icon：终端标签前的图标，VS Code内置大量适配图标，后端服务可选server、python，Celery类任务可选flame、worker，前端可选browser、react等

使用说明 #

配置保存后，在VS Code调试启动面板选择对应配置启动即可，每个服务都会生成独立的专属终端，通过名称、颜色、图标可以快速区分，复合启动配置可以一键拉起所有需要的服务。

内容的提问来源于stack exchange，提问作者Alex Pokydko