How to set up VSCode SvelteKit development (with all bells and whistles)

[kevinrenskers]

I feel like I am not getting the most out of VSCode, and I might have missed it but I have not found a good single place that documents how to set everything up.

I'm thinking specifically:

1. Showing linting / typing errors in real time (within the editor), in both JS/TS and Svelte files
2. Showing linting / typing errors for the whole workspace, across JS/TS and Svelte files
3. Formatting code on save, in both JS/TS and Svelte files

While I've managed to now auto format .svelte files on save, my .ts files are not auto formatted. To get the Svelte formatting to work I had to add the following to the settings file:

"[svelte]": {
  "editor.defaultFormatter": "svelte.svelte-vscode"
},

But this info is inside in the "Svelte for VS Code" README which I missed at first, and it's also not very obvious for new VSCode users how to even open the "raw" settings file to paste this in.

And while npm run check shows over 300 errors (I'm migrating to TS so yeah a lot to fix), I am not seeing them in a single list with VSCode anywhere. There is the ESLint tab which shows errors for the opened files, but not everything across the whole source code. If I don't have files open it just says "No problems have been detected in the workspace" which is weird to me, as there are plenty of them in my project 😅

So I guess to help more people it would maybe be nice to have a minimum settings.json file with all JS/TS/Svelte things, with an explanation on how to get to this settings file? And which extensions to install?

[nikfp]

Some guidance on this would be good as the docs flesh out more over time, but this set of circumstances has more to do with VS Code than it does to do with Sveltekit. Some thought would also need to go into this to identify the appropriate place to document these things, because the things you are seeing aren't unique to SK, but also apply to vanilla Svelte.

Something I've seen done in a few places is to place a .vscode folder in the starter template that can contain a settings.json that will scope to the workspace. You may have seen this (or done it) as well. This can specify configurations for tools used within the project, including recommended extensions to install. For Svelte and SK, this could include the svelte-vscode extension, as well as recommend Prettier if it's selected in the startup script, es-lint, etc. I wouldn't want too much in this personally as I'm fairly opinionated on how I want VS Code to work, but it's interesting when I clone a KitQL repo and the editor goes orange, or any Wes Bos example repo and the editor goes all kinds of wacky colors. In both cases I also get a notification of recommended extensions. (Super helpful for Wes Bos tutorials as you get guardrails to make things work the way he has them set up)

As for the TS errors, seeing errors in the "Problems" tab for only open files is normal. That tool is in place to help you on the scope of what you are working on at the moment, and the exhaustive check is what npm run check is set up to do. The reasoning is that if the TS language service had to check all files all the time, it could quickly grind to a halt. In fact you probably notice that npm run check takes a noticeable time period to run, and in large projects that just gets longer.

The flipside is that if you get all the errors that check surfaces taken care of, and you make a habit of not closing a file until TS is happy, you go a long way toward keeping check clean. You should still do it occasionally though, as a file you changed my be imported in another file and you might have broken something downstream, and a full check will pick up any TS related errors.

Finally, for the formatting on save, I'd encourage you to look into Prettier and related docs to get it how you want it, and how to set it up in VS Code. Or even better, this blog post does a great job of outlining Prettier and ES-Lint working together, links out to use cases that don't use VS Code, and is actually pretty awesome.

[kevinrenskers]

I love the idea of supplying a default .vscode folder with the starter templates.