ES6 support in <script> block

[probil]

I have configured ES6 as default JavaScript version, but when I use ES6 syntax inside <script> block WebStorm lint me "error syntax".

Do you have the same issue? Maybe, this could be fixed by this plugin? There is no such issue when I use arrow function inside *.js files

[agileago]

@probil you can add type="text/babel" to solve it

[probil]

@agileago Thanks for the advice! Work as expected now.

So, maybe vue-for-idea should add it automatically on File > New > Vue Component?

[springeye]

@probil new version is supported

[probil]

After plugin update I have created new Vue File.

And I don't see type="text/babel in script tag. So, ES6 syntax still not working. There is also error in code.

[springeye]

@probil ES6 the problem may be in the next period of time to be able to deal with. Because at the moment I am not very well aware of the idea plug-in development and syntax analysis. In the learning...

[richarddewit]

@probil - Default it's ES5, if you want to use ES6 you'd have to put type="text/babel there yourself.

@henjue - would be nice if people could choose which type of script/css/template they want by default in the settings

Example (dropdowns): Preferences -> Languages & Frameworks -> Vue

                           ________________
                           |          |   |
Default stylesheet type:   | CSS      | v |
                           |__________|___|
                           |          |
                           | - SASS   |
                           | - Stylus |
                           | - Less   |
                           |__________|

                           ________________________
                           |                  |   |
Default script type:       | JavaScript (ES5) | v |
                           |__________________|___|
                           |                  |
                           | - CoffeeScript   |
                           | - ES6/Babel      |
                           | - TypeScript     |
                           |__________________|

                           ____________________
                           |              |   |
Default template type:     | HTML         | v |
                           |______________|___|
                           |              |
                           | - Jade       |
                           | - Handlebars |
                           |______________|

[springeye]

@richarddewit I want to according to Lang, and then deal with the code in tag

[JoshZA]

:+1: for dropdowns

[exotfboy]

Hi,, event I add the type = text/babel, idea can not recognize the arrow function in the .vue file:

However, in a pure .js script, the arrow function can be recognized:

What's going on ?

[probil]

@exotfboy What JetBrains IDE do you use? WebStorm/PhpStorm/IntelliJ IDEA? Could you upload example somewhere?

[agileago]

@probil now webstorm eap 12 support inline sass/less . like this

it is great!

[luwenjin]

@henjue According to lang will be best. es6/coffeescript/less/scss all have workarounds. but <template lang="jade"> has no way to trigger syntax highlight.

[springeye]

Please update version to 1.0.7 1.0.7 support LESS,SASS,SCSS,Stylus,CSS,ES6,CoffeeScript,JavaScript

[szkrd]

No, it doesn't work here either. Webstorm 11.0.4

[probil]

Yeah. Plugin works strange. So, I have deleted it and use type="text/babel" instead. :disappointed: Plugin rather confuses than helps.

[springeye]

Do not use the type attribute, use the lang,about vue-loader see http://vue-loader.vuejs.org/en/index.html

[szkrd]

Maybe I'm still missing something. Could you attach a screenshot with your settings and fat arrows not underlined? It would be really helpful! Vue-loader is 8.3.0, thank you!

[springeye]

@szkrd use lang="javascript",not use "text/javascript",see http://vue-loader.vuejs.org/en/index.html

[szkrd]

Unfortunately that didn't help :(

[rockxsj]

@szkrd I have the same problem :(

[wafs]

@szkrd @rockxsj @henjue The way to get es6 working is not lang="javascript", but in fact lang="babel" (not sure why this works over your official word of mouth though!)

http://stackoverflow.com/a/38141782

[szkrd]

@wafs you are my hero

[rockxsj]

@wafs thanks! upgrade webstorm to 2016.2,the bug has fixed. 👍