LoginSignup
4
5

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-12-30

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 の青丸を押した後、赤丸を押してリモートサーバーにアクセスする。

image.png

設定メニューを表示

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

image.png

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

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

image.png

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

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

settings.json の設定を反映

image.png

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

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

settings.json の保存先

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

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

設定後

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

image.png

4
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
5