vscode-port-monitor-config

VS Code 端口监视器配置

配置 VS Code Port Monitor 扩展，以实时监视开发服务器端口，并在状态栏中显示可视化状态指示器。

扩展：dkurokawa.vscode-port-monitor

核心概念

端口监视器功能

• 🔍 实时监视 - 实时显示在状态栏中
• 🏷️ 智能配置 - 支持数组、范围和知名端口
• 🛑 进程管理 - 终止占用端口的进程
• 🎨 可自定义显示 - 图标、颜色、位置
• 📊 多个分组 - 按服务/项目整理端口

状态图标

• 🟢 = 端口正在使用（服务运行中）
• ⚪️ = 端口空闲（服务已停止）

---

配置工作流

步骤 1：创建配置文件

将配置添加到 .vscode/settings.json：

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

步骤 2：选择模板

从常见场景中选择（参见 examples/ 目录）：

场景	模板文件	端口
Vite 基础配置	vite-basic.json	5173（开发）
带预览的 Vite	vite-with-preview.json	5173（开发）、4173（预览）
全栈	fullstack.json	5173、4173、3200
Next.js	nextjs.json	3000（应用）、3001（API）
微服务	microservices.json	多个分组

步骤 3：应用配置

1. 将模板内容复制到 .vscode/settings.json
2. 根据项目自定义端口号和标签
3. 保存文件 - 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"
• 在表情符号后添加空格："🟢 "，以提高可读性
• 将相关端口分组：前端、后端、数据库
• 使用紧凑模式，让状态栏更简洁
• 设置合理的刷新间隔（3000-5000ms）

❌ 避免

• 颠倒端口和标签的格式："dev": 5173 ❌
• 使用空的分组名称
• 将刷新间隔设得过短（<1000ms）
• 监视过多端口（每组 >10 个）

---

常见问题

未显示 Port Monitor

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

配置错误

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

// ✅ Correct
{"5173": "dev"}

// ❌ Wrong
{"dev": 5173}

如需了解更多故障排除信息，请参见 references/troubleshooting.md

---

参考资料

• 配置选项：references/configuration-options.md - 详细的选项参考
• 故障排除：references/troubleshooting.md - 常见问题及解决方案
• 集成：references/integrations.md - 特定工具的配置
• 高级配置：references/advanced-config.md - 模式匹配、自定义表情符号
• 示例：examples/ - 可直接使用的 JSON 配置

---

工作流摘要

1. 根据所用技术栈，从 examples/ 目录中选择模板
2. 复制到 .vscode/settings.json
3. 自定义端口号和标签
4. 保存并确认状态栏显示正常
5. 如有需要，使用 references/troubleshooting.md 排查问题

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