VS code setup for Svelte

VS code setup for Svelte

Here are some VSCode settings that help in working with Svelte/Sveltekit better.

svelte logo

Want a Svelte site built? Hire Me.

When working with Svelte or Sveltekit, optimizing your development environment in VSCode can significantly boost your productivity.

Svelte VSCode Settings

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.

Svelte VSCode Settings Filefirst Sort Order

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.

Svelte VSCode Settings Medium label format

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)

Svelte VSCode Settings Tree indentation

4. Sveltekit Generate Files

Creating routes in Sveltekit involves repetitive tasks. Streamline this process by utilizing this Sveltekit extension, providing valuable Svelte language support.

Sveltekit vscode extension

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.

Sveltekit vscode extension settings

With this enhancement, generating essential Sveltekit files becomes a seamless process, saving you valuable time and effort.

Sveltekit vscode extension generate sveltekit files

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.

Search sveltekit pages, layouts etc

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!

Find related articles

Let's discuss on Twitter