Next.jsのApp routerの同じファイル名だらけでタブの視認性が悪い問題解決！

globパターンが分かってなくてちょっと戸惑いました

Custom labels for open editors

VScodeのsetteing.jsonに下記

setting.json
  // タブ名カスタム
  "workbench.editor.customLabels.enabled": true,
  "workbench.editor.customLabels.patterns": {
    "**/admin/*/*/page.tsx": "${dirname(1)}${dirname(0)} - Page",
    "**/admin/*/page.tsx": "${dirname} - Page",
    "**/api/*/*/route.ts": "${dirname(1)}${dirname(0)} - API",
    "**/api/*/route.ts": "${dirname} - API",
    "**/layout.tsx": "${dirname} - Layout",
    "**/page.tsx": "${dirname} - Page",
    "**/route.ts": "${dirname} - API"
  }

admin/*/*/page.tsxなどにすることで階層を指定できるようです。

admin/upload.tsxは「upload – Page」、admin/edit/[id]/page.tsxは「edit[id] – Page」と[slug]が分かるようにしたかったので