Customize UI 拡張機能を使ったお気楽 VSCode UI Tweak  - macOS での設定例の紹介-

追記（これから Customize UI 拡張機能を使いたい人へ）:

VSCode 側の修正により、Customize UI 側から VSCode の UI 変更に関わる API アクセスが大幅に制限されたため、拡張機能自体がほぼ使用不可となっているため、Customize UI ユーザーは「強制的に拡張機能が無効化されてしまった」という事態となってしまいました。
https://github.com/iocave/customize-ui/issues/156

現在、本記事に基づいて拡張機能を導入すると、VSCode が起動しなくなりますのでご注意を。
既存ユーザは、以下のコマンドで一時的に拡張機能を無効化した上で起動後、Customize UI をアンインストールすることで起動しなくなる問題は回避できます。

```bash
$ code --disable-extension
または
$ code --disable-extension iocave.customize-ui
```

# やりたい事

<img width="800" alt="スクリーンショット 2019-11-25 17.55.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124014/b535c35e-2d66-d59b-b722-9979c58331ad.png">

Visual Studio Code を自分好みにカスタマイズしたい。

具体的には、テーマや設定では変更出来ないような:

- システムフォントを好きなフォントに変更したい
- UI 自体の細かなスタイルの調整をしたい

VSCode 自体は Electron なので、インストールされたパッケージを直接弄って好みのデザインに調整しようと思えば可能。
しかしそれもアップデートによって毎回元に戻ってしまうので面倒。

※ 変更前
<img width="800" alt="before.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124014/bc4a7baf-a7ba-7636-55b1-fdd09981fb64.png">

## Customize UI (拡張機能) とは

[Customize UI - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=iocave.customize-ui)

![](https://raw.githubusercontent.com/iocave/customize-ui/master/screenshot.png)

VSCode の UI を設定の範疇を超えてカスタマイズ出来る拡張機能のこと。

具体的には:

- システムフォントの変更
    - 等幅フォントと通常フォントをそれぞれ変更
    - フォントサイズの調整
- アクティビティバーの表示位置の変更（左側から下部へ）
- タイトルバーをインラインにする（macOS のみ）
- ファイルツリーの項目の高さの変更
- カスタムスタイルの設定

なお、同制作者が作った JavaScript のインジェクションを行う [Monkey Patch](https://marketplace.visualstudio.com/items?itemName=iocave.monkey-patch) に依存しているため、両方インストールされる。

## 変更後

<img width="800" alt="customized.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124014/64810a80-5925-dd41-7ba2-62748a484fe6.png">

タイトルバーがスッキリして、コードの可視領域も広がっている。
以降は Customize UI で行った設定変更と微調整したスタイルを紹介する。

### システムフォントの変更

以下の設定を変更する。

- `customizeUI.font.regular`: システム UI の通常フォント
- `customizeUI.font.monospace`: システム UI 中のコード表示に使われる等幅フォント

個人的に UI に丸ゴシック（ヒラギノ丸ゴ）を設定したかったので:

```json
{
  "customizeUI.font.regular": "HiraMaruProN-W4",
  "customizeUI.font.monospace": "Cascadia Code"
}
```

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124014/39aff370-bcd1-78f4-b44d-0e26f4eb3069.png)

### タイトルバーとアクティビティバーの変更

`customizeUI.titleBar` と `customizeUI.activityBar` で変更する。

```json
{
  "customizeUI.titleBar": "inline", // macOS のみ
  "customizeUI.activityBar": "bottom"
}
```

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124014/a1261694-aa4d-b4c5-e26c-845ed8e6efb3.png)

タイトルバーとタブバーの位置を揃えることが出来るので、画面がスッキリする。
ただしアクティビティバーは、拡張機能を多くインストールしているとオーバーフローして表示されるため使い勝手が悪くなるかも。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124014/2b8c74cb-4f06-9739-f9c1-940cb6a6800f.png">

### ファイルツリーの項目の高さの変更

`customizeUI.listRowHeight` で変更出来る。

```json
{
  "customizeUI.listRowHeight": 27
}
```

27ピクセルの高さに調整される（ただしアイコンの高さが補正されないので、後述のカスタムスタイルで調整する必要がある）。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124014/bc7b8335-dc28-9492-462b-79c27dfea869.png">

### カスタムスタイルの設定

VSCode 上のスタイルクラスを指定し、既存のスタイルを上書きするような設定を記述出来る。

```json
{
  "customizeUI.stylesheet": {
    "selector": "style"
  }
}
```

以降はカスタムスタイルで設定した微調整の設定例を紹介する。

#### リストアイコンの位置調整例

<img width="305" alt="スクリーンショット 2019-11-21 17.15.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124014/a5b068c8-6748-684b-eb42-535dacdc224e.png">

リストの高さと同じぐらいに調整すればきれいに表示される。

```json
{
  "customizeUI.stylesheet": {
    ".show-file-icons .folder-icon::before": "height: 26px",
    ".show-file-icons .file-icon::before": "height: 26px"
  }
}
```

#### コマンドパレットのフォントサイズ調整例

<img width="617" alt="スクリーンショット 2019-11-21 17.13.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124014/854d9198-b615-59e7-75fb-08d5d81e8ea7.png">


```json
{
  "customizeUI.stylesheet": {
    ".monaco-list-rows": "font-size: 12.5px",
    ".monaco-tree-wrapper": "font-size: 12.5px"
  }
}
```

#### パンくずリストとシェル選択コンボボックスの微調整

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124014/8f23b77a-767b-4657-43b6-24630e47635e.png)

フォントサイズか要素の高さを変えることで不格好さをなくす。

```json
{
  "customizeUI.stylesheet": {
    ".monaco-select-box": "height: 23px",
    ".monaco-breadcrumbs": "font-size: 11.5px"
  }
}
```