When working with Svelte or Sveltekit, optimizing your development environment in VSCode can significantly boost your productivity.
The image shows how to get to the settings in VSCode. You can also use Ctrl+comma shortcut to get here.
1. Filefirst Sort Order
My projects were usually small and I never noticed this issue but gradually when these projects grew, it became a little hard to find files in sub-directories.
One of the key aspects of managing a growing project is organizing your files and directories effectively. In VSCode, navigate to Settings >> Explorer: Sort Order >> filesFirst. This setting ensures that files are displayed before directories.
Particularly beneficial for larger projects with numerous sub-directories, this arrangement makes it easier to locate essential files like +page.svelte, +layout.svelte, +server.js, or +error.svelte directly beneath their respective directories.
2. Medium Label Format
Since all pages in Sveltekit are named +page.svelte there should be a way in the tab to know which directory it belongs to.
To address this, modify the tab label format to Medium. In VSCode, navigate to Settings >> Label Format >> Medium. This provides a clear indication of the directory to which each +page.svelte file belongs, enhancing overall project visibility.
You can also use Short instead of Medium. It shows the route of the page.
3. Tree Indentation
Optimize the readability of your file structure by adjusting tree indentation.
Navigate to Settings >> Workbench >> Tree: Indent >> 12. A larger indent value enhances clarity, making it easier to identify file associations with specific directories.
Additionally, ensure that compact folders are disabled, ensuring directories are clearly distinguished even if they contain no files. You can disable it here Settings >> Explorer: Compact Folders >> (uncheck)
4. Sveltekit Generate Files
Creating routes in Sveltekit involves repetitive tasks. Streamline this process by utilizing this Sveltekit extension, providing valuable Svelte language support.
The most useful feature in this extension is not enabled by default. I’m not sure why.
To activate this feature, access the extension settings and enable the context menu.
With this enhancement, generating essential Sveltekit files becomes a seamless process, saving you valuable time and effort.
5. Search for Files with ’+`
A handy trick, suggested by Svelte’s creator Rich Harris, involves quickly locating pages, layouts, and endpoints. Simply press Ctrl+p and enter + in the search bar.
This method efficiently filters Sveltekit-related files, allowing you to swiftly access specific components within your project.
These optimized settings and extensions are tailored to enhance your Svelte development experience in VSCode. By implementing these improvements, you can navigate your projects with ease, boost your efficiency, and focus on building exceptional web applications with Svelte.
Thank you. Happy coding!