vscode-port-monitor-config

用途

VS Code Port Monitor Configuration 技能用于配置 VS Code 的 Port Monitor 扩展（扩展标识：dkurokawa.vscode-port-monitor），在编辑器状态栏中实时监控开发服务器端口，并以可视化状态指示器展示端口占用情况。当用户需要设置端口监控、配置开发服务器端口显示时使用该技能。

主要能力

实时监控：在状态栏实时显示端口状态。
智能配置：支持数组、端口范围以及常见端口（well-known ports）。
进程管理：可终止占用端口的进程。
可自定义显示：支持图标、颜色与位置设置。
多分组：可按服务或项目对端口进行分组管理。

状态图标含义：

🟢 表示端口被占用（服务正在运行）。
⚪️ 表示端口空闲（服务已停止）。

使用方式

第一步：创建配置文件

在 .vscode/settings.json 中添加配置：

{
  "portMonitor.hosts": {
    "GroupName": {
      "port": "label",
      "__CONFIG": { }
    }
  }
}

第二步：选择模板

可从常见场景模板中选择（见 examples/ 目录）：

场景	模板文件	端口
Vite 基础	vite-basic.json	5173 (dev)
Vite 含预览	vite-with-preview.json	5173 (dev), 4173 (preview)
全栈	fullstack.json	5173, 4173, 3200
Next.js	nextjs.json	3000 (app), 3001 (api)
微服务	microservices.json	多个分组

第三步：应用配置

将模板内容复制到 .vscode/settings.json。
根据项目自定义端口号与标签。
保存文件，Port Monitor 会自动重载。

快速开始示例

示例 1：Vite 项目

{
  "portMonitor.hosts": {
    "Development": {
      "5173": "dev",
      "__CONFIG": {
        "compact": true,
        "bgcolor": "blue",
        "show_title": true
      }
    }
  },
  "portMonitor.statusIcons": {
    "inUse": "🟢 ",
    "free": "⚪️ "
  }
}

显示效果：Development: [🟢 dev:5173]

示例 2：微服务

{
  "portMonitor.hosts": {
    "Frontend": {
      "3000": "react",
      "__CONFIG": { "compact": true, "bgcolor": "blue", "show_title": true }
    },
    "Backend": {
      "3001": "api",
      "5432": "postgres",
      "__CONFIG": { "compact": true, "bgcolor": "yellow", "show_title": true }
    }
  }
}

显示效果：Frontend: [🟢 react:3000] Backend: [🟢 api:3001 | 🟢 postgres:5432]

最佳实践

建议做法：

使用描述性标签，例如 "5173": "dev"，而不是 "5173": "5173"。
在 emoji 后加空格，例如 "🟢 "，提升可读性。
对相关端口分组：Frontend、Backend、Database。
使用 compact 模式让状态栏更简洁。
设置合理的刷新间隔（3000-5000ms）。

不建议做法：

颠倒端口-标签格式，例如 "dev": 5173。
使用空的分组名称。
刷新间隔设置过低（小于 1000ms）。
监控过多端口（每组超过 10 个）。

常见问题

Port Monitor 不显示：

检查扩展是否已安装：code --list-extensions | grep port-monitor
验证 .vscode/settings.json 语法。
重载 VS Code：Cmd+Shift+P → "Reload Window"。

配置错误：

检查端口-标签格式是否正确：

// ✅ 正确
{"5173": "dev"}

// ❌ 错误
{"dev": 5173}

更多故障排查见 references/troubleshooting.md。

参考资料

配置选项：references/configuration-options.md，详细选项参考。
故障排查：references/troubleshooting.md，常见问题与解决方案。
集成：references/integrations.md，针对具体工具的配置。
高级配置：references/advanced-config.md，模式匹配、自定义 emoji。
示例：examples/，可直接使用的 JSON 配置。

工作流程小结

根据技术栈从 examples/ 目录选择模板。
复制到 .vscode/settings.json。
自定义端口号与标签。
保存并验证状态栏显示。
如有需要，使用 references/troubleshooting.md 排查问题。

Port Monitor 会自动检测正在运行的服务，并实时更新状态栏。

适用场景与限制

适用场景：本地开发时需要在 VS Code 状态栏快速查看开发服务器端口运行状态，尤其是 Vite、Next.js、全栈与微服务等多端口项目。

限制：该技能仅涉及 VS Code Port Monitor 扩展的配置，不涉及其他编辑器或平台；具体收费、价格等信息暂未提供。