This week’s WebStorm 2017.2 EAP build (172.3198.20) is now available.
Now you can import some of the code style rules in ESLint configuration files to the IDE. In addition, we’ve improved how type info is shown in TypeScript and added an option to fold all one-line methods and functions in JavaScript and TypeScript.
You can install this WebStorm 2017.2 EAP build via Toolbox App or by downloading it on this page. It can be installed side-by-side with your stable WebStorm version. A patch update from the last week EAP build is also available.
Import code style from ESLint configuration
WebStorm now allows you to import ESLint code style rules (we matched 37 ESLint rules) to the IDE’s JavaScript code style settings.
Now if you open an .eslintrc JSON file or package.json with the eslintConfig field, you’ll see the question “Apply code style from ESLint?” at the top of the editor. Click Yes to apply the matched rules to the Project code style scheme.
Please note that only the rules that have matching code style settings in WebStorm are applied, for example, indent, curly or no-trailing-spaces. Complex object options for these rules are not always applied. WebStorm also does not apply rules from the configs listed in the “extends” field or rules from plugins.
We hope that this integration will make it easier to configure the WebStorm code formatter so that it no longer breaks properly formatted code from the ESLint perspective.
Showing type info in TypeScript
You can now see the inferred type for objects in TypeScript code if you hold Cmd on macOS or Ctrl on Windows and Linux and hover over them.
Folding for one-line methods and functions
To make code more compact but still readable, you can now enable folding for all one-line methods and function in JavaScript and TypeScript. To enable the folding, go to Preferences | Editor | General | Code Folding and select the “One-line functions in JavaScript and TypeScript” checkbox.
For the full list of issues addressed in this EAP build, see the Release notes.
Please report your feedback to our issue tracker. To get notifications of new EAP builds as they become available, subscribe to the EAP channel in Preferences | Appearance & Behavior | System Settings | Updates.
Your WebStorm Team
Will webstorm show inferred type info for flow code as well?
No, this improvement was for TypeScript only. You can see the type in Flow with the Expression type action. For showing types on Cmd/Ctrl-hover please submit a feature request on our tracker: https://youtrack.jetbrains.com/issues/WEB
Hi Ekaterina! will Webstorm support natively prettier.js?
No plans for that at the moment. We recommend to configure and use it as an External tool.
It seems that the eslint format feature doesn’t work with “.eslintrc.js” file format.
Will it be supported on the future, or there are no plans for that?
+1
There is an open issue about this in the webstorm youtrack:
https://youtrack.jetbrains.com/issue/WEB-27908
Will support for seeing inferred TypeScript types be made available in Rider?
The Rider team is adding features from the WebStorm TypeScript and JavaScript support one by one. So that should be at some point available in Rider, but it’s hard to say when exactly.
Ok thanks for the quick response!
This version is expired. Is it valid till 20th August. Not able to use it for more than 30 mins
The EAP builds are valid only for 30 days from the publication date. WebStorm 2017.2 stable has been released in July and you can download it from our website for a free 30-day evaluation.
When opening the ‘.eslintrc.json’, the question to apply ESLint’s code style did not show up.
It’s not mentioned in the article, but you can ‘right-click’ on the ‘.eslintrc.json’ or ‘package.json’ file and at the bottom there will be a button saying ‘Apply ESLint Code Style Rules’.
Hello Artur,
This blog post describes the behavior introduced in WebStorm 2017.2. Since then, we have enabled the auto-import of the code style options when you first open the project: https://www.jetbrains.com/help/webstorm/eslint.html#ws_js_linters_eslint_import_code_style_from_eslint
If you’ll change the options afterward, you’ll see the notification. And, as you’ve mentioned, the action is always available in the file context menu.