WebStorm 2017.2 released: Move symbol refactoring, import code style from ESLint, better webpack support, and more

Posted on by Ekaterina Prigara

Today we’re announcing WebStorm 2017.2  🎉

This big summer update adds powerful Move symbol refactoring, supports new code style options for JavaScript and TypeScript, improves testing with Karma and Mocha, and much more!

https://www.youtube.com/watch?v=XZTvUJqJvTY

Here’s what you can do with the top new features in WebStorm 2017.2:

  • Import code style from an ESLint configuration.
  • Run single Karma tests and generate code coverage reports for Mocha.
  • Take advantage of code completion in JavaScript that respects the project configuration stored in your webpack.config.js file.
  • Order code inside classes with the Rearrange code action.
  • See Parameter hints and inferred type info in TypeScript.
  • Build interfaces with support for Angular Material.
  • Enjoy better code completion and navigation for Sass selectors.
  • Scope styles for single components with support for CSS Modules.

Explore all the new features of WebStorm 2017.2 on our website.


Download WebStorm 2017.2

JetBrains WebStorm Team

Comments below can no longer be edited.

47 Responses to WebStorm 2017.2 released: Move symbol refactoring, import code style from ESLint, better webpack support, and more

  1. sj says:

    July 17, 2017

    The issue with tabs limit is still present even in the new release.
    Do you have an ETA? It is logged at https://youtrack.jetbrains.com/issue/IDEA-173369
    It is a really disruptive bug that ruins the workflow for people who keep a single tab open and there were hopes it would be fixed with the next release.
    Thank you in advance for you help.

    • Ekaterina Prigara says:

      July 17, 2017

      It’s going to be fixed in WebStorm 2017.2.1. The Early Preview build will probably be available next week. Sorry for the inconvenience.

  2. Yuri says:

    July 17, 2017

    I know there is Vue.Js support, and I know there is Post CSS support. However, I stumbled on combining the two. How do I make WebStorm understand that the tag in the .vue file, should be treated as post css, so nesting is legal and etc.

    • Ekaterina Prigara says:

      July 17, 2017

      Have you tried that in WebStorm 2017.2? To enable PostCSS support you can either set PostCSS as a dialect for stylesheets in Preferences | Languages & Frameworks | Stylesheets or add lang="postcss" attribute to the style tag. Make sure PostCSS plugin is installed and updated.

      • Yuri says:

        July 17, 2017

        Thanks, works now. I didn’t see that lang part documented, but I actually did guess to try it, it didn’t work so I assumed this feature doesn’t exist.
        However, it turns out, my problem was I had ‘type=”text/css” ‘ on the style tag, which for some reason stops this feature from working.

  3. Lush says:

    July 17, 2017

    With this newest update, the entire WebStorm window is MASSIVE!! All of my files, menu items, project trees, search boxes, etc – EVERYTHING – is sooooo annoyingly huge!

    What happened with this update? This is impossible to work with – everything on my screen is monumentally large, and changing font size or other settings relating to size does nothing.

    Is this a bug that will be fixed? Like immediately?

    • Ekaterina Prigara says:

      July 18, 2017

      Can you please try to set the font to default in Settings | Appearance & Behavior | Appearance – Override default font and restart the IDE. Thanks!

      • Ekaterina Prigara says:

        July 18, 2017

        If it doesn’t help, in the menu Help select Edit Custom VM Options and add -Dsun.java2d.uiScale.enabled=false
        Then restart the IDE.

        • Lush says:

          July 18, 2017

          Adding to the VM Options fixed it! Thank you very much!!

  4. Lush says:

    July 18, 2017

    I left a comment, and it looks like it was deleted by mods – don’t understand why, but I am leaving it again…

    With this newest update, the entire WebStorm window is MASSIVE!! All of my files, menu items, project trees, search boxes, etc – EVERYTHING – is sooooo annoyingly huge!

    What happened with this update? This is impossible to work with – everything on my screen is monumentally large, and changing font size or other settings relating to size does nothing.

    • Ekaterina Prigara says:

      July 18, 2017

      All new comments are approved by the moderators before they become visible. Both your comments are now live. I’ve left a reply for the first comment.

  5. Nazar says:

    July 18, 2017

    I had to rollback to https://download.jetbrains.com/webstorm/WebStorm-2017.1.4.dmg due to a bug in searching for css classes.

    When I select a class in an HTML file (i.e. class=”empty-list-here” with the selection being the text inside “, the Edit -> Find -> Find in path dialog does not come up.

    • Ekaterina Prigara says:

      July 18, 2017

      Sorry, we can’t reproduce it. Can you please share your IDE logs (menu Help – Show logs) with us. You can post a link here or report a new issue on our issue tracker: https://youtrack.jetbrains.com/issues/WEB
      Thanks!

      • Nazar says:

        July 19, 2017

        Thank you Ekaterina. I created WEB-27873 and attached my log file there.

        Hope it helps.

  6. Martin says:

    July 19, 2017

    Hey great work on the update!

    Does the Import auf ESLint Settings only work with .eslintrc files?
    ESLint allows it’s configuration file to be normal javascript and .eslintrc.js and I don’t get a prompt to import my ESLint settings.

    Thanks!

    • Ekaterina Prigara says:

      July 19, 2017

      Thanks!
      Sorry, it works only with .eslintrc in the JSON format. We can’t statically analyse a JavaScript configuration.

      • wube says:

        July 20, 2017

        @Ekaterina Prigara

        Is there any reason why you can’t use:
        eslint -c .eslintrc.js –print-config

        This command returns an eslint config parsed with eslint as JSON – which can by statically analysed.

        • Ekaterina Prigara says:

          July 20, 2017

          Thanks for the tip and for reporting an issue. Didn’t know about that.

    • wube says:

      July 20, 2017

      @Martin
      Yes. Only .eslintrc files are supported. And only rules present in the .eslintrc file. Extends are not supported.

    • zhenyong says:

      July 25, 2017

      You can write eslintrc.js in project and use eslint --print-file ./eslintrc.js to print whole static config and write to file .eslintrc.

      Here convenient gist code:

      https://gist.github.com/zhenyong/6303b2ccfb365c50ef16c0e48a86877e

  7. Pablo Rodríguez says:

    July 19, 2017

    The “Go to file” menu (Ctrl + Shift + N) is bugged for me on Ubuntu 16.04. It randomly disappears and it’s quite annoying. I’ll probably roll back until this is fixed.

  8. Mihail says:

    July 20, 2017

    I have a problem. When I try to do duplicate a line using Ctrl+D, I expect that there will be a duplicated line.
    So say console.log(“Hello World”); becomes

    console.log(“Hello World”);
    console.log(“Hello World”);

    Instead, I get taken to Compare With window which apparently has the same shortcut. When I tried to look this stuff up in the settings it had it showed me that it was still Ctrl+D! For Compare With it showed no shortcut at all! So can you update the shortcuts or fix this?

    • Ekaterina Prigara says:

      July 21, 2017

      This shortcut depends on the context: when the focus is on the editor, it duplicated the line, but when the focus is on the project view or on a navigation bar, it opens Compare with window.
      In the Settings | Keymap I see this shortcut assigned to the Compare files action for default Windows keymap. If you still want to remove the assignment, please try to make a new copy of the default keymap and modify it.

      • Mihail says:

        July 23, 2017

        It now gives Ctrl+D for both of them, but it still opens the compare with window regardless of where the cursor is located when I press the Ctrl+D key. And besides, I usually keep my sidebar closed because I have little use for it.

        • Ekaterina Prigara says:

          July 25, 2017

          As I’ve said, Ctrl-D is a default for both actions. Have you tried removing the assignment as I’ve suggested? Thanks!

          • Mihail says:

            August 12, 2017

            The bug has been fixed as of 2017.2.1. Thanks!

  9. MirekSz says:

    July 24, 2017

    “Parameter hints and type info in TypeScript” super cool but do you plan parameter hints could be also available in pure JS maybe with @JSDoc

  10. Daniel Miclos says:

    July 24, 2017

    is this still compatible with osx 10.10.5? I hangs on start after the update. I tested in two different macs.

    • Ekaterina Prigara says:

      July 25, 2017

      Java 8 that WebStorm uses is compatible with macOS 10.8.3 or above. We haven’t tested it with earlier macOS versions.

      • DANIEL MICLOS says:

        July 25, 2017

        Yes, great, but as I said, I’m using 10.10.5. And my Java is updated to the last release. I just tried and none of the IDEs works after updating. They hang when they are about to show the project windows.

  11. kaka says:

    August 7, 2017

    how do i turn these things off? https://drive.google.com/open?id=0B7Rg7l5e2Y3yaENVQlZ6QzhFbzg
    so messi

    • Ekaterina Prigara says:

      August 7, 2017

      You can disable Parameter hints in Preferences | Editor | General | Appearance – Show parameter name hints.

      • kaka says:

        August 8, 2017

        tks alot

  12. Gor says:

    August 10, 2017

    Using CTR+SHIFT+F10 is not picking the right testing configuration for my mocha files. It uses Karma and tries to run it in the browser, whereas I want it to run with my Mocha default configuration.
    Jasmine tests are fine.
    Used to work in 2017.1

    • Ekaterina Prigara says:

      August 10, 2017

      Do you have both karma and mocha listed in your project’s package.json file?

      • Gor says:

        August 10, 2017

        Yes, we have both jasmine and mocha tests at the moment.

        • lena_spb says:

          August 11, 2017

          The logic used for determining what test runner is available for a given test file is based on dependencies declarations in package.json nearest to the current test file.
          If you have a single package.json, with both 'karma' and 'mocha' dependencies included, and there is a karma config in your project, karma is preferred – see https://youtrack.jetbrains.com/issue/WEB-26070#comment=27-2088951. To force using Mocha test runner for files in a certain directory, create a Mocha run configuration with "Test directory" set to this directory.

  13. Tim says:

    October 3, 2017

    Hi folks I have a problem. In 2017.2 broken “Autoscroll from Source” in “Project” window.
    Working on MacOS Siera.
    I tried 2017.3 – it’s won’t work too. In 2017.1 everything is fine.

    • Ekaterina Prigara says:

      October 3, 2017

      Copying the reply from Twitter: “Haven’t reproduced it so far in WS2017.2.4 on macOS. It doesn’t work all the time, does it? Do you have any plugins installed?”