🦚

VSCodeのワークスペースを色分けする

2021/01/19に公開

Git

VS Code

idea

VSCodeを使って開発をしている時、たくさんのワークスペースを開いていると度々こんな場面に遭遇します。

「どれがどのワークスペースか分からないし、ダークモードやりすぎてもはや他のアプリともすら区別つかない、、」

特定のワークスペースに移動しようとしてもよく見ないと分からずイライラすることが良くありました。
そのため、今ではワークスペースを色分けして、こんな感じにして使っています。

割とすぐにできたので、以下にそのときにやったことを書き残して置きました。

色付け

VSCodeではsetting.jsonを使って細かく色を変更できますが、タイトルバーの背景の色・ステータスバーの枠の色など一々ワークスペースごとに設定していたら時間がかかりすぎてしまいます。そこで、Peacockという拡張機能を使いました。

PeacockはVSCodeのカラー設定をいい感じに行ってくれます。

設定

Comman + Shift + pでコマンドパレットを開き、「pea...」くらいまで打つと候補に「Peacock: Change to a Favorite Color」と出てくるので選択します。
すると、そこからカラーの選択肢が出て来ます。

色の選択後は、ワークスペースに.vscode/setting.json が追加されています。

setting.json

{
    "workbench.colorCustomizations": {
        "activityBar.activeBackground": "#fa1b49",
        "activityBar.activeBorder": "#155e02",
        "activityBar.background": "#fa1b49",
        "activityBar.foreground": "#e7e7e7",
        "activityBar.inactiveForeground": "#e7e7e799",
        "activityBarBadge.background": "#155e02",
        "activityBarBadge.foreground": "#e7e7e7",
        "statusBar.background": "#dd0531",
        "statusBar.foreground": "#e7e7e7",
        "statusBarItem.hoverBackground": "#fa1b49",
        "titleBar.activeBackground": "#dd0531",
        "titleBar.activeForeground": "#e7e7e7",
        "titleBar.inactiveBackground": "#dd053199",
        "titleBar.inactiveForeground": "#e7e7e799"
    },
    "peacock.color": "#dd0531"
}

gitで追跡しないようにする

簡単に色付けできるようになったのは便利ですが、setting.jsonがgitに差分として認識されてしまいました。このままでは間違ってコミットに含めてしまいそうなので、gitignoreに追加することにします。
ただ、各リポジトリのgitignoreに毎回記述するのは面倒ですし、エディタの設定なんて含めるべきものでもないので/Users/ユーザー名/.config/git/ignore に以下を追加して、全てのリポジトリで無視するように設定しました。

ignore

.vscode/*
!.vscode/tasks.json
!.vscode/extensions.json
*.code-workspace

# Local History for Visual Studio Code
.history/

ソースの参照元

まとめ

以上の

Peacockで色付けする
gitignoreの設定

の２つを行って、結構簡単にワークスペースを色分けできました。
これでどれウィンドウがどのワークスペースなのかすぐ分かるようになって少しだけ開発が効率的になりました。

色付け

設定

gitで追跡しないようにする

まとめ

Discussion