vscode-port-monitor-config

VS Code Port Monitor の設定

VS Code Port Monitor 拡張機能を設定して、開発サーバーのポートをリアルタイムで監視し、ステータスバーに視覚的な状態インジケーターを表示します。

拡張機能: dkurokawa.vscode-port-monitor

基本概念

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）
• 監視するポート数を増やしすぎないでください（1 グループあたり >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 は実行中のサービスを自動的に検出し、ステータスバーをリアルタイムで更新します。