Webstorm Add *.vue File code reminder support Webstorm support ES6 notation in Es6vue

This article transferred from: http://www.lred.me/2016/01/07/webstorm%E6%B7%BB%E5%8A%A0-vue%E6%96%87%E4%BB%B6%E6%94%AF%E6%8C%81/ Webstorm is the front-end development artifact, but I have never liked Webstorm, because of that very lame color and the big cursor.

The Vuejs began to play, in Vue, the. Vue file can be implemented as a component, but the various editors do not support it, and the author has developed the relevant Vue plugin for sublime. I think with sublime is a waste of life ah, spend so much time to install plug-in environment, I choose ide!
Insist on using sublime to write one months of Vue, no smart tips (and the heavy dependency hint), can not format the code, manual indentation, a little, can persist so long is not easy. So toss the next webstorm see how support, so there is this note.

Vue Support

Open Settings = File Types Find HTML Add *.vue

This way the Vue file is equivalent to an HTML file, you can edit the Css,js, and there are smart hints.
I usually use ES6, so vue write es6 code, Webstorm still will error.

Vue ES6 Support

Add a script tag type= "ES6" property

1 2	<type="ES6" > </script>

Then open Settings = Language injections Add XML Tag injection, content such as.

*.js Support ES6

Webstorm default JS file is ES5 syntax
Open Settings = Languages & frameworks = Javascript
Change Javascript Language version to ECMAScript 6

PS: In the Vue file to write sass,stylus such as CSS preprocessing, Webstorm will not support, I also tried to add injection, code highlighting normal, but it is temporary, as long as a change of code, will draw a lot of red, after Google, This seems to be a known bug for Webstorm.

Webstorm Add *.vue File code reminder support Webstorm support ES6 notation in Es6vue