Fulco Taen

Developer from the Netherlands
GitHub
A headshot of Fulco

How to create Svelte 5 components with Cursor

September 14, 2024

If you are a programmer who hasn't been living under a rock you probably already heard of the cursor IDE. I'll show you how to fix the AI's confusion with Svelte 5's new syntax.

What is cursor?

Cursor is a fork of VSCode with much better AI tooling built in:

  • You can use command + k to tell the AI to write or refactor code for you and it provides the diffs of what is done
  • It provides intelligent code completion and suggestions. importantly at multiple places in your code at the same time
  • A chat on the side that has context of your code
  • You can choose your model which means you can also use the atm superior claude 3.5 sonnet model

If you tried copilot and didn't like it, cursor is pretty much everything that copilot should have been.

How to use cursor with svelte 5 and sveltekit?

If you've used Svelte 5 with AI, you might have noticed it doesn't work that great. AI models were mostly trained on Svelte 4. So they keep using the old syntax.

To fix this, we can add a .cursorrules file in your project root with the Svelte 5 documentation. The content of this file is injected into the AI's prompt whenever you ask it to generate code.

If that sounds like a lot of effort I already did it for you! Download the Svelte 5 .cursorrules configuration file