Visual Studio Code の Remote SSH 経由でファイルを開いているときに Visual Studio Code の色を変える


Visual Studio Code の Remote SSH 経由でファイルを開いているときに Visual Studio Code の色を変える

Visual Studio Code の Remote SSH で Linux 上のファイルを直接編集する の記事で書いたように、SSH 経由でリモートサーバーにあるファイルを直接編集できます。この際、どの リモートサーバーか色で判別できると非常に便利です。Visual Studio Codeエディタの色をプロジェクトごとに違うものにする という記事を参考にして、リモートサーバー側の色を変えます。

事前準備

Visual Studio Code の Remote SSH で Linux 上のファイルを直接編集する の記事の通りにリモートサーバーにアクセスできるようにしておく。

設定

リモートサーバーに接続

左端の pane の青丸を押した後、赤丸を押してリモートサーバーにアクセスする。

設定メニューを表示

新しく開いたウィンドウで ファイルメニューからユーザー設定設定を選ぶ。

設定対象のリモートサーバーを選ぶ

リモート [SSH: 192.168.11.50] のシートを選ぶ。

色を設定するために settings.json を開く。

ワークベンチ外観 を選び、settings.json で編集を選ぶ。

settings.json の設定を反映

Visual Studio Codeエディタの色をプロジェクトごとに違うものにする という記事の、手順 に記載の設定をエディタ上に張り付ける。

設定ファイルを保存した瞬間に visual studio code の色が変わります。

settings.json の保存先

Visual studio code で開くファイル名は以下の形式になっている。
ユーザー名 の部分は SSH のログイン先のユーザー名です。

/home/ユーザー名/.vscode-server/data/Machine/settings.json

設定後

設定後は以下のような感じになります。