【VSCode】同じファイル名のタブの表示をカスタマイズして見やすくする

同じファイル名が並ぶと見分けづらい

当サイトはHugoで生成しており、記事のファイル名はindex.mdになっている。

ファイル名index.mdが強調されていてフォルダ名はグレーになっているため、同じファイル名が並ぶと見分けづらい。

その他、Ruby on Railsでindex.html.*やshow.html.*など、コントローラ事に同じファイル名を抱える場合が多いので、同じファイル名が並ぶ。
このような場合はフォルダ名のほうが重要なのでフォルダ名を強調したい。

タブの表示をカスタマイズする

VSCodeの設定でタブの表示をカスタマイズできる。

settings.jsonに以下のworkbench.editor.customLabels.patternsの設定を追加する。

    "workbench.editor.customLabels.patterns": {
        "**/index.md": "${dirname}/${filename}.${extname}",
    }

この設定を加えると以下のようにディレクトリ名/ファイル名が表示される。

index.mdだけでなくすべてのファイル名をカスタマイズしたい場合は以下のように設定する。

    "workbench.editor.customLabels.patterns": {
        "**/*": "${dirname}/${filename}.${extname}",
    }

カスタムラベルのパターン

workbench.editor.customLabels.patternsの各項目のキーはファイルパスのパターンを記述する。

**は任意のディレクトリを表し、*は任意のファイル名を表す。

{}で複数の組み合わせを指定できる。
例えば**/index.{md,html}はindex.mdとindex.htmlの両方にマッチする。

カスタムラベルの変数

workbench.editor.customLabels.patternsのパターンは以下の変数を使える。

• ${dirname}: そのファイルが存在するディレクトリ名
  • aaa/bbb/ccc/foo.txtの場合、${dirname}はccc
• ${dirname(N)}: そのファイルが存在するディレクトリのNだけ親のディレクトリ名
  • aaa/bbb/ccc/foo.txtの場合、${dirname(1)}はbbb、${dirname(2)}はaaa
  • ${dirname(0)}は${dirname}と同じでccc
• ${filename}: ファイル名(拡張子無し)
  • aaa/bbb/ccc/foo.txtの場合、${filename}はfoo
• ${extname}: 拡張子
  • aaa/bbb/ccc/foo.txtの場合、${extname}はtxt