Make VSCode know Svelte

I am a complete new person to Svelte, an awesome framework for the front-end. I wanted to learn about this and use it in some of my projects. What drove me more was the blog post by Tapas Adhikary. Do read that to know what is Svelte and how different it is from ReactJS and VueJS.

The thing is, when I did start, there wasn't many resources to get kicked-in. So, I planned on writing whatever I did whilst learning about this.

The first thing: Lack of highlighting in VSCode

Let me admit, I am a huge lover of VSCode. I feel like it is a replacement for IDEs due to it's awesome intelli-sense. But when I cracked upon the editor and created a file, this is what I noticed

Code that is not getting highlightedNo code highlighting by default

I am not a person who installs tons of extensions just to get the syntax highlighted. So, I did the short but sweet approach.

  1. Go to your Settings through File -> Preferences -> Settings or simply by CTRL + `
  2. Make the editor understand .svelte files are as same as .html files by just adding these lines into your config.
    {
     "files.associations": {
         "*.svelte": "html",
     },
    }
    

Now comes the magic we've been waiting for.

The code now highlightedCode now highlighted by default

But hey. It is not done yet. I love emmet. Type a tag and press TAB. Boom, you get it completed. Type div*2>span>{$}, press TAB and there you go, you get this.

<div>
    <span>1</span>
</div>
<div>
    <span>2</span>
</div>

To get emmet do the heavy-lifting stuffs. Go to your settings again and add this one little line

{
    "emmet.includeLanguages": {
        "svelte": "html",
    },
}

Save your settings and you rock. You are in a good path to learn. But wait...

For those who love extensions and more features.

There is an awesome VSCode extension that provides syntax highlighting and rich intellisense for Svelte components in VS Code. You can get it from here. It also shows messages for warnings and errors and also has support for svelte preprocessors that provide source maps.


This article is a part of Learn Svelte with me series. Follow me to get notifications about all future posts.

Comments, critiques and corrections are very welcome. Thanks for reading-by.

Jonathan Greaves's photo

Your emmet advice is good, to help with HTML etc. but associating .svelte files with .html removes all of the niceties the VS Code Svelte plugin adds.

Svelte files associated with html:

<svelte:window on:keydown="{handleKeydown}" />

and when not associated with html

<svelte:window on:keydown={handleKeydown} />

xXAlphaManXx's photo

Unfortunately yes. It does interfere with Svelte plugin's nice thing.

It's quite a subjective matter. I just cannot live without emmet. I'm not a front end developer, so all I do is type the same boiler plate code again and again to have a prototype up and running. For that emmet comes useful.

I don't have a problem with editing the props manually because no matter what, the Svelte compiler will take care of it. Neither does the Svelte plugin provides any intelisense feature.

This is the reason I went with this setup. I'll try to find a workpath which works for the both sides.

Thanks for leaving this comment ;)

Tapas Adhikary's photo

Nice work! Looking forward to see your series. It will be fun exploring the routes, async communication etc.

All the best!

xXAlphaManXx's photo

Sure. I'll try my best to keep writing blogs because Gods of blogging are not on my side :P