{"id":22940,"date":"2018-04-24T11:40:16","date_gmt":"2018-04-24T11:40:16","guid":{"rendered":"https:\/\/blog.jetbrains.com\/webstorm\/?p=9577"},"modified":"2018-05-03T12:39:17","modified_gmt":"2018-05-03T12:39:17","slug":"webstorm-2018-1-2","status":"publish","type":"webstorm","link":"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2018\/04\/webstorm-2018-1-2","title":{"rendered":"WebStorm 2018.1.2 is now available"},"content":{"rendered":"<p><strong>WebStorm 2018.1.2<\/strong> is now here!<br \/>\nPlease update using <a href=\"https:\/\/www.jetbrains.com\/toolbox\/app\" target=\"_blank\" rel=\"noopener\">Toolbox App<\/a> or the IDE or download WebStorm 2018.1.2 from our <a href=\"https:\/\/www.jetbrains.com\/webstorm\/download\/\" target=\"_blank\" rel=\"noopener\">website<\/a>.<\/p>\n<p><strong>In WebStorm 2018.1, please use Check for Updates\u2026 in the WebStorm menu on macOS or by using the Help menu on Windows and Linux to update to WebStorm 2018.1.2.<\/strong><\/p>\n<p><em>What&#8217;s new:<\/em><\/p>\n<ul>\n<li>When renaming an Angular component, you can now automatically rename the related <em>.ts<\/em>,\u00a0<em>.html,<\/em> and <em>.css<\/em> files<\/li>\n<li>Auto import for the RxJS operators now respects the new import style introduced in RxJS 6.0<\/li>\n<li>With the new option in the JavaScript debug configuration, the breakpoints in the code that is executed on page load are hit on the first app run<\/li>\n<li>The new option in the TypeScript code style settings allows omitting types in the generated JSDoc comments<\/li>\n<li>More precise code completion for object properties after you explicitly check that they exist<\/li>\n<\/ul>\n<p>What&#8217;s fixed:<\/p>\n<ul>\n<li>The log messages are again now shown in the Console tab of the npm, Gulp, and Grunt tool windows (<a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-32003\" target=\"_blank\" rel=\"noopener\">WEB-32003<\/a>)<\/li>\n<li>The new React 16.3 lifecycle methods are now resolved and are available in code completion suggestions when <em>@types\/react<\/em> is installed (<a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-32069\" target=\"_blank\" rel=\"noopener\">WEB-32069<\/a>)<\/li>\n<li>Replace with the template string intention now works correctly for expressions with the ternary operator (<a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-24100\" target=\"_blank\" rel=\"noopener\">WEB-24100<\/a>)<\/li>\n<\/ul>\n<p>There is more about some of the improvements below.<\/p>\n<h2 id=\"smarter_rename_for_angular_components\">Smarter rename for Angular components<\/h2>\n<p><a href=\"https:\/\/angular.io\/guide\/styleguide#naming\" target=\"_blank\" rel=\"noopener\">The Angular Style Guide<\/a> recommends using the same name for the component\u2019s class and its TypeScript, template and style files.<\/p>\n<p>Now if you rename a class (<em>Refactor &#8211; Rename<\/em> in the context menu or <em>F6<\/em>) that defines an Angular component, WebStorm will automatically suggest that you rename all the related files and their usages. Notice how the filenames and the paths to them have changed.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9580\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/04\/webstorm-rename-angular-component.gif\" alt=\"rename-angular-component\" width=\"600\" \/><\/p>\n<p>Moreover, WebStorm has changed all the imports and usages of this component in other templates.<!--more--><\/p>\n<h2 id=\"support_for_rxjs\">Support for RxJS 6.0<\/h2>\n<p><a href=\"https:\/\/github.com\/ReactiveX\/rxjs\/blob\/master\/CHANGELOG.md\" target=\"_blank\" rel=\"noopener\">RxJS 6<\/a> changes the way you should import its types. For example, instead of <code>import { Observable } from 'rxjs\/Observable';<\/code> you should now use <code>import { Observable } from 'rxjs'<\/code>.<\/p>\n<p>To make WebStorm follow these new rules when adding imports, please go to <em>Preferences | Editor | Code Style | TypeScript &#8211; Imports<\/em> and remove <code>rxjs<\/code> from the <em>Do not import exactly from<\/em> list.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9581\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/04\/webstorm-rxjs-import-style.png\" alt=\"rxjs-import-style\" width=\"600\" \/><\/p>\n<p>And for the RxJS operators, WebStorm will automatically use the correct import paths <code>'rxjs\/operators'<\/code>.<\/p>\n<h2 id=\"improvements_in_the_javascript_debugger\">Improvements in the JavaScript debugger<\/h2>\n<p>In the JavaScript debug configuration we\u2019ve added a new option <em>Ensure breakpoints are detected when loading scripts<\/em>.<\/p>\n<p>This option should solve the problem with some breakpoints that are in the code that is executed on page load not being hit before you reload the page in the browser.<br \/>\nThe reason why it happens is that the code under the breakpoint is executed before WebStorm connects to Chrome and gets the source maps to check the breakpoints in the original source.<\/p>\n<p>In the past years, we\u2019ve implemented a bunch of workarounds that helped to detect and stop on these breakpoints in some specific cases. The new option provides a more general solution. Please note that right now enabling this option may slow down the initial page load.<\/p>\n<h2 id=\"types_in_jsdoc_comments_in_typescript\">Types in JSDoc comments in TypeScript<\/h2>\n<p>If you type <code>\/**<\/code> before the function and press Enter, WebStorm will automatically generate a JSDoc comment for it. In the TypeScript code, WebStorm by default adds the type info to this comment. You can now disable adding types in these comments in <em>Preferences | Editor | Code Style | TypeScript &#8211; Generated code &#8211; Include types in JSDoc<\/em>. At the moment this option is on to keep the current behavior.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9582\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/04\/webstorm-types-in-jsdoc.png\" alt=\"types-in-jsdoc\" width=\"600\" \/><\/p>\n<h2 id=\"completion_for_object_properties\">Completion for object properties<\/h2>\n<p>You will now get more precise code completion for JavaScript object properties after you explicitly check that they exist:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-9579\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2018\/04\/webstorm-completion-for-properties.png\" alt=\"completion-for-properties\" width=\"600\" \/><\/p>\n<p>You can find the full list of the issues addressed in WebStorm 2018.1.2 in the <a href=\"https:\/\/confluence.jetbrains.com\/display\/WI\/WebStorm+181.4668.60+Release+Notes\" target=\"_blank\" rel=\"noopener\">Release Notes<\/a>.<\/p>\n<p><em>WebStorm Team<\/em><\/p>\n","protected":false},"author":221,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","categories":[907],"tags":[2846],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/22940"}],"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=22940"}],"version-history":[{"count":0,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/22940\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/media?parent=22940"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/categories?post=22940"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/tags?post=22940"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/cross-post-tag?post=22940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}