VS Code Custom Labels for NextJS

Are you tired of having every tab in your VS Code showing page.js or page.tsx as the filename?

Consistent naming patterns can make software development easier. If you're using NextJS with the app router then you can easily locate the file rendering a URL by looking for a file named page.js or page.tsx in the same path under the app folder.

That consistent naming isn't so great in your IDE when every open file is called page.js or page.tsx

This is where the new VS Code custom labels feature comes to the rescue. You can now tell VS Code to name your tabs differently based on filename glob pattern matching. To do this either searching your settings for custom label and add patterns/values

or adding something like this to your .vscode/settings.json file:

{
    "workbench.editor.customLabels.enabled": true,
    "workbench.editor.customLabels.patterns": {
        "**/app/**/{default,error,layout,loading,page,route,template}.{js,tsx}": "${dirname}/${filename}.${extname}",
        "**/app/**/{opengraph-image,twitter}.{js,tsx,jpg,png,gif}": "${dirname}/${filename}.${extname}",
    }
}

Now my tabs show the folder name before the filename for special files in NextJS.