Zenn
⌨

【VSCode】複数ファイルを開いている時にタブを多段表示する方法(Mac)

2021/03/30に公開
VS Code
tech

VSCodeでたくさんファイルを開いていると、タブが横に広がりすぎてファイルが探しにくくなることがあるかと思います。

↓こういうとき

画面内に収まりきるならばいいですが、VSCodeのウィンドウ幅を狭めるときには
横にスクロールしないと探さないといけなくなりますよね。
※左ペインから "OPEN EDITORS" で一気に閲覧できますが
　WORKSPACE のファイル一覧も圧迫するため、今度はそちらが閲覧しにくくなりますというデメリットもあります

そういう時に↓のようにファイルタブを多段表示できるようにする方法を紹介します。

拡張 CSS ファイルを準備

自分の好きなフォルダに CSS ファイルを作成します。
私の環境では下記のパスに作成しています.
"/Users/username/workspace/custom.css"

中身は下記のようにして保存します。

/Users/username/workspace/custom.css

/Users/username/workspace/custom.css
.tabs-and-actions-container > .monaco-scrollable-element {
  height: auto !important;
}

.tabs-and-actions-container > .monaco-scrollable-element > .tabs-container {
  height: auto !important;
  flex-wrap: wrap;
}

拡張パッケージをインストール

先ほど作成した CSS ファイルを VSCode で読み込むため、
vscode-custom-css というパッケージを VSCode にインストールします。

インストールできたら VSCodeのPreferences > Settingsを開いて settings.json 内に↓の設定を追記します。
拡張CSSのファイルパスは絶対パスで記入するということと、絶対パスの前は file:// と入力することがポイントです。

settings.json

settings.json
...
    "vscode_custom_css.imports": ["file:///Users/username/workspace/custom.css"],
    "vscode_custom_css.policy": true,
...

書き込んだら VSCode で F1 (or Cmd+Shift+P) を押してコマンドパレットを開き
"Enable Custom Css and JS" と入力して Enter を押して実行します。

実行したら VSCode を再起動します。
(再起動後に　"Your VS Code is corrupted" というポップアップメッセージが表示されることがありますが無視してよいようです）

多段表示になっていることを確認

たくさんのファイルを開いた時にタブが多段表示なっていることを確認します。
お疲れさまでした！

参考にした情報

VSCode Github > https://github.com/microsoft/vscode/issues/70413
vscode-custom-css > https://github.com/be5invis/vscode-custom-css

Discussion