Blog Blog
Home
Home/WebStorm/WebStorm 2017.2 EAP, 172.3198: apply styles from ESLint, TypeScript type info

WebStorm 2017.2 EAP, 172.3198: apply styles from ESLint, TypeScript type info

Posted on by Ekaterina Prigara

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.

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

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.

import-eslint

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.

show-type

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.

fold-one-line-method

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

#eslint #typescript #WebStorm 2017.2
Comments below can no longer be edited.

14 Responses to WebStorm 2017.2 EAP, 172.3198: apply styles from ESLint, TypeScript type info

  1. Daniel says:

    June 30, 2017

    Will webstorm show inferred type info for flow code as well?

    • Ekaterina Prigara says:

      June 30, 2017

      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

  2. Jesus Garcia Gonzalez says:

    July 14, 2017

    Hi Ekaterina! will Webstorm support natively prettier.js?

    • Ekaterina Prigara says:

      July 14, 2017

      No plans for that at the moment. We recommend to configure and use it as an External tool.

  3. Lucas says:

    July 19, 2017

    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?

  4. Andy says:

    August 17, 2017

    Will support for seeing inferred TypeScript types be made available in Rider?

    • Ekaterina Prigara says:

      August 17, 2017

      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.

      • Andy says:

        August 17, 2017

        Ok thanks for the quick response!

  5. Harpreet Singh says:

    August 23, 2017

    This version is expired. Is it valid till 20th August. Not able to use it for more than 30 mins

    • Ekaterina Prigara says:

      August 24, 2017

      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.

  6. Artur Zubilewicz says:

    July 4, 2019

    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’.

Latest Tweets

Related posts