ITエンジニアの種籾(たねもみ)

IT技術とか株式投資とか。

VSCodeでワークスペースごとにテーマを変える

2020年 08月 11日

目次

VSCode を使っていると、私はウィンドウを複数立ち上げたくなります。

現在は

  • ブログ執筆用の Markdon、Gatsby メンテ用のワークスペース
  • 財務分析のためのデータ抽出用の Python のワークスペース

の2つを立ち上げています。

私は基本黒系が好きなので、「Dark+」を使ってますが、2つのワークスペースで同じ黒系だと、ウィンドウを切り替えたときに「どっちだっけ?」となりやすく困っていました。

そこで、ワークスペースごとにテーマを切り替える方法を調べたので紹介します。

ワークスペースを使おう

VSCode を使い始めると、ワークスペースを知らずにフォルダ単位で作業してしまいます。

ワークスペースとは、複数フォルダを同時にメンテ・管理していくための機能です。 複数フォルダは、違う場所にあるものを集めてきてもいいです。 また、それらのフォルダに適用する設定も、ワークスペースの設定ファイルに記述できます。

フォルダを開いた状態で、VSCode に別のフォルダをドラッグ・アンド・ドロップすればワークスペースが出来上がります。 あとはワークスペースを保存すれば、次回そのワークスペースの設定を開くことで、同じ状態(複数フォルダ、設定)から作業を始めれます。

ワークスペースの設定の保存先は自由です。 私は「~/workspace/xxx.code-workspace」に保存していいってます。

1つのフォルダを含めただけのワークスペースの設定は以下のようになっています。

[~/workspace] $ cat blog.code-workspace
{
  "folders": [
    {
      "path": "crz33-contents"
    }
  ],
  "settings": {}
}

ここに、ワークスペースごとにテーマを設定していきます。

ワークスペースに別のテーマを設定する

ワークペースを開いた状態で、「Ctrl+P」で「ワークスペース設定を開く」を選びます。 下記のような設定ページが開くので、そこで、テーマ(Color Theme)を変えます。

テーマ設定

これだけです。

ワークスペースの設定ファイルを見ると、正しく反映されています。

[~/workspace] $ cat blog.code-workspace
{
  "folders": [
    {
      "path": "crz33-contents"
    }
  ],
  "settings": {
    "workbench.colorTheme": "Solarized Light"
  }
}

ウィンドウ切り替えが便利になった

私は Mac で HyperSwtich というアプリでウィンドウ切り替えしています。

テーマをワークスペースごとに変えたたので、ウィンドウ切替時に迷わなくなりました。 以下のように同じ VSCode のウィンドウが2つありますが、テーマでどちらのワークスペースか直感的に選べるようになりました。

HyperSwitch

まとめ

VSCode のワークスペースごとに設定できる機能を使って、 ワークスペースごとにテーマを設定する方法を紹介しました。

普段、VSCode で複数のワークスペースを立ち上げっぱなしにしている人にはおすすめなので、やってみてください。

以上です。

広告