A new Early Access Preview build for WebStorm 2017.1 (171.2822.13) is now available! You can download it here and install it side-by-side with your current stable WebStorm version, or if you have the previous EAP build, you should soon get a notification in the IDE about a patch update.
Initial support for Vue
We’re glad to announce that we are working on Vue.js support in WebStorm (and the plugin is open source, so you’re welcome to contribute). Here’s what you can already try:
Support for script, style and template blocks in .vue files.
You’ll have code completion for ECMAScript 6 by default inside script block and CSS inside style block. WebStorm understands lang attribute inside these tags and allows you to use TypeScript, Pug and CSS-preprocessors instead.
Support for the Vue template syntax.
You can get completion for the Vue directives in templates.
Trailing commas in JavaScript and TypeScript
You can now configure whether you’d like to use trailing commas in objects, arrays and for the parameters in method definitions and calls. You can find this code style option under Preferences | Editor | Code Style – JavaScript or TypeScript – Other.
In addition to that we also added a new code style scheme compatible with the Google JavaScript code style. You can select it for your project in Preferences | Editor | Code Style – JavaScript – Set from – Predefined code style – Google JavaScript Style Guide.
Improvements in Dart support
With WebStorm 2017.1 you can now debug Dart VM tests. To start debugging simply right-click on a test folder, a test suite or an individual test in the source code and select Debug.
It is also now possible to configure Dart SDK path for each individual project.
You can find the full list of issues addressed in this EAP build in the Release notes.
Learn more about other new features in WebStorm 2017.1:
- WebStorm 2017.1 EAP, 171.1834: Run Mocha tests with the gutter icon; The test status is now shown right next to the test; Integration with the Angular language service; Linters are now detected and enabled by default for the new projects; Support for emoji in the editor; Zero-latency typing is now enabled by default.
- WebStorm 2017.1 EAP, 171.2014: New intentions that convert forEach and for..in iterations over arrays to for..of; Code style options for quotes and ternary operators; New inspection Equality operator may cause type coercion.
- WebStorm 2017.1 EAP, 171.2271: Standard code style; Completion in package.json.
- WebStorm 2017.1 EAP, 171.2455: Improved integration with TSLint; Code style options for the use of semicolons in JavaScript and TypeScript.
Please report your feedback to our issue tracker. To get notifications of new EAP builds as they become available, subscribe to the EAP channel in Preferences | Appearance & Behavior | System Settings | Updates.
Your WebStorm Team
Absolutely amazing that Vue.js support. Thank you so much!
Awesome! Thank you!
Thanks, Vue.js support is a great feature
Great job! I’ve been waited for VueJS support for a long time. Now I can be more productive. :)
vue.js support in ws, it sounds awesome, thank you guys.
Thanks for the Vue support ! Really needed this.
Awesome! What are the plans for its final release?
We are planning to release WebStorm 2017.1 at the end of March. We hope to add more features to the Vue support by that time.
Thanks for the Vue support ! Really needed this.
Love the Vue luv!
Vue.js support Awesome… Looking forward to improvements on this… Awesome again…
Thanks for support Vue.js!
Thank your for adding Vue.js support!
I assume this will also be included in IDEA, correct?
Yes, you can install a JetBrains plugin for Vue support via Preferences | Plugins. Note that the plugin works only with IntelliJ IDEA 2017.1 EAP that you can download here: https://www.jetbrains.com/idea/nextversion/
Thanks so much for Vue.js support. That’s absolutely critical for anything I work on these days! Nicely done.
Thanks for adding support for Vue.js. Been waiting for this for a while.
Woohoo, Vue support — thanks!
A big THANK YOU to the JetBrains team for putting the investment and work in for Vue support. Vue is an incredible framework and will be our primary – fantastic to have IDE support baked in!
Thanks!
Will the vue syntax support be available in the PHPStorm?
Yes, the plugin is already available for PhpStorm 2017.1: https://plugins.jetbrains.com/plugin/9442-vue-js
I still don’t see any support for vue. I chose ES6 from Languages. What am I misssing?
Vue.js support is available only in WebStorm 2017.1 that you can download here: https://www.jetbrains.com/webstorm/whatsnew/
In .vue file WebStorm will recognise template, script and style blocks and provide coding assistance to the corresponding languages within them.
What the hack with vue.js support?
See example please: http://imgur.com/a/MuzqI
And docs example: http://imgur.com/a/rwVLR
It doesn’t recognize :duration expression for example, also vue attributes
Sorry, we haven’t yet supported features of Vue.js 2.2. Here’s an issue that you can follow: https://youtrack.jetbrains.com/issue/WEB-26088
То make clear, it’s not a problem of vue transitions! When you write like that http://imgur.com/a/RwEd2 you want to pass an object without initialization. It’s like doing that http://imgur.com/a/zjh77 in javascript, the whole syntax is incorrect. The solution can be found in doing like that http://imgur.com/a/wSPPW, but I it’s not code-style based approach. So please take a look in that problem :)
Hi, I am using Webstorm 2017.1.
And it is my code below:
But, it seem to Webstorm still can’t support SASS in .vue file.
Sorry, I don’t see any code in your comment.
Please make sure you have
lang="sass"attribute in your style tag.hi, Ekaterina! I am sure that I have lang=”sass” and rel=”stylesheet/scss” in my style tag. T_T
Then please send us your file, a screenshot showing the errors and information about the IDE build number (you can find it on the IDE about screen) to https://youtrack.jetbrains.com/issues/WEB
Was this fixed? I have the same problem
No, sorry, we were not able to reproduce the issue with the information provided in the comment. Please send us a screenshot showing an issue, your file and WebStorm build number you use to https://youtrack.jetbrains.com/issues/WEB
Thanks!
when I use this version’s webstorm to do some vue.js work, there is a file named as Navbar.vue, and webstorm only recognize it as “file” type, not like the others as “html” type or “vue” type, so that I can’t use grammer detectors in it.
Is this the only problem of me ?
Can you please check that this file is not listed in the ignore list in Preferences | Editor | File types or not associated with the Text file type.
There is a problem!
when i use vue plugin, there are some conflicts i think which is related to this plugin,like this.
it throw an webstorm editorconfig error ‘expecting newline or semicolon’,i think vue plugin considered it as a vue template data obj.
but when i use
the problem just gone
you can see the code change here “‘支持案由、法院、部门、法官检索'”,and i think vue plugin considered it as a string but not a vue template data obj.
I found input node value attribute has the same problem
but this problem dose not happen in class attribute and some other html attributes.
here is the code i lost in the last comment.
jsbut when i use
jsi am sorry that i didn’t know how to comment with my code ,so you can click to this link.
http://blog.suzper.com/2017/04/19/webstorm-problem-%E4%B8%B4%E6%97%B6/
So far we were not able to reproduce the problem in WebStorm 2017.1.1.
There’s been an issue addressed in WebStorm 2017.1.1 that might be related to the problem you have: https://youtrack.jetbrains.com/issue/WEB-26092
What WebStorm version do you currently use?
If the problem is not fixed for you with the update to v2017.1.1, please send us a screenshot showing the error that you see in the editor – hover on the error so that the tooltip is shown or hit Alt-Enter on the error.
Here’s a link to out issue tracker: https://youtrack.jetbrains.com/issues/WEB
Thank you!
there’s something deficiency，for example，I can’t create a new vue file(*.vue) with Right Click Menus，We hope “WebStorm” can surrport that，thank you，very like the “WebStorm”.
Sorry, we don’t have file templates for all languages WebStorm supports, but it’s very easy to add your custom file templates that will be available in this list – just select Edit File Templates in this popup and then add a template.
get it, thank you very much. How can I change the Icon of the “*.vue” file, I think use the Vue’s Icon will be better than the Html’s Icon.
Unfortunately, you can’t change icons. Only by making a custom plugin. But thank you for your feedback, we’ll think about changing it.
It looks like tslint does not work within vue files.
Does TSLint work correctly in the command line for you? It seems that TSLint doesn’t support Vue out of the box: https://github.com/palantir/tslint/issues/2099
Hello,
I have experienced recently a phpStorm crash, I had to restart it but all my settings were lost (luckily I had saved previously the settings).
The main problem that I have right now is that I have lost some useful features for vue files:
1) autocomplete
2) auto-comment(ctrl+ /) is adding HTML comment even if I am using for CSS or javascript
3) auto indent key combination
Basically, the .vue extension is not recognized as before!
P.S I have uninstalled and install the vue plugin.
Thank you
Hello,
Please check that you have installed the right plugin – there are two Vue plugins in our plugin repository right one – one developed by JetBrains and another developed by a third-party. You can check the vendor in Preferences | Plugins.
Another thing to do is to check that .vue file extension is not associated with the wrong file type, e.g. Text in Preferences | Editor | File Types.
Hope it helps!