7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

vscodeのワークスペースを色分けしてスイッチできる拡張が便利

Posted at

はじめに

vscodeで複数のワークスペースを切り替えながら作業する時、今自分がどのワークスペースを開いているのかわからなくなったり、いちいちミッションコントロールを起動して画面を切り替えるのが面倒だったりしないでしょうか。
vscode-workspace-switcherを導入すれば、こんな感じで解決します。
switching.gif
各ワークスペースの左端のバーの色を替えてワークスペースを識別しやすくし、ショートカットキーでワークスペースを切り替えられるようになります。

導入と設定

1.vscode-workspace-switcherをインストール
2.ターミナルからvscodeを起動するコマンドcodeをインストール。参考記事
3.切り替えたいフォルダの.code-workspaceファイルを作成。vscode上でワークスペースに追加したいフォルダを開いた状態で「メニュー→ファイル→名前を付けてワークスペースを保存」を選び、任意のフォルダに保存する。
4.vscodeの設定ファイルsetting.jsonを開き、以下を追加

setting.json
  "vscodeWorkspaceSwitcher.paths": ["/path/to/3で.code-workspaceファイルを保存したフォルダ/"],

この時点で、vscode左端のバーのvscode-workspace-switcherのアイコンや、Ctrl-wで各ワークスペースを切り替えられるようになっているはずです。
5.各.code-workspaceファイルに以下を追記。色の指定を変更すれば任意の色にできます。

.code-workspace
{
  "settings": {
    "workbench.colorCustomizations": {
      "activityBarBadge.background": "#4aa1c4",
      "activityBar.background": "#4aa1c4",
      "activityBar.foreground": "#000000"
    }
  }
}
7
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
7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?