WebStorm 2018.1.2 is now available
WebStorm 2018.1.2 is now here!
Please update using Toolbox App or the IDE or download WebStorm 2018.1.2 from our website.
In WebStorm 2018.1, please use Check for Updates… in the WebStorm menu on macOS or by using the Help menu on Windows and Linux to update to WebStorm 2018.1.2.
What’s new:
- When renaming an Angular component, you can now automatically rename the related .ts, .html, and .css files
- Auto import for the RxJS operators now respects the new import style introduced in RxJS 6.0
- 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
- The new option in the TypeScript code style settings allows omitting types in the generated JSDoc comments
- More precise code completion for object properties after you explicitly check that they exist
What’s fixed:
- The log messages are again now shown in the Console tab of the npm, Gulp, and Grunt tool windows (WEB-32003)
- The new React 16.3 lifecycle methods are now resolved and are available in code completion suggestions when @types/react is installed (WEB-32069)
- Replace with the template string intention now works correctly for expressions with the ternary operator (WEB-24100)
There is more about some of the improvements below.
Smarter rename for Angular components
The Angular Style Guide recommends using the same name for the component’s class and its TypeScript, template and style files.
Now if you rename a class (Refactor – Rename in the context menu or F6) 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.
Moreover, WebStorm has changed all the imports and usages of this component in other templates.
Support for RxJS 6.0
RxJS 6 changes the way you should import its types. For example, instead of import { Observable } from 'rxjs/Observable'; you should now use import { Observable } from 'rxjs'.
To make WebStorm follow these new rules when adding imports, please go to Preferences | Editor | Code Style | TypeScript – Imports and remove rxjs from the Do not import exactly from list.
And for the RxJS operators, WebStorm will automatically use the correct import paths 'rxjs/operators'.
Improvements in the JavaScript debugger
In the JavaScript debug configuration we’ve added a new option Ensure breakpoints are detected when loading scripts.
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.
The 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.
In the past years, we’ve 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.
Types in JSDoc comments in TypeScript
If you type /** 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 Preferences | Editor | Code Style | TypeScript – Generated code – Include types in JSDoc. At the moment this option is on to keep the current behavior.
Completion for object properties
You will now get more precise code completion for JavaScript object properties after you explicitly check that they exist:
You can find the full list of the issues addressed in WebStorm 2018.1.2 in the Release Notes.
WebStorm Team
Subscribe to WebStorm Blog updates
