Make VSCode know Svelte

UpdatedSeptember 15, 2019

•0 min read•View as Markdown

xXAlphaManXx

Part of seriesLearn Svelte with me

Comments (2)

Join the discussion

Jonathan Greaves6y ago

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} />

xXAlphaManXx6y ago

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 Adhikary7y ago

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

All the best!

xXAlphaManXx7y ago

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

Learn Svelte with me

Part 1 of 1

I will be writing blog posts about what I am learning and how I am learning about Svelte.

More from this blog

Using GitBash in Jetbrain's IDE

Whenever I program, I spend most of time in the GitBash instead of having tons of other tools. I love simplicity. But JetBrain's Integrated Terminal defaults to Windows' age-old CMD. Let's change it right away. Get it going Go to File -> Settings -...

May 24, 2019

InScrompT | Developing products for Humans

2 posts

When I am not writing code, I'd be riding to places unknown.

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.

https://atapas.hashnode.dev/being-reactive-say-no-to-virtual-dom-meet-svelte-cjvw4nd6c002mezs127jwt4nb

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 highlighted No 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.

Go to your Settings through File -> Preferences -> Settings or simply by CTRL + `
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 highlighted Code 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.