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

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!

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

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Release Announcements and tagged , , , , . Bookmark the permalink.

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

  1. sj says:

    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:

      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:

    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:

      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:

        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:

    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:

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

  4. Lush says:

    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:

      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:

    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.

  6. Martin says:

    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!

  7. Pablo Rodríguez says:

    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:

    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:

      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:

        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.

  9. MirekSz says:

    “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:

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

  11. Gor says:

    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:

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

      • Gor says:

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

        • lena_spb says:

          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.

Leave a Reply

Your email address will not be published. Required fields are marked *