Early Access Program

WebStorm 2018.1 EAP, 181.3494: redesigned documentation popup, configuration for package manager, VCS improvements

The new WebStorm 2018.1 Early Preview build (181.3494.18) is now available!

You can update via Toolbox App, or download the build here and install it beside your stable WebStorm version.

Download WebStorm 2018.1 EAP

To learn more about all the new features added in earlier WebStorm 2018.1 EAP builds, please check out these blog posts.

Redesigned documentation

We are happy to present to you the new look for the documentation popup.

With this redesign we wanted to make the documentation more compact, lightweight, and easy to read. We also wanted to make sure that the information in it is presented in a clear and consistent way.

new-documentation-popup-in-20181

The new popup has been enabled for all languages, but in terms of its content, so far, we have mostly focused on the docs for JavaScript and TypeScript. In the future we hope to bring the fully updated documentation view to all the languages. 

We also haven’t fully finished the work on showing docs for methods with several definitions, but we hope to have it ready in the next couple of weeks.

The first change we decided to make to the new documentation popup was to get rid of the header and toolbar. The information in the header was repeating the method name that was also shown in the documentation itself. And the icons on the toolbar were disabled most of the time. We decided to put all the actions under the settings icon in the bottom right corner of the popup.

Documentation popup in WebStorm 2018.1
doc-popup-in-ws-20181

Documentation popup in WebStorm 2017.3
doc-popup-in-ws-20173

In the tool window view for the documentation, we merged the toolbar with the header and now only show the actions that are currently available. For example, if you haven’t navigated to any other documentation page using a link, the Back and Forward icons will not be visible.

doc-tool-window-with-actions-in-ws-20181

The type information in the method definition in JavaScript is now the same as used for TypeScript – the type is shown after the parameter name and the return type goes at the end.
In many cases you can actually click on the type to find out more information about it.

The documentation you get can come from multiple sources. For the JavaScript APIs most of the information comes from the bundled definition files. If it’s not present, then WebStorm shows the basic information from MDN. For the methods defined in the project or in its dependencies, WebStorm shows information from the JSDoc comment. And if it’s not available, then you’ll see only its definition.

Documentation from the JSDoc comment
docs-from-jsdoc

Configuring package manager

Now it has been made easier to configure package managers in WebStorm.

Now you can select whether you want to use npm or yarn in your current project; the package manager is no longer configured for a specific Node.js version. The configuration is available in Preferences | Languages & Frameworks | Node.js and npm.

There are two aliases – npm and yarn – that are assigned to the current system path to these managers. For npm, if you change the Node.js version, the aliased path will also change to point to an npm version bundled with the selected Node.js version.

package-manager-configuration

You can always set your custom paths to package managers.

If you want yarn to be used for all your new projects, you can select it under Languages & Frameworks | Node.js and npm in the Default Project Settings (menu File – Default Settings).

In the npm run/debug configuration you can now select Project in the Package manager field. What this means is that the path to npm or yarn specified Preferences | Languages & Frameworks | Node.js and npm will be used in this configuration.

npm-run-debug-configuration

Improvements in Version Control

There’s also a bunch of improvements in the version control integration.
First, there’s now a shortcut for the Commit and Push action in the Commit Changes dialog: Alt-Cmd-K (macOS) or Alt+Ctrl+K (Windows and Linux).

commit-and-push

Secondly, to make a rebase in Git easier, we’ve now added the Abort Rebase, Continue Rebase or Skip Commit actions to the Git Branches popup.

rebase-actions

In the log tab inside the commit detail panes, the IDE now highlights hashes of the commits you are referring to. By simply clicking commit hashes you can jump to that commit in the Log tab. This works for Git and Mercurial.

vcshighlights

Last, but not the least, for Git you can now view detailed information about file changes by invoking the Show History for Revision action on a file in the Log tab. We have updated the History for revision tab, and now it works much faster.

VCSShowHistory

You can find a full list of issues fixed in the WebStorm project in the Release Notes.

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

WebStorm Team

image description