VS CodeのUIをCSSで修正する

発端

JSDocのような注意書きをhoverで表示させたときにこんな感じに下側のフォントが小さく表示されました。

なぜこうなったのか疑問です。というのも、デフォルトでインストールされているものはフォントがもっと大きいからです。

もしかしたら、VS Codeに設定したフォントのせい？　とにかく、下側のフォントを大きくしたいのです。

拡張機能

以下の拡張機能を使えばVS Code自身のCSSを変更できるようです。

• Customize UI
• Custom CSS and JS Loader

どちらを使っても良いと思うのですが、Customize UIのほうがちょっと直す分には良さそうなので採用しました。

クラス名がわからない

さて、CSSを変更すれば良いのはわかったんですが、変更したい箇所のセレクタがわかりません。私が取ったのは、ブラウザ版のVS Codeを使って開発者ツールを開く方法でした。

  "customizeUI.stylesheet": {
    "div.monaco-hover-content": "font-size: 14px !important",
  },

フォントが大きくなりました。今度は行間(margin)が気になります。

同様の手順を踏んで、次のようにしました。

  "customizeUI.stylesheet": {
    "div.monaco-hover-content": "font-size: 14px !important",
    ".monaco-hover p": "margin: 0"
  },

ちょっと全体的に行間が詰まりすぎてる気もしますが…ヨシ！

感想

というわけで拡張機能を使ってUIを変更できました。他にも変更したいところがあれば、同じような方法でさくっとできそうです。以前VS Codeがブラウザでも使えると聞いたときには、あまりありがたみを感じませんでした。ですが、手軽に開発者ツールが使えるようになったのはすごく良いことだと思います。ではでは。