VSCodeでEC2の接続先に応じて色を変える設定

はじめに

VSCodeからSSHでEC2に接続するとき、「開発用EC2に接続しているつもりが本番EC2に接続していた」という事故を防ぎたいときがあります。
そんなとき、接続先によってVSCodeのUIカラーを変えると、一目でどの環境にいるか分かるのでおすすめです。

⚠️ 本記事では、VSCodeからSSHでEC2に接続できていることを前提としています。
接続方法がまだの方は、こちらの記事を参考にしてください：
Visual Studio CodeのRemote-SSH設定方法

---

設定手順

1. VSCodeを開く
2. 左下の歯車マークから 設定 を選択
3. タブから リモート [SSH: XXX] を選択
4. ワークベンチ → Color Customizations → settings.jsonで編集 を開く
   
5. デフォルトでは以下のようになっています：

   {
       "workbench.colorCustomizations": {}
   }
   

6. ここに接続先ごとの色設定を追加します

色の設定例

本番環境を赤色にする例

{
    "workbench.colorCustomizations": {
        "activityBar.activeBackground": "#ff6433",
        "activityBar.background": "#ff6433",
        "activityBar.foreground": "#15202b",
        "activityBar.inactiveForeground": "#15202b99",
        "activityBarBadge.background": "#00ff3d",
        "activityBarBadge.foreground": "#15202b",
        "commandCenter.border": "#e7e7e799",
        "sash.hoverBorder": "#ff6433",
        "statusBar.background": "#ff3d00",
        "statusBar.foreground": "#e7e7e7",
        "statusBarItem.hoverBackground": "#ff6433",
        "statusBarItem.remoteBackground": "#ff3d00",
        "statusBarItem.remoteForeground": "#e7e7e7",
        "titleBar.activeBackground": "#ff3d00",
        "titleBar.activeForeground": "#e7e7e7",
        "titleBar.inactiveBackground": "#ff3d0099",
        "titleBar.inactiveForeground": "#e7e7e799"
    }
}

この設定を入れると赤色になり、本番接続時でも視覚的にすぐ分かります。

他の色に変える例（青色）

{
    "workbench.colorCustomizations": {
        "activityBar.activeBackground": "#3399ff",
        "activityBar.background": "#3399ff",
        "activityBar.foreground": "#ffffff",
        "activityBar.inactiveForeground": "#ffffff99",
        "activityBarBadge.background": "#00ccff",
        "activityBarBadge.foreground": "#15202b",
        "commandCenter.border": "#e7e7e799",
        "sash.hoverBorder": "#3399ff",
        "statusBar.background": "#0066cc",
        "statusBar.foreground": "#e7e7e7",
        "statusBarItem.hoverBackground": "#3399ff",
        "statusBarItem.remoteBackground": "#0066cc",
        "statusBarItem.remoteForeground": "#e7e7e7",
        "titleBar.activeBackground": "#0066cc",
        "titleBar.activeForeground": "#e7e7e7",
        "titleBar.inactiveBackground": "#0066cc99",
        "titleBar.inactiveForeground": "#e7e7e799"
    }
}

ワンポイント

色のカスタマイズは、生成AIやカラーパレットツールを使うとおすすめの配色を簡単に生成できます。
開発・ステージング・本番で色を分けるだけでも、接続ミスを大幅に減らせます。