feat: custom editor labels for nextjs file conventions

[thecmdrunner]

Is your feature request related to a problem? Please describe.

Having multiple page or layout files open makes it harder to navigate around in VS Code, due to the default naming convention in Next.js.

Describe the solution you'd like to see

VS Code now supports custom labels for files included in a pattern: https://code.visualstudio.com/updates/v1_88#_custom-labels-for-open-editors

I propose default labels for page.tsx, layout.tsx and route.ts/tsx. Here's how I've done it:

{
  "typescript.tsdk": "node_modules/typescript/lib",

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

Before

After

Describe alternate solutions

None

Additional information

https://twitter.com/nextjs/status/1783508313113800930

[thecmdrunner]

Would love to take this issue, and file a PR :)

[juliusmarminge]

While I like the idea we do not init editor specific configurations