WebStorm 2017.1 EAP, 171.3566: module dependency diagram, auto imports for React components

A new Early Access Preview build for WebStorm 2017.1 (171.3566) is available! Please download it here. You can install it side-by-side with your current stable WebStorm version. Or if you have the previous EAP build from the last week, you should soon get a notification in the IDE about an available patch update.

Auto import for React components

WebStorm now suggests you code completion for React components defined in the app (excluding stateless components) and automatically adds an import statement for them.

auto-import-react

In addition to that WebStorm warns you if you’re using JSX in your file, but forgot to import React. The warning is shown for a first JSX tag in this file. Hit Alt-Enter on it and select Insert import * as React from ‘react’.

Module dependency diagram

You can now visualize the module dependencies a file or a folder has. To do that right-click on a file or a directory in the project view or in the editor and select Diagrams – Show diagram.

dependency-diagram

From the diagram you can navigate to the depended file – right-click on the file and select Jump to source.

Updated Find in path dialog

The Find in path dialog has been updated – it became much simpler and it now shows search results and their preview instantly.

find-in-path

You can find the full list of issues addressed in this EAP build in the Release notes.

Learn more about other new features in WebStorm 2017.1:

  • WebStorm 2017.1 EAP, 171.1834: Run Mocha tests with the gutter icon; The test status is now shown right next to the test; Integration with the Angular language service; Linters are now detected and enabled by default for the new projects; Support for emoji in the editor; Zero-latency typing is now enabled by default.
  • WebStorm 2017.1 EAP, 171.2014: New intentions that convert forEach and for..in iterations over arrays to for..of; Code style options for quotes and ternary operators; New inspection Equality operator may cause type coercion.
  • WebStorm 2017.1 EAP, 171.2271: Standard code style; Completion in package.json.
  • WebStorm 2017.1 EAP, 171.2455: Improved integration with TSLint; Code style options for the use of semicolons in JavaScript and TypeScript.
  • WebStorm 2017.1 EAP, 171.2822: Initial support for Vue;  Code style options for trailing commas in JavaScript and TypeScript; Improvements in Dart support.
  • WebStorm 2017.1 EAP, 171.3224: Completion and navigation for Vue components; Improved integration with ESLint; Wrap variable declaration with single var.

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

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 Early Access Preview and tagged , . Bookmark the permalink.

21 Responses to WebStorm 2017.1 EAP, 171.3566: module dependency diagram, auto imports for React components

  1. Now I just wish that I would get at least an occasional update on ticket status. I have ~40 open issues, I’m going through all of them right now to verify if they still exist (most do). Among them sich highlights (that point to deeper trouble) like that I still get hundreds of autocompletion suggestions when I have nothing but module.exports.<> in an empty (node.js) file, when that is an empty object.

    • The forum swallowed some text. After “module.exports.” I meant that you should press CTRL-SPACE to get the list of suggestions, which instead of being for an empty object lists hundreds of non-existent options. This all is part of a deeper problem that WebStorm picks up properties in the weirdest and clearly impossible places, even in code that isn’t even included.

      • Autocomplete seems to be the least updated feature and its one of the most used ones.
        I have the same problem of having totally unrelated suggestions for autocomplete.

        • Ekaterina Prigara says:

          Would appreciate your more detailed reports on the issues you’re having with autocompletion. Here’s a link to our tracker:youtrack.jetbrains.com/issues/WEB Thank you!

  2. Mutt Dolemite says:

    The new module visualization tool is amazing and well designed. The various layouts and ability to generate at large scale is impressive. This feature definitely helps in team collaboration.

    Perhaps a detailed class view related to the Visibility Level would offer additional class details such as public methods and properties.

  3. Irina Chernushina says:

    Hello Mutt, thank you for the nice words!
    Indeed, currently we show only imported/exported members of the selected files (and only those exports that are used by some of the selected files)
    I have created a feature request for that: https://youtrack.jetbrains.com/issue/WEB-25615

  4. Chris Harris says:

    For anyone who doesn’t have a ‘Diagrams’ menu, it’s worth noting here that you need the ‘UML Support’ plugin enabled in Webstorm.

  5. Yehor Sergeenko says:

    Hi JB,

    Please, consider on adding the support for this -> http://markojs.com/

  6. Vadym Milichev says:

    I don’t know why EAP is slow as hell working with TypeScript. Ctrl+Space causes max CPU load, adding import makes it hang for almost a minute! The old 16.3 with the same settings works fine. Should I add any details?

    • Ekaterina Prigara says:

      Yes, please report an issue on our issue tracker and attach the content of your log folder (menu Help – Show logs). A CPU snapshot (menu Tools – Start a CPU usage profiling) captured when these slow-downs happen would also be helpful. Thanks!

    • Michael Klein says:

      Same problem here. 2017.1 is unusable with TypeScript. It randomly freezes for minutes at a time, whereas 2016.3.5 has no problem. Disabling Angular Service seemed to make it slightly better but still near unusable due to random freezing.

      Luckily it looks like this is mostly fixed in the current EAP, 2017.1.1… Let’s hope this gets officially released soon, since this issue is a showstopper for anyone using TypeScript.

      https://youtrack.jetbrains.com/issue/WEB-25450

  7. Ahmed Sabry says:

    Great work!
    There is a slight different in font rendering, I downloaded this eap build and don’t know if it is exists on previous eap build or not.
    http://i.imgur.com/5vBeVOq.png

  8. NikolayKapushka says:

    In version 2016 i have settings with Lucida Sans Typewriter. In 2017… i can’t found this font.

  9. yatko says:

    Hello,

    is the “module dependency diagram” also available for angular modules or components?
    Could not get it working!

    cheers

    • Ekaterina Prigara says:

      This diagram doesn’t provide any AngularJS-specific information other than showing the list of modules your module depends on. There’s an AngularJS-specific diagram showing states for apps that use ui-router.
      Please submit a feature request if you’d like to have a diagram for AngularJS components. Here’s a link to our issue tracker: https://youtrack.jetbrains.com/issues/WEB
      Thanks!

Leave a Reply

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