{"id":22891,"date":"2018-02-07T15:55:53","date_gmt":"2018-02-07T15:55:53","guid":{"rendered":"https:\/\/blog.jetbrains.com\/webstorm\/?p=9484"},"modified":"2018-02-07T16:49:49","modified_gmt":"2018-02-07T16:49:49","slug":"webstorm-2018-1-eap-181-3494","status":"publish","type":"webstorm","link":"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2018\/02\/webstorm-2018-1-eap-181-3494","title":{"rendered":"WebStorm 2018.1 EAP, 181.3494: redesigned documentation popup, configuration for package manager, VCS improvements"},"content":{"rendered":"<p>The new WebStorm 2018.1 Early Preview build (181.3494.18) is now available!<\/p>\n<p>You can update via\u00a0<a href=\"https:\/\/www.jetbrains.com\/toolbox\/app\/\" target=\"_blank\" rel=\"noopener\">Toolbox App<\/a>, or download the build\u00a0<a href=\"https:\/\/www.jetbrains.com\/webstorm\/eap\" target=\"_blank\" rel=\"noopener\">here<\/a>\u00a0and install it beside your stable WebStorm version.<\/p>\n<p align=\"center\"><a class=\"jb-download-button\" href=\"https:\/\/www.jetbrains.com\/webstorm\/eap\" target=\"_blank\" rel=\"noopener\"><i class=\"download-icon\"><\/i>Download WebStorm 2018.1 EAP<\/a><\/p>\n<p>To learn more about all the new features added in earlier WebStorm 2018.1 EAP builds, please check out these <a href=\"https:\/\/blog.jetbrains.com\/webstorm\/tag\/webstorm-2018-1\/\">blog posts<\/a>.<\/p>\n<h2>Redesigned documentation<\/h2>\n<p>We are happy to present to you the new look for the documentation popup.<\/p>\n<p>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.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9485\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/02\/webstorm-new-documentation-popup-in-20181.png\" alt=\"new-documentation-popup-in-20181\" width=\"600\" \/><\/p>\n<p>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.\u00a0<!--more--><\/p>\n<p>We also haven\u2019t 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.<\/p>\n<p>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.<\/p>\n<p>Documentation popup in WebStorm 2018.1<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-9486\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/02\/webstorm-doc-popup-in-ws-20181.png\" alt=\"doc-popup-in-ws-20181\" width=\"600\" \/><\/p>\n<p>Documentation popup in WebStorm 2017.3<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-9487\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/02\/webstorm-doc-popup-in-ws-20173.png\" alt=\"doc-popup-in-ws-20173\" width=\"600\" \/><\/p>\n<p>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\u2019t navigated to any other documentation page using a link, the <em>Back<\/em> and <em>Forward<\/em> icons will not be visible.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9488\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/02\/webstorm-doc-tool-window-with-actions-in-ws-20181.png\" alt=\"doc-tool-window-with-actions-in-ws-20181\" width=\"366\" \/><\/p>\n<p>The type information in the method definition in JavaScript is now the same as used for TypeScript \u2013 the type is shown after the parameter name and the return type goes at the end.<br \/>\nIn many cases you can actually click on the type to find out more information about it.<\/p>\n<p>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\u2019s not present, then WebStorm shows the basic information from <a href=\"https:\/\/developer.mozilla.org\/en-US\/\" target=\"_blank\" rel=\"noopener\">MDN<\/a>. For the methods defined in the project or in its dependencies, WebStorm shows information from the <a href=\"http:\/\/usejsdoc.org\/\" target=\"_blank\" rel=\"noopener\">JSDoc<\/a> comment. And if it\u2019s not available, then you\u2019ll see only its definition.<\/p>\n<p>Documentation from the JSDoc comment<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-9489\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/02\/webstorm-docs-from-jsdoc.png\" alt=\"docs-from-jsdoc\" width=\"600\" \/><\/p>\n<h2>Configuring package manager<\/h2>\n<p>Now it has been made easier to configure package managers in WebStorm.<\/p>\n<p>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 <em>Preferences | Languages &amp; Frameworks | Node.js and npm<\/em>.<\/p>\n<p>There are two aliases \u2013 npm and yarn \u2013 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.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9490\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/02\/webstorm-package-manager-configuration.png\" alt=\"package-manager-configuration\" width=\"600\" \/><\/p>\n<p>You can always set your custom paths to package managers.<\/p>\n<p>If you want yarn to be used for all your new projects, you can select it under <em>Languages &amp; Frameworks | Node.js and npm<\/em> in the <em>Default Project Settings<\/em> (menu File &#8211; Default Settings).<\/p>\n<p>In the npm run\/debug configuration you can now select <code>Project<\/code> in the Package manager field. What this means is that the path to npm or yarn specified <em>Preferences | Languages &amp; Frameworks | Node.js and npm<\/em> will be used in this configuration.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9491\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/02\/webstorm-npm-run-debug-configuration.png\" alt=\"npm-run-debug-configuration\" width=\"600\" \/><\/p>\n<h2>Improvements in Version Control<\/h2>\n<p>There\u2019s also a bunch of improvements in the version control integration.<br \/>\nFirst, there\u2019s now a shortcut for the <em>Commit and Push<\/em> action in the Commit Changes dialog: <em>Alt-Cmd-K<\/em> (macOS) or <em>Alt+Ctrl+K<\/em> (Windows and Linux).<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9492\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/02\/webstorm-commit-and-push.png\" alt=\"commit-and-push\" width=\"600\" \/><\/p>\n<p>Secondly, to make a rebase in Git easier, we\u2019ve now added the <em>Abort Rebase<\/em>, <em>Continue Rebase<\/em> or <em>Skip Commit<\/em> actions to the Git Branches popup.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9493\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/02\/webstorm-rebase-actions.png\" alt=\"rebase-actions\" width=\"600\" \/><\/p>\n<p>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.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9494\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/02\/webstorm-vcshightlights.png\" alt=\"vcshighlights\" width=\"600\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/02\/webstorm-vcshighlights.gif\" \/><\/p>\n<p>Last, but not the least, for Git you can now view detailed information about file changes by invoking the <em>Show History for Revision<\/em> action on a file in the Log tab. We have updated the History for revision tab, and now it works much faster.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9496\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/02\/webstorm-VCSShowHistory.png\" alt=\"VCSShowHistory\" width=\"600\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/02\/webstorm-VCSShowHistory.gif\" \/><\/p>\n<p>You can find a full list of issues fixed\u00a0in the WebStorm\u00a0project in the <a href=\"https:\/\/youtrack.jetbrains.com\/releasenotes\/WEB?q=Fix%20versions:%202018.1%20resolved%20date:%202018-01-29%20..%202018-02-06%20Verified:%20yes\" target=\"_blank\" rel=\"noopener\">Release Notes<\/a>.<\/p>\n<p><strong>Please share your feedback and report issues on our\u00a0<a href=\"https:\/\/youtrack.jetbrains.com\/issues\/WEB\" target=\"_blank\" rel=\"noopener\">tracker<\/a>. Thank you!<\/strong><\/p>\n<p><em>WebStorm Team<\/em><\/p>\n","protected":false},"author":221,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","categories":[826],"tags":[2846],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/22891"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/types\/webstorm"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/users\/221"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/comments?post=22891"}],"version-history":[{"count":0,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/22891\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/media?parent=22891"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/categories?post=22891"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/tags?post=22891"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/cross-post-tag?post=22891"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}