Custom Editor Tab Labels in Visual Studio Code

To improve your coding experience on a file-based routing project.

If you're someone who works in a file-based routing framework such as Next.js and Svelte, then you might have definitely come across this problem where all the tabs are named page.tsx (Next.js)

This becomes quite difficult to handle when you have multiple files open and it's not easy to know which file you're editing.

With Visual Studio Code Insiders build, you can now enable custom labels for editor tabs.

You can add the custom labels configuration in the settings.json file. To access the settings.json in VSCode, press Ctrl + Shift + P, and search for Preferences: Open User Settings (JSON)

Here's an example configuration to add in the settings.json to display the directory name instead of page.tsx in a Next.js project.

"workbench.editor.customLabels.patterns": {
    "**/app/**/page.tsx": "${dirname}.${extname}",
    "**/app/**/layout.tsx": "${dirname}/layout.${extname}"
}

With that configured this is how your editor tabs will look.

Now it's much easier to know which file you're working on. You can add more custom patterns to suit your liking.

---

If you’re a tech enthusiast and resonate with my content, do give me a follow on LinkedIn, GitHub, and Twitter.