[VS Code]タブのカスタムラベル設定でpage.tsx、layout.tsxなどのファイルを見やすくする

どうも！オペレーション部の西村祐二です。

最近、Next.jsなどでフロントエンドの実装も行うことが増えてきました。

実装を進めていくと、page.tsx,layout.tsx,index.tsx,route.tsなど同名のファイルが増えてきて、どのファイルを開いているか分かりづらいなと思う場面がありました。

VS Codeのv1.88で開いているファイルタブのラベルをカスタマイズできるようになったので、その設定方法を紹介したいと思います。

Visual Studio Code March 2024

結論

最初に結論として、settings.jsonに下記設定をすることでディレクトリ名も表示されるようになりタブを見やすくすることができます。

.vscode/settings.json

{
    "workbench.editor.customLabels.patterns": {
      "**/app/**/{*.tsx,route.ts,actions.ts}": "${dirname(1)}/${dirname} ∙ ${filename}",
      "**/components/**/*": "${dirname}/${filename}.${extname}"
    }
}

app、components配下のファイルを開くとディレクトリ情報とファイル名が表示されるように変更されます。

app配下のファイルを開いたときの例

components配下のファイルを開いたときの例

設定内容

settings.jsonに「workbench.editor.customLabels.patterns」という設定の下にエントリを追加することで、タブのラベルを自分の好みに合わせてカスタマイズできます。

現在、${filename}、${extname}、${dirname}、${dirname(N)}の変数が設定できるようで、これらを利用して動的にファイルのパスに置き換えることができます。

• ${dirname}：
  • ファイルが存在するフォルダーの名前です（例：root/folder/file.txt -> folder）。
• ${dirname(N)}：
  • ファイルが存在するn番目の親フォルダーの名前です（例：N=1の場合 root/folder/file.txt -> root）。
  • 負の数を使用することでフォルダーの先頭からパスを取得できます（例：N=-1: root/folder/file.txt -> root）。
  • 項目が絶対パスのパターンの場合、最初のフォルダー（N=-1）は絶対パスの最初のフォルダーを指し、それ以外の場合はワークスペースフォルダーに対応します。
• ${filename}：
  • ファイル拡張子を除くファイルの名前です（例：root/folder/file.txt -> file）。
• ${extname}：
  • ファイル拡張子です（例：root/folder/file.txt -> txt）。

例：設定"**/static/**/*.html": "${filename} - ${dirname}(${extname})"

は

root/static/folder/file.html を file - folder（html）としてタブに表示します。

おまけ: emojiを設定

emojiも設定できるので、対象のディレクトリごとにemojiを設定することでより視覚的にわかりやすくなるかもしれません。

例：

{
    "workbench.editor.customLabels.patterns": {
      "**/app/**/{*.tsx,route.ts,actions.ts}": "🌐 ${dirname(1)}/${dirname} ∙ ${filename}",
      "**/components/**/*": "🧩 ${dirname}/${filename}.${extname}"
    }
}

例として、app:🌐、components:🧩　を設定したときの表示は下記のようになりました。

emojiを探すときは下記サイトがとても便利でした。

https://emojidb.org/

さいごに

VS Codeのv1.88で追加された開いているファイルタブのラベルをカスタマイズする方法を紹介しました。

誰かの参考になれば幸いです。