【小ネタ】VSCodeで同名ファイルのタブを少し見やすくする
はじめに 👋
Next.js、SvelteKitなどのモダンなフレームワークで開発していると、page.tsxやindex.tsxのような同じ名前のファイルがプロジェクト中に大量に存在して、タブバーが混乱することがよくあります。
Ctrl + P（macOSの場合はCmd + P）でファイル検索もできますが、マウスでサクッとタブを切り替えたいときもありますよね 。
なぜこの方法が必要なのか？ 🤔
デフォルトのVSCodeでは、同名ファイルのタブはこんな感じ
見にくいですよね... 👀
完成イメージ
タブの複数行になっており、ファイル名が上に、ディレクトリが下に表示されるようになっています。
参考
今回参考にさせてもらったのは、wesbos氏のvscode-custom-css-injectというWebSocketを使って自動で書き換えるコードです。
こらちのcustom.cssの一部を、今回は手動で追加していきます。
最初に見つけたのはこちらの𝕏のポストです
環境
OS: macOS 14.5 23F79 arm64
code: 1.96.4
必要なファイルの書き換え 📂
workbench.htmlというファイルを書き換えます。
macOSの場合は以下のコマンドでVSCodeで開きます
code '/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench/workbench.html'
他のOSの場合もworkbench.htmlを書き換える必要があります。
場所は以下のようですが、確認していないので間違っていればご指摘頂けると助かります！
Windows:
C:\\Users\\[ユーザー名]\\AppData\\Local\\Programs\\Microsoft VS Code\\resources\\app\\out\\vs\\code\\electron-sandbox\\workbench\\workbench.html
Linux:
/usr/share/code/resources/app/out/vs/code/electron-sandbox/workbench/workbench.html
その後<head>タグ内に以下のスタイルを追加します
<style>
/* Multi-line tabs */
.monaco-workbench
.part.editor
> .content
.editor-group-container
> .title
.tabs-container
> .tab {
--editor-group-tab-height: 1.2;
padding: 8px;
& .monaco-icon-label:before {
background-position: top left;
padding-right: 2px;
}
/*
<div class="monaco-icon-label-container">
<span class="monaco-icon-name-container">
<a class="label-name">server.ts</a>
</span>
<span class="monaco-icon-description-container">
<span class="label-description">vscode-custom-css-inject</span>
</span>
</div>
*/
& span.monaco-icon-label-container {
line-height: 1;
}
& span.monaco-icon-description-container {
display: block;
line-height: 1;
& .label-description {
margin: 0;
}
}
}
</style>
保存しようとするとsudo権限が必要と警告されるので、sudo権限で再試行します。
あとはVSCodeをリロードすればOKですが、「Code インストールが壊れている可能性があります」という警告が出るかと思いますが、一旦閉じましょう。
これで同名のファイルを開いた際に改行付きで表示されているかと思います。
スタイルのコメントについて
スタイルの途中にコメントが入っていますが、これは「vscode-custom-css-injectというディレクトリに入っているserver.tsというファイルの場合」のMonaco Editorのタブの構造を表しています。
VSCodeはMonaco Editorをベースにしているので、どこをどう書き換えればいいのか、こちらのコメントを参考にして書き換えてください。
注意点 ⚠️
- VSCodeが公式にサポートしていません
- アップデートで再設定が必要かも
- 気になる場合はworkbench.htmlのバックアップを取りましょう
まとめ 🎉
全体として非常に見やすくなりました。
ただし、workbenchのCSSの書き換えはそもそもVSCode非推奨のものなので、挙動に不安がある場合はworkbench.htmlのコピーを保存しておき、あとで修正できるようにした方が良いかもしれません。
Discussion