Blog Blog
Home
Home/WebStorm/WebStorm 2017.1 EAP, 171.2822: Vue support, trailing comma, Dart improvements

WebStorm 2017.1 EAP, 171.2822: Vue support, trailing comma, Dart improvements

Ekaterina Prigara

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.

vue-style

Support for the Vue template syntax.
You can get completion for the Vue directives in templates.

vue-directive

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.

trailing-comma

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

#Dart #Vue #WebStorm 2017.1
Comments below can no longer be edited.

45 Responses to WebStorm 2017.1 EAP, 171.2822: Vue support, trailing comma, Dart improvements

  1. Julian says:

    February 2, 2017

    Absolutely amazing that Vue.js support. Thank you so much!

  2. naveed says:

    February 2, 2017

    Awesome! Thank you!

  3. jbbr says:

    February 2, 2017

    Thanks, Vue.js support is a great feature

  4. winiex says:

    February 2, 2017

    Great job! I’ve been waited for VueJS support for a long time. Now I can be more productive. 🙂

  5. Uur says:

    February 3, 2017

    vue.js support in ws, it sounds awesome, thank you guys.

  6. Nikola Kostadinov says:

    February 3, 2017

    Thanks for the Vue support ! Really needed this.

  7. Ratish Mohan Ratusaria says:

    February 5, 2017

    Awesome! What are the plans for its final release?

    • Ekaterina Prigara says:

      February 6, 2017

      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.

  8. yeatszhang says:

    February 6, 2017

    Thanks for the Vue support ! Really needed this.

  9. KS says:

    February 9, 2017

    Love the Vue luv!

  10. Michael Jason says:

    February 15, 2017

    Vue.js support Awesome… Looking forward to improvements on this… Awesome again…

  11. Lucas Silva says:

    February 15, 2017

    Thanks for support Vue.js!

  12. Marius says:

    February 15, 2017

    Thank your for adding Vue.js support!
    I assume this will also be included in IDEA, correct?

    • Ekaterina Prigara says:

      February 15, 2017

      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/

  13. Paul says:

    February 16, 2017

    Thanks so much for Vue.js support. That’s absolutely critical for anything I work on these days! Nicely done.

  14. Hardy says:

    February 17, 2017

    Thanks for adding support for Vue.js. Been waiting for this for a while.

  15. Phil Wolstenholme says:

    February 17, 2017

    Woohoo, Vue support — thanks!

  16. Michael Harclerode says:

    March 15, 2017

    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!

  17. Pavel says:

    March 17, 2017

    Thanks!
    Will the vue syntax support be available in the PHPStorm?

  18. Yasser Hussain says:

    March 20, 2017

    I still don’t see any support for vue. I chose ES6 from Languages. What am I misssing?

    • Ekaterina Prigara says:

      March 20, 2017

      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.

  19. David Arutynyan says:

    March 21, 2017

    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

    • Ekaterina Prigara says:

      March 22, 2017

      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

      • 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 🙂

  20. ibufu says:

    March 22, 2017

    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.

    • Ekaterina Prigara says:

      March 22, 2017

      Sorry, 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, 2017

        hi, Ekaterina! I am sure that I have lang=”sass” and rel=”stylesheet/scss” in my style tag. T_T

        • Ekaterina Prigara says:

          March 23, 2017

          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

          • Yazid Hanifi says:

            April 18, 2017

            Was this fixed? I have the same problem

            • Ekaterina Prigara says:

              April 18, 2017

              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!

  21. Gin says:

    March 30, 2017

    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 ?

    • Ekaterina Prigara says:

      March 30, 2017

      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.

  22. candyzheng says:

    April 19, 2017

    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.

    • candyzheng says:

      April 19, 2017

      here is the code i lost in the last comment.

      “`js

      “`
      but when i use
      “`js

      “`

    • Ekaterina Prigara says:

      April 19, 2017

      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!

  23. me says:

    August 31, 2017

    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”.

    • Ekaterina Prigara says:

      August 31, 2017

      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.

      • Asher says:

        August 31, 2017

        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.

        • Ekaterina Prigara says:

          August 31, 2017

          Unfortunately, you can’t change icons. Only by making a custom plugin. But thank you for your feedback, we’ll think about changing it.

  24. Tobias Vetter says:

    January 21, 2018

    It looks like tslint does not work within vue files.

  25. bargan says:

    May 30, 2018

    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

    • Ekaterina Prigara says:

      June 1, 2018

      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!

.NET Tools Guide

Latest Tweets

Related posts