WebStorm 2017.3.1 is now available

Posted on by Ekaterina Prigara

WebStorm 2017.3.1, the first bug-fix update for the recently released WebStorm 2017.3 is now available!

You can install this update using Toolbox App. If you’re using WebStorm 2017.3, 2017.3.1 EAP, or 2017.2.5, you will soon see an update notification in the IDE. If you are using an earlier WebStorm version, please download WebStorm 2017.3 from our website.

WebStorm 2017.3.1 brings not only the bug fixes but also includes a number of improvements.

Support for Fragments in React 16.2

WebStorm 2017.3.1 adds support for the new Fragment feature in React.
The editor now understands the new Fragment syntax that allows you to list children elements in the component’s render method surrounded by an empty tag or put into an array.

react-fragments

You will also get code completion for the new Fragment component.

Configurable code completion for JSX attributes

In the JSX attributes you can use expressions or string values, depending on what you use, you will either need {} or "" after the = sign.

When you select an attribute from the completion popup, WebStorm automatically adds ={} or =""  after the attribute name. At first, we added the symbols after the = sign depending on the prop type. We then switched to {} because of popular demand.

But in the end we decided to make it configurable: now you can decide which should be added by default after the = sign in JSX attributes in Preferences | Editor | Code Style | HTML.

code-style-jsx-attributes

Code highlighting for TypeScript decorators

TypeScript decorators are now highlighted with a different color than the other keywords making it easier to notice the definitions of Angular components. You can customize the syntax highlighting in Preferences | Editor | Color Scheme | TypeScript – Decorators.

typescript-decorators

Adding interpolation inside template strings

With the new option “Start template string interpolation on typing $” available in Preferences | Editor | Smart Keys, you can now select a word inside a template string and then press $ to transform it into expression interpolation.

interpolation-in-template-string

Snap package

WebStorm is now available as a snap package. If you’re on Ubuntu 16.04 or later, you can install WebStorm from the command line: sudo snap install webstorm --classic

What’s fixed in WebStorm 2017.3:

  • For the errors shown in the Flow tool window, you can now see the extended error message
  • React props now longer are marked as unresolved when using @types/react
  • Slow code completion for CSS classes in HTML files was fixed
  • Optimize imports now works in .vue files
  • Updating tasks from the issue trackers in the IDE now works again

You can find a full list of addressed issues in the Release Notes.

WebStorm Team

Comments below can no longer be edited.

11 Responses to WebStorm 2017.3.1 is now available

  1. David Gilbertson says:

    December 12, 2017

    I can’t get fragments working without an ESLint error. I know it’s not a WebStorm thing, but if you happen to know how, could you let me know?

    The app is an unejected create-react-app (a few days old)

    And I’ve got eslint 4.10.0 and babel-eslint 7.2.3.

    I have this in package.json:

    “eslintConfig”: {
    “extends”: “react-app”,
    “parser”: “babel-eslint”
    }

    And my code is in a stateless functional component returning this:

    return (

    {/* just nav stuff */}

    );

    It works if I use

    The error is:

    ESLint: Parsing error: Unexpected token

    51 |
    52 | return (
    > 53 |
    | ^
    54 |
    55 | {/* just nav stuff */}
    56 |

    • Ekaterina Prigara says:

      December 13, 2017

      No, sorry, we don’t know what the problem with ESLint is. The announcement in the React blog says that the syntax should be supported by ESLint and babel-eslint.

    • lena_spb says:

      December 13, 2017

      Looks like this is not a valid JSX – {/* */} comments can only be used within JSX markup, you can’t insert them before tags within return(); try using usual javaScript comment here instead

  2. Ahmed Abdel-Aziz says:

    December 16, 2017

    I have a large project, and since the update webstorm starts indexing for less than a second then stops/finishes then starts again, and it keeps going like this indefinitely.

    • Ekaterina Prigara says:

      December 18, 2017

      Can you please send the content of your IDE log folder (menu Help – Show logs) to our technical support https://intellij-support.jetbrains.com/hc/en-us/requests/new
      It seems that some error has happened that causes re-indexing. You may also try to invalidate the IDE caches with the Invalidate Caches / Restart action in the menu File.

  3. Samir says:

    December 19, 2017

    Any intentions on making debugging work for an Angular CLI 1.6+ project out of the box on Windows? I know about the workaround of running “ng eject” and editing a config. file to fix webpack absolute paths, but I was hoping this would no longer be necessary.

    • Ekaterina Prigara says:

      December 19, 2017

      There’s been a problem with debugging Angular CLI 1.5+ on all platforms (caused by changes in Angular CLI) that is going to be fixed in WebStorm 2017.3.3: https://youtrack.jetbrains.com/issue/WEB-30035
      Or do you mean that you had some problems with debugging the app on Windows before version 1.6 as well?

      • Samir says:

        December 19, 2017

        Thanks! I haven’t tested before CLI 1.5+, so I wouldn’t know. Do these WebStorm fixes also make their way into Rider?

        • Ekaterina Prigara says:

          December 20, 2017

          Yes, JavaScript debugger is the same in WebStorm and Rider.

  4. Brian Houle says:

    March 12, 2018

    Configurable code completion for JSX attributes

    It seems that the choice of braces or quotes is only respected when I tab-complete an existing attribute, but not for custom attributes.

    In React/JSX I commonly set custom attributes to pass values to the component. When I type in the attribute name, then type ‘=’, WebStorm immediately inserts a pair of curly braces {} and places the caret inside. It does this regardless of what is selected in the “Add for JSX attributes” setting. I would like to change this to a pair of quotation marks instead.

    Am I missing another setting, or is this working as intended?

    • Ekaterina Prigara says:

      March 14, 2018

      Hi Brian,
      Thank you for your comment. We’ve reproduced the problem and will address it as part of this issue: https://youtrack.jetbrains.com/issue/WEB-31288
      Unfortunately, there’s no workaround we can offer.