WebStorm 2017.3.1 is now available

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

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.

9 Responses to WebStorm 2017.3.1 is now available

  1. David Gilbertson says:

    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:

      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:

      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:

    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.

  3. Samir says:

    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.

Leave a Reply

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