Zenn
💈

VS CodeのUIをCSSで修正する

2022/04/09に公開
VS Code
拡張機能
idea

発端

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

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

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

拡張機能

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

  • Customize UI
  • Custom CSS and JS Loader

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

クラス名がわからない

さて、CSSを変更すれば良いのはわかったんですが、変更したい箇所のセレクタがわかりません。私が取ったのは、ブラウザ版のVS Codeを使って開発者ツールを開く方法でした。
https://vscode.dev/
まあElectronでも同じセレクタでしょと思ったら同じでした。余談ですが、こうしてみるとどんな実装方法なのか簡単に見れておもしろいですね。display:noneとblockの切り替えでhoverを実装しているんだ、とか初めて知りました。
ここまで来ればあとはそんなに面倒ではありません。気になる要素の文字列をフィルターにかけます。

フィルターにかかった要素を見ます。

font-sizeがどこから来ているのか調べます。

Customize UIのSettingsを開き、Stylesheetの項で「Edit a settings.json」をクリックします。
適宜設定します。

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

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

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

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


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

感想

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

Discussion