Using ECMAScript 6 features is all cool and feels good, but all that makes little sense without syntax support in an IDE. Since the specification just has been finished earlier this year, some IDE’s still don’t support the syntax yet and need some little extra work.
Everyone has their favourite IDE and I can’t cover them all. At my work the most used ones are Sublime Text 3, Visual Studio Code, and WebStorm. I think that roughly represents usage in the web developer community, hence I will only cover these.
Visual Studio Code
With the June 2015 release VSCode finally supports ES6 syntax. Unfortunately it’s not activated by default and needs a
jsconfig.json file in the projects directory. This is a bummer for me, as it kinda feels like still in beta and is just inconvinient.
jsconfig.json in your project directory (it could also be in the source folder), restart Visual Studio Code and you will see that all warnings are gone.
Sublime Text 3
What I really like about Sublime Text is, that it’s just a simple text editor which you can upgrade and set up as you want. You are not forced to live with a bloated IDE full of features, but can only install these you really need.
Of course this also has a downside: everything is a bit more complicated. You need to search for the right plugin and feature yourself and if that doesn’t work, continue searching.
In this case it wasn’t as complicated as I feared in the beginning. I switched between two plugins since and am really happy with the latest.
Setting as the default syntax
- Open a
View, go to
Open all with current extension as...,
- and choose
WebStorm is the easiest one of all three. You simply activate ECMAScript 6 highlighting in the settings and you’re set. Go to
Languages & Frameworks ->
ECMAScript 6. You might also turn
Prefer Strict mode on, if you don’t have it already.