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.

rename-angular-component

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.

rxjs-import-style

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.

types-in-jsdoc

Completion for object properties

You will now get more precise code completion for JavaScript object properties after you explicitly check that they exist:

completion-for-properties

You can find the full list of the issues addressed in WebStorm 2018.1.2 in the Release Notes.

WebStorm Team

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Release Announcements and tagged . Bookmark the permalink.

9 Responses to WebStorm 2018.1.2 is now available

  1. mgol says:

    The refactoring improvements for Angular components are AWESOME!

  2. Kevin says:

    Love the “Rename Angular Components” feature, though I’m seeing that the *.spec.ts file doesn’t get renamed. Is that expected?

  3. Erlend says:

    The Reformat with Prettier shortcut introduced in 2018.1 seems to be gone (on windows). Is this intended?

    • lena_spb says:

      It’s still there in 2018.1.2 – Ctrl+Alt+Shift+P… You can assign a different shortcut to this action in Settings | Keymap | Plug-ins | Prettier | Reformat with Prettier

    • Ekaterina Prigara says:

      Please also check that the path to prettier is set in Preferences | Languages and Frameworks | JavaScript | Prettier.

  4. Denis Marinov says:

    When creating new projects in Vue.js there’s only “next” button, but what if I want to go back and change something, like the project name, or the author. I have to reopen the Vue.js dialog and fill in everything from scratch again. I wish there was a “back” button.

    • lena_spb says:

      This wizard just runs vue-cli vue create project command; vue-cli doesn’t provide any way to revert entered options, so the only way to move back is re-running the command from scratch

Leave a Reply

Your email address will not be published. Required fields are marked *