WebStorm 2017.1 EAP, 171.2822: Vue support, trailing comma, Dart improvements
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
Julian says:
February 2, 2017Absolutely amazing that Vue.js support. Thank you so much!
naveed says:
February 2, 2017Awesome! Thank you!
jbbr says:
February 2, 2017Thanks, Vue.js support is a great feature
winiex says:
February 2, 2017Great job! I’ve been waited for VueJS support for a long time. Now I can be more productive. 🙂
Uur says:
February 3, 2017vue.js support in ws, it sounds awesome, thank you guys.
Nikola Kostadinov says:
February 3, 2017Thanks for the Vue support ! Really needed this.
Ratish Mohan Ratusaria says:
February 5, 2017Awesome! What are the plans for its final release?
Ekaterina Prigara says:
February 6, 2017We 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.
yeatszhang says:
February 6, 2017Thanks for the Vue support ! Really needed this.
KS says:
February 9, 2017Love the Vue luv!
Michael Jason says:
February 15, 2017Vue.js support Awesome… Looking forward to improvements on this… Awesome again…
Lucas Silva says:
February 15, 2017Thanks for support Vue.js!
Marius says:
February 15, 2017Thank your for adding Vue.js support!
I assume this will also be included in IDEA, correct?
Ekaterina Prigara says:
February 15, 2017Yes, 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/
Paul says:
February 16, 2017Thanks so much for Vue.js support. That’s absolutely critical for anything I work on these days! Nicely done.
Hardy says:
February 17, 2017Thanks for adding support for Vue.js. Been waiting for this for a while.
Phil Wolstenholme says:
February 17, 2017Woohoo, Vue support — thanks!
Michael Harclerode says:
March 15, 2017A 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!
Pavel says:
March 17, 2017Thanks!
Will the vue syntax support be available in the PHPStorm?
Ekaterina Prigara says:
March 17, 2017Yes, the plugin is already available for PhpStorm 2017.1: https://plugins.jetbrains.com/plugin/9442-vue-js
Yasser Hussain says:
March 20, 2017I still don’t see any support for vue. I chose ES6 from Languages. What am I misssing?
Ekaterina Prigara says:
March 20, 2017Vue.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.
David Arutynyan says:
March 21, 2017What 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
Ekaterina Prigara says:
March 22, 2017Sorry, 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
David Arutynyan says:
March 22, 2017То 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 🙂
ibufu says:
March 22, 2017Hi, 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.
Ekaterina Prigara says:
March 22, 2017Sorry, I don’t see any code in your comment.
Please make sure you have
lang="sass"
attribute in your style tag.ibufu says:
March 23, 2017hi, Ekaterina! I am sure that I have lang=”sass” and rel=”stylesheet/scss” in my style tag. T_T
Ekaterina Prigara says:
March 23, 2017Then 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
Yazid Hanifi says:
April 18, 2017Was this fixed? I have the same problem
Ekaterina Prigara says:
April 18, 2017No, 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!
Gin says:
March 30, 2017when 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 ?
Ekaterina Prigara says:
March 30, 2017Can 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.
candyzheng says:
April 19, 2017There 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.
candyzheng says:
April 19, 2017here is the code i lost in the last comment.
“`js
“`
but when i use
“`js
“`
candyzheng says:
April 19, 2017i 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/
Ekaterina Prigara says:
April 19, 2017So 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!
me says:
August 31, 2017there’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”.
Ekaterina Prigara says:
August 31, 2017Sorry, 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.
Asher says:
August 31, 2017get 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.
Ekaterina Prigara says:
August 31, 2017Unfortunately, you can’t change icons. Only by making a custom plugin. But thank you for your feedback, we’ll think about changing it.
Tobias Vetter says:
January 21, 2018It looks like tslint does not work within vue files.
Ekaterina Prigara says:
January 22, 2018Does 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
bargan says:
May 30, 2018Hello,
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
Ekaterina Prigara says:
June 1, 2018Hello,
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!