Customize UI 拡張機能を使ったお気楽 VSCode UI Tweak - macOS での設定例の紹介-
やりたい事
Visual Studio Code を自分好みにカスタマイズしたい。
具体的には、テーマや設定では変更出来ないような:
- システムフォントを好きなフォントに変更したい
- UI 自体の細かなスタイルの調整をしたい
VSCode 自体は Electron なので、インストールされたパッケージを直接弄って好みのデザインに調整しようと思えば可能。
しかしそれもアップデートによって毎回元に戻ってしまうので面倒。
Customize UI (拡張機能) とは
Customize UI - Visual Studio Marketplace
VSCode の UI を設定の範疇を超えてカスタマイズ出来る拡張機能のこと。
具体的には:
- システムフォントの変更
- 等幅フォントと通常フォントをそれぞれ変更
- フォントサイズの調整
- アクティビティバーの表示位置の変更(左側から下部へ)
- タイトルバーをインラインにする(macOS のみ)
- ファイルツリーの項目の高さの変更
- カスタムスタイルの設定
なお、同制作者が作った JavaScript のインジェクションを行う Monkey Patch に依存しているため、両方インストールされる。
変更後
タイトルバーがスッキリして、コードの可視領域も広がっている。
以降は Customize UI で行った設定変更と微調整したスタイルを紹介する。
システムフォントの変更
以下の設定を変更する。
-
customizeUI.font.regular
: システム UI の通常フォント -
customizeUI.font.monospace
: システム UI 中のコード表示に使われる等幅フォント
個人的に UI に丸ゴシック(ヒラギノ丸ゴ)を設定したかったので:
{
"customizeUI.font.regular": "HiraMaruProN-W4",
"customizeUI.font.monospace": "Cascadia Code"
}
タイトルバーとアクティビティバーの変更
customizeUI.titleBar
と customizeUI.activityBar
で変更する。
{
"customizeUI.titleBar": "inline", // macOS のみ
"customizeUI.activityBar": "bottom"
}
タイトルバーとタブバーの位置を揃えることが出来るので、画面がスッキリする。
ただしアクティビティバーは、拡張機能を多くインストールしているとオーバーフローして表示されるため使い勝手が悪くなるかも。
ファイルツリーの項目の高さの変更
customizeUI.listRowHeight
で変更出来る。
{
"customizeUI.listRowHeight": 27
}
27ピクセルの高さに調整される(ただしアイコンの高さが補正されないので、後述のカスタムスタイルで調整する必要がある)。
カスタムスタイルの設定
VSCode 上のスタイルクラスを指定し、既存のスタイルを上書きするような設定を記述出来る。
{
"customizeUI.stylesheet": {
"selector": "style"
}
}
以降はカスタムスタイルで設定した微調整の設定例を紹介する。
リストアイコンの位置調整例
リストの高さと同じぐらいに調整すればきれいに表示される。
{
"customizeUI.stylesheet": {
".show-file-icons .folder-icon::before": "height: 26px",
".show-file-icons .file-icon::before": "height: 26px"
}
}
コマンドパレットのフォントサイズ調整例
{
"customizeUI.stylesheet": {
".monaco-list-rows": "font-size: 12.5px",
".monaco-tree-wrapper": "font-size: 12.5px"
}
}
パンくずリストとシェル選択コンボボックスの微調整
フォントサイズか要素の高さを変えることで不格好さをなくす。
{
"customizeUI.stylesheet": {
".monaco-select-box": "height: 23px",
".monaco-breadcrumbs": "font-size: 11.5px"
}
}
Author And Source
この問題について(Customize UI 拡張機能を使ったお気楽 VSCode UI Tweak - macOS での設定例の紹介-), 我々は、より多くの情報をここで見つけました https://qiita.com/entertvl/items/5cb03c51a037e48e8732著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .