This content originally appeared on DEV Community and was authored by Max Wiggedal
Do you find it difficult to navigate your NextJS project or do you get lost when you are editing multiple pages/routes/layouts/components at once? Look no further!
Custom Labels
VSCode supports custom labels for the files that are currently being displayed. I have put together some labels that work amazingly with a typical NextJS project setup.
"workbench.editor.customLabels.patterns": {
"**/app/**/layout.tsx": "${dirname(1)}/${dirname} - Layout",
"**/app/**/page.tsx": "${dirname(1)}/${dirname} - Page",
"**/app/**/route.ts": "${dirname(1)}/${dirname} - Route",
"**/app/**/_components/**/*.tsx": "${filename} - ${dirname(2)}/${dirname(1)} - Component",
"**/components/**/*.tsx": "${filename} - Component",
"**/data-layer/**/*.ts": "${filename} - Data Layer",
"**/entities/**/*.ts": "${filename} - Entity",
"**/hooks/**/*.ts": "${filename} - Hook",
"**/lib/**/*.ts": "${filename} - Library",
"**/utils/**/*.ts": "${filename} - Utility",
"**/env/**/*.ts": "${filename} - Environment"
}
You can always modify it to match your project needs!
To correctly setup the settings for your project create a directory called .vscode with a settings.json file inside of it. Then simply add your settings in there and it will apply for everyone in the project that uses VSCode.
NextJS TypeScript Version
Do not forget to set your TypeScript version to the one provided by NextJS. You can do so by opening the command palette in VSCode by pressing CTRL + SHIFT + P or F1 and then entering >TypeScript: Select TypeScript Version... after you have done so you want to select Use Workspace Version.
This will also add:
"typescript.tsdk": "node_modules\\typescript\\lib"
to settings.json in the .vscode directory of your project.
Result
You can easily identify what file belongs to what directory and therefore you for example do not have multiple "page.tsx" that you have to guess which one is correct.
This content originally appeared on DEV Community and was authored by Max Wiggedal
Max Wiggedal | Sciencx (2024-07-04T14:03:22+00:00) VSCode Settings for Next.js Project. Retrieved from https://www.scien.cx/2024/07/04/vscode-settings-for-next-js-project/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.