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.
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.
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.
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
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.
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!
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.
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
For anyone who doesn’t have a ‘Diagrams’ menu, it’s worth noting here that you need the ‘UML Support’ plugin enabled in Webstorm.
Hi JB,
Please, consider on adding the support for this -> http://markojs.com/
Please vote for this feature request on our tracker: https://youtrack.jetbrains.com/issue/WEB-20821
Done :)
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?
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!
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
As you’ve mentioned, it has been fixed in WebStorm 2017.1.1 EAP. Please give it a try: https://confluence.jetbrains.com/display/WI/WebStorm+EAP Sorry for the inconvenience.
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
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.
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
Language-specific formatting is not yet supported in .vue files. Please follow this issue for updates: https://youtrack.jetbrains.com/issue/WEB-25863
These soon will be an option to configure the font rendering inside the IDE bundled JDK. Please follow this issue: https://youtrack.jetbrains.com/issue/JRE-205
In version 2016 i have settings with Lucida Sans Typewriter. In 2017… i can’t found this font.
Hello,
is the “module dependency diagram” also available for angular modules or components?
Could not get it working!
cheers
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!