The WebStorm Blog

The Smartest JavaScript IDE

Early Access Program

WebStorm 2017.3 EAP, 173.2463: multiple JavaScript versions in project, ESLint improvements

Ekaterina Prigara

Please welcome the second EAP build of WebStorm 2017.3 (173.2463.22).

To get it, update via Toolbox App, or download it here and install side by side with your stable WebStorm version.

Download WebStorm 2017.3 EAP

We started the WebStorm 2017.3 Early Access Program last week. If you’ve missed the announcement, check out this blog post.

Here are the new features you can try in this week’s EAP build (173.2463.22).

Advanced import of ESLint code style rules
New Emmet syntax for JSX
Support for script-versions in Create React App
Using multiple JavaScript versions in a project
Improvements in CSS support
Align ‘from’ in import statements

Advanced import of ESLint code style rules

Previously, in WebStorm 2017.2, you could only import code style rules that were explicitly written in ESLint JSON configuration files.

Now, it’s also possible to apply rules from more complex configuration files written in JavaScript and YAML, as well as from configurations that use extends. To do so, use the action Apply ESLint code style rules, which is available in the context menu of the config file.

eslint-apply

WebStorm will send a special command to ESLint asking for a full summary of the applied rules in JSON. It will then parse the output and apply the rules to the IDE settings. You will see the list of applied rules in the IDE log.

eslint-log

Please note that this action requires ESLint to be installed in your project. It also means that the import won’t happen automatically, as it happens for the .eslintrc JSON configs.

New Emmet syntax for JSX

Now you can generate JSX tags with Emmet that will have text inside the tag or value in curly braces.

div{Title} will expand into the tag with the content Title, and div{{title}} will expand into the tag with title in the curly braces.

emmet-in-jsx

By the way, the tag{} syntax can also be very useful in HTML and other template files.

Support for script-versions in Create React App

It’s possible to generate a new React app using create-react-app from the IDE Welcome screen (click Create New Project and select React App in the list on the left). Now when you do this, you can customize your app and specify the name of the package to be used instead of react-scripts. This name will be passed to create-react-app after the –scripts-version tag.

cra-with-scripts

Now it is also possible to run and debug Jest tests in the IDE when using the alternative react-scripts version. Specify the path to this package in the Jest run/debug configuration (for example, the react-script-ts, react-super-scripts or react-awesome-scripts packages).

jest-scripts-conf

Using multiple JavaScript versions in a project

If you’re working on a JavaScript project that uses both ECMAScript 5.1 and newer ECMAScript version or JSX or Flow, you now have two options for how to configure it in WebStorm.

The easiest option is to enable the highest language version for the whole project in Preferences | Languages and Frameworks | JavaScript. For example, if you use ES5.1 and JSX, enable JSX (since it’s a superset of ES5.1 and ES6).

Now you can also configure different JavaScript language versions for different folders. Click the … button next to the drop-down with the version, then select a folder and the language version used for its files. The version specified on the main settings page will be applied by default for all other JavaScript files in the project.

js-versions

Improvements in CSS support

We’ve improved the way the IDE provides code completion for CSS properties and their values. Thanks to these changes, WebStorm now shows code completion suggestions for the values of transform, transition and pointer-events properties that were missing before.

css-transform

Align ‘from’ in import statements

With the new code style option Align ‘from’ clauses, imports in JavaScript and TypeScript files will be aligned as follows when you reformat the code:

align-imports

You can find and enable this option in Preferences | Editor | Code Style | JavaScript or TypeScript – Wrapping and Braces – ES6 import/export – Align ‘from’ clauses.

Support for Optional Chaining ES proposal

WebStorm adds support for the Optional Chaining proposal to the ECMAScript standard, which is now at stage 1 but already supported by Babel. This means that WebStorm will now understand this new syntax.

optional-chaining

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

Please share your feedback and report issues on our tracker. Thank you!

WebStorm Team

WebStorm 2017.3 Early Access Preview: new and improved refactorings, better Vue.js support, new REST Client Debugging Node.js Apps in WebStorm

Comments below can no longer be edited.

16 Responses to WebStorm 2017.3 EAP, 173.2463: multiple JavaScript versions in project, ESLint improvements

Sergey Samokhov says:
September 21, 2017
Will it be possible to configure Emmet to use React CSS Modules’ `styleName` instead of `className`?
- Ekaterina Prigara says:
  September 22, 2017
  No, sorry, it’s not possible to configure that. We now have the standard Emmet templates hardcoded with this small exception for JSX. Please vote for and follow this issue: https://youtrack.jetbrains.com/issue/WEB-28691
  - Sergey Samokhov says:
    September 22, 2017
    Done, thank you!
Surafel Defar says:
September 21, 2017
Great improvements. Talking about eslint, has https://youtrack.jetbrains.com/issue/WEB-25697#tab=Comments&u=1488307660071 been fixed, it used to work on webstorm 2016 version of webstorm
- Ekaterina Prigara says:
  September 22, 2017
  Thanks!
  Please have a look at my new comment in the issue: https://youtrack.jetbrains.com/issue/WEB-25697
Ihor Halchevskyi says:
September 26, 2017
Hi Ekaterina,
Is Mocha –watch option support included in this EAP?
Is TypeScript allowJS support for JS typings included in this EAP?

Thanks
- Ekaterina Prigara says:
  October 2, 2017
  Hello,
  Sorry, I’m not sure I understand what you mean by Mocha –watch support.
  allowJS option is supported in the latest EAP build.
  - Ihor Halchevskyi says:
    October 2, 2017
    Hi Ekaterina,
    I was asking about *Mocha –watch support* https://youtrack.jetbrains.com/issue/WEB-11104
    But now it is in EAP
    - Ekaterina Prigara says:
      October 2, 2017
      It will be available in the EAP build released later this week.
Justin R says:
September 27, 2017
I updated but every time I open webstorm it tells me to install the same update. bug???

I checked if I had the features above and I do so i’m not sure whats going on.
- Ekaterina Prigara says:
  October 2, 2017
  Can you please check the version you have currently installed on the IDE About screen.
  Please also check if you have any update errors in the log files (menu Help – Show logs) and if yes, please send them to our tracker: youtrack.jetbrains.com/issues/WEB
  In the meantime, you can download and install an EAP build side-by-side with your stable WebStorm version.
  Thank you!
Daniel says:
March 6, 2018
Will “Using multiple JavaScript versions in a project” support come to IntelliJ as well? It doesn’t appear to be supported (at least in the same way).
- Ekaterina Prigara says:
  March 7, 2018
  Hello Daniel,
  It should work the same way in IntelliJ IDEA Ultimate 2017.3 as described in this blog post. What IJ version do you use?
  - Dan says:
    March 7, 2018
    Thanks Ekaterina! I thought I had been keeping updated, but I was on 2017.2.* still. Updated, and fixed.
Frank says:
July 9, 2019
Why does not Optional Chaining work?
- Ekaterina Prigara says:
  July 10, 2019
  Hello Frank, please see a reply from my colleague here: https://youtrack.jetbrains.com/issue/WEB-27592#focus=streamItem-27-3563288.0-0