VSCodeでタブのカスタムラベルが設定できるようになった

VSCode1.88がリリースされ、タブの見た目をカスタムできるcustomLabelsが設定できるようになりました。

動きは、公式の動画を引用させてもらいます。

設定置いておきます

すぐ試したいかたは、サンプル置いておきますつ

.vscode/settings.json

{
  "workbench.editor.customLabels.enabled": true,
  "workbench.editor.customLabels.patterns": {
    "app/**/page.tsx": "${dirname} - Page",
    "app/**/layout.tsx": "${dirname} - Layout",
    "app/**/api/**/route.ts": "${dirname} - API",
  }
}

カスタムラベル無効

カスタムラベル有効

同じ、userのルーティングで作用するファイルがタブでグルーピングできました。

個人的には「どこ」の「なに」がわかりやすくなりました。

公式Xでのポスト

公式のポストでは、ページ、レイアウト、コンポーネントをカスタムラベルを試していました。

うまく効きそうな条件

カスタムラベルを使うと、タブで何の「役割」かを明示できてよさそう

フォルダ名・ファイル名にルールがある
重複するファイル名

上記ふたつの条件が揃うとうまくいきそうな予感がします。

Nextjsのようなフォルダ構造でルーティングを作るフレームワークは、この機能と相性良さそうです。

Nextjsのプロジェクト構成

Nextjsでは、フォルダ構成・ファイル名が決まっているものがあります。

特に使用頻度が高いのは下記かなと思います

layout
page
route

なんだっけこれ、何度見てもその時には忘れているからドキュメントで確認しにいっている選手権

個人的にぱっとみすぐわからないルールのやつをカスタムラベル化したかったのですがglobパターンでは難しそう！？

catch-all-segments: [...folder]
convention: (.folder)

これらは、globパターンでヒットさせるのが難しかったです。
やりたかったことは、

/app/api/[...role]/route.ts というフォルダとファイル名に、
↓
${dirname} - CatchALL APIというタブ名ルールを適応
↓

[...role] - CatchALL API

というタブ名にしたかったです。これからに期待です。

感想

今までは、Nextjsを使って、ファイル名やルールを脳内変換していたのをタブに置き換えられそうです。
フォルダ名やファイル名に役割をもたせるよな命名規則を持った、フレームワークやチームのコーディングスタイルがあるところには相性良さそうです。