98
75

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の色とテーマを変えて気持ちを切り替える

Last updated at Posted at 2019-04-07

VSCodeの設定は「ユーザー設定」と「ワークスペースの設定」がわかれており、すべてのプロジェクトで使いたい設定と、個別のプロジェクトで使いたい設定を分けることができます。

これを利用することで、プロジェクト間でエディタの色やテーマを使い分けることができるので、設定方法と設定の例について説明します。

ワークスペースの設定

設定はCmd(Ctrl)+,で開くことができ、ユーザー設定とワークスペースの設定が分けられています。
各プロジェクトの設定は画像の枠で囲った部分からアクセスできます。

スクリーンショット_2019-04-07_22_46_22.png

(ユーザー設定はmacOSの場合は~/Library/Application Support/Code/User/に保存され、ワークスペースの設定は各プロジェクトの.vscode/settings.jsonに保存されます。)

ちなみに.vscode/settings.jsonはgitのグローバル設定でignoreするようにしとくと誤pushが防げて便利です。

部分的に色を変える

筆者はエンジニアとして複数の会社のプロダクトに関わっています。そのときにVSCodeの色が一緒だと、どのプロダクトを開発しているか分かりづらくなることがあります。

そこで.vscode/settings.jsonで、部分的に色を変更する項目を設定しています。

.vscode/settings.json
{
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#4aa1c4",
    "activityBarBadge.background": "#4aa1c4"
  }
}
スクリーンショット 2019-04-07 22.41.52.png

カスタマイズできる項目を公式サイトを見るといいです。
https://code.visualstudio.com/api/references/theme-color

テーマごと変える

技術書典に向けて、VSCodeで原稿を書いています。しかし、仕事でも使っているエディタで書いていると、いまいち執筆気分になりきれません。
そこで、執筆のプロジェクトでは、色を個別に変更するのではなく、テーマごと変えています。

.vscode/settings.json
{
  "workbench.colorTheme": "Solarized Light",
}

ライトテーマとダークテーマを切り替えるだけで、別のエディタを触っている気分になるのでおすすめです。

スクリーンショット 2019-04-07 22.54.19.png
98
75
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
98
75

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?