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

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

Ekaterina Prigara

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

#React #WebStorm 2017.1
Comments below can no longer be edited.

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

  1. Mörre Noseshine says:

    February 23, 2017

    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.

    • Mörre Noseshine says:

      February 23, 2017

      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.

      • Mladen Petrovic says:

        April 28, 2017

        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:

          April 28, 2017

          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:

    February 23, 2017

    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:

    February 24, 2017

    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:

    February 26, 2017

    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:

    March 5, 2017

    Hi JB,

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

  6. Vadym Milichev says:

    March 7, 2017

    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:

      March 7, 2017

      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:

      April 2, 2017

      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:

    March 10, 2017

    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

    • Ekaterina Prigara says:

      March 10, 2017

      Are you on Linux? We’ve changed the font rendering a bit at the beginning of this EAP cycle to improve how fonts look on the low resolution screens.

      • Ahmed Sabry says:

        March 10, 2017

        Yes, I’m using ubuntu 16.04.
        The old font rendering was very good on 2016.3.4
        http://i.imgur.com/OeHrgQ4.png
        left is EAP
        It sounds that editor font is good, the problem with panels and interfaces.
        There is another problem in .vue files,
        the “pug” indent doesn’t being applied, it applies html indent.

        Thanks for reply

  8. NikolayKapushka says:

    March 13, 2017

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

  9. yatko says:

    March 21, 2017

    Hello,

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

    cheers

    • Ekaterina Prigara says:

      March 22, 2017

      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!

.NET Tools Guide

Latest Tweets

Related posts