VSCode の見た目をいじったメモ

普段開発には JetBrains 系の IDE （業務だと PhpStorm、個人開発だと WebStorm とか PyCharm とか）を使うことが多いですが、用途によっては VSCode のほうが向いているシーンもいろいろとあるため、これはこれで結構使ってます。

で、たまに見た目をがらっと変えたくなることがあるんですが、毎回手順を忘れるのでメモっておこうと思います。

好きなテーマにする

まずは好きなテーマをいれます。
で、その上で見た目気に入らないところは上書きしていく感じになります。

拡張機能の検索で theme とかで探すといろいろ出てきます。
イメージに近いものを入れてから、最後に配色を調整するのが良いです。

ウィンドウの配色の微調整

settings.json に workbench.colorCustomizations というキーを作ります。

で、適当に好きな色を当てます。
たとえば、自分の場合、今だとこんなふうにしてます。

{
  "workbench.colorCustomizations": {
    "titleBar.activeForeground": "#9d9fa5",
    "titleBar.activeBackground": "#32302f",
    "titleBar.inactiveForeground": "#9d9fa5",
    "statusBar.foreground": "#9d9fa5",
    "statusBar.background": "#32302f",
    "statusBar.noFolderForeground": "#9d9fa5",
    "statusBar.noFolderBackground": "#32302f",
    "statusBar.debuggingForeground": "#462303",
    "statusBar.debuggingBackground": "#f0755f",
    "editorCursor.foreground": "#9d9fa5"
  }
}

ちなみにタイトルバーの設定とかは workspace ごとに設定するとプロジェクトごとに色を変えることができます。

この場合は、グローバルな settings.json ではなくて、workspace ごとの .vscode/settings.json ファイルに記述します。
デフォルトはグローバルな設定で、ワークスペース毎の設定で上書きするイメージなので欲しいところだけ書き換えればOK。

どういうときに使うのかは……何とも言えないんですが、たとえば OSS とかでプロダクトとか作成してる Organization のカラーがあって、開いたらその色になるみたいなのはそれはそれでおもしろいかもしれませんね。
ただ、タイトルバーだけとか、なるべく控えめにしとかないとちょっとアレかもですが。

サイドバーのアイコンでかくする

サイドバーのアイコンが大きいほうが（小さいほうが）好きだな、って場合ですが、標準の機能だとこのアイコンだけをサイズ変更する手段が無いようでした。

解決法１：拡張いれる

drcika/apc-extension という、かつてあった customize-ui のような UI をいろいろカスタマイズできる拡張があるので、これを使う方法。

なお、このアイコンが並んでいる部分自体はアクティビティバーと言い、アイコンをおすと横に開く部分をサイドバーというらしいです。
なので今回はアイコン部分だからいじるのはサイドバーというよりは、アクティビティバーとなり、設定する場所は以下のようになるみたいです。

{
  "apc.activityBar": {
    "size": 48
  }
}

解決法２：UIを拡大してから文字だけ小さくする

昔からある方法みたいで、5年前の Stack Overflow がヒットしたのですが、
要は UI を拡大表示するためのズームレベルを変更して、それにより大きく（小さく）なった文字サイズの値を変えることでバランスをとる、という方法もあるみたいです。

{
  "editor.fontSize": 15,
  "window.zoomLevel": 0.5
}

これの欠点は、UI全体の拡大率を設定するので、たとえばアクティビティバーのアイコンを大きくしたいだけでの場合でも、タイトルバーなども大きくなってしまうということでしょうか。

editor - How to change font size in VS Code sidebar? - Stack Overflow

いまのところ自分はこちらの方法で不自由してないので、拡張は使ってません。
拡張入れ過ぎると重くなりそうだし。

ウィンドウのタイトルをいじる

window.title で変更できます。
変数を使えるので、現在のファイルなどに応じたテキストを織り交ぜたタイトルが作れます。

{
  "window.title": "ฅʕ •ﻌ• ʔ < ${activeEditorShort}${$dirty}${separator}${rootName}"
}

タイトルバーに使える変数は以下の通り

ファイル名

${activeEditorShort}: ファイル名
${activeEditorMedium}: ワークスペースからの相対パス
${activeEditorLong}: ファイルの絶対パス

フォルダ名

${activeFolderShort}: ファイルが含まれているフォルダーの名前
${activeFolderMedium}: ファイルを含むフォルダーのワークスペースフォルダーからの相対パス
${activeFolderLong}: ファイルが格納されているフォルダーのフルパス

ワークスペース

${folderName}: ファイルが含まれているワークスペースフォルダーの名前
${folderPath}: ファイルが含まれているワークスペースの絶対パス
${rootName}: 利用可能なオプションのリモート名とワークスペースインジケーターのあるワークスペースの名前
${rootNameShort}: サフィックスのないワークスペースの短縮名
${rootPath}: 開かれたワークスペースまたはフォルダーのファイルパス
${profileName}: ワークスペースが開かれているプロファイルの名前。既定のプロファイルが使用されている場合は無視される。

その他

${appName}: アプリ名
${remoteName}: リモート名
${dirty}: アクティブなエディターが未保存であることを示すインジケータ（●マーク）
${focusedView}: 現在フォーカスされているビューの名前
${separator}: 値か固定のテキストで囲われたとき、条件付きの区切り記号 (" - ") を表示

Table of Content

好きなテーマにする