WebStorm 2018.3 EAP #6: debugging Node.js workers, high-contrast theme, new code style options for style sheets

Posted on by Ekaterina Prigara

WebStorm 2018.3 Early Preview build #6 is now available!

If you’re unfamiliar with our Early Access Program or if you want to catch up on all the new features, check out the previous EAP blog posts.

Toolbox App is the easiest way to get EAP builds. You can also get notified right from the IDE when a new EAP build is available: go to Preferences | Appearance & Behavior | System Settings | Updates and select “Automatically check updates for Early Access Program”.

Download WebStorm 2018.3 EAP

Important! WebStorm EAP builds are not fully tested and might be unstable.

Here are some of the highlights of WebStorm 2018.3 EAP #6 (build 183.3647.15). For the full list of issues fixed in this update, see the Release Notes.

Debugging Node.js worker thread

Node.js 10.5 introduced a new experimental feature – worker threads, which can be used for CPU-intensive tasks (check out this blog post for a great overview of the feature).

WebStorm now provides code completion for the worker threads API and allows you to debug workers. Debugging workers is available in Node.js 10.12 that was released today. You also need to pass the –experimental-worker flag to the node.

When debugging workers in WebStorm, you will see in what thread the breakpoint was hit and you will be able to switch between threads to see the call stack and variables.

Debugger tool window when debugging node workers

New code style options for style sheets

We have updated the code style options for style sheet languages. First, each language now has its own configuration with a full set of options. Before, most of the options were inherited from the CSS code style and only indents could be configured for each language.

Second, we’ve made the use of blank lines in the files more configurable. There are 3 new options located on the Blank lines tab for each language under Preferences | Editor | Code Style | Style Sheets.

Keep Maximum Blank Lines in Code will remove extra empty lines when you reformat the code (Alt-Cmd-L / <>). In this example, with the option set to 2, WebStorm will remove one extra empty line. Note that this option doesn’t add any lines but only removes extra (the resulting code is on the right):

Code before and after the Reformat code action with Max blank lines code style option set to 2

Minimum Blank Lines Around Top-level Block and Around Nested Selector will, on the contrary, add empty lines. Here both options are set to 1:

Code before and after the Reformat code action with Minimum blank lines code style options set to 1

In addition, CSS code style configurations now have the new Arrangement tab. Use it to enable and configure sorting for the properties inside rulesets. Once enabled, you can use the Rearrange code action to sort the properties. In the advanced formatting dialog (Shift-Alt-Cmd-L), you can enable running Rearrange code every time you reformat the code.

Advanced formatting dialog with Rearrange code check box enabled

Extract ruleset and replace var() with its fallback value

The new intention Replace var() with its fallback value allows you to quickly remove CSS custom properties/variables from the code:

Replace CSS var() with the fallback value intention

With the new Extract ruleset intention, you can move selected properties to a new block and then modify its selector.

Extract ruleset intention

Suggestions for variable names

Among the IDE JavaScript preferences, you can find a new option called Suggest variable names. This feature comes from IntelliJ IDEA’s support for Kotlin, where it first appeared and is on by default.

This new option provides suggestions for variable names based on the names of classes, types, and interfaces defined in the project, and the libraries you use and those found in standard APIs.

Suggestions for variable names

Completion for overrides adds method body

Now, when you want to override a method from the parent class or interface and select it from the completion suggestions, WebStorm will automatically add parameters, super() call and, if possible, the type info. Here’s an example of the generated method:

Generated method after using code completion for override

You can disable this behavior in Preferences | Languages and Frameworks | JavaScript – Expand method bodies in completion for overrides.

Override severity from ESLint or TSLint config

By default, WebStorm uses the severity levels from the ESLint or TSLint configuration files when highlighting errors and warnings from these linters in the editor. Based on your requests, we have made it possible to ignore the severities in the config file and show everything reported by the linter as errors, warnings, or in custom color.

To use this, go to Preferences | Editor | Inspections – TSLint or ESLint and clear the checkbox “Use rule severity from the configuration file”. Then select the severity level you want to use instead in the drop-down above the checkbox.

Disable using severity levels from linter config file

High-contrast theme and accessibility improvements

The big feature from IntelliJ Platform that has landed in this update is the new high-contrast theme. It is part of our long-term effort to make the IDE more accessible to everyone and we plan to continue working in this direction.

You can enable the new theme in the IDE Preferences | Appearance and Behavior | Appearance. Or, use the Ctrl-` shortcut and select Look and Feel – High Contrast.

We are still improving the theme and would appreciate your feedback very much!

High contrast theme in WebStorm

In addition to that, WebStorm now allows a screen reader to read the line numbers, VCS annotations, breakpoints, and other gutter icons. To enable screen reader support, please follow the instructions in our docs. Then, use the screen reader by following these steps:

  • Use the [Alt + Shift + 6] + F key combination to focus on the gutter.
  • Move between the lines and gutter elements using the arrow keys.
  • When the focus is on the gutter icon, press [Alt + Shift + 6] + T for the screen reader to read a tooltip on the icon.
  • To get back to the editor, press Esc.

Furthermore, with valuable help from our contributor Mohammed Laachir, it is now possible for screen readers to access the tables in the dialog.

We are working on further improvements in the screen readers and support for screen magnifiers. Stay tuned!

Please report any issues on our tracker. And stay tuned for the next week’s update!

The WebStorm Team

Comments below can no longer be edited.

2 Responses to WebStorm 2018.3 EAP #6: debugging Node.js workers, high-contrast theme, new code style options for style sheets

  1. felipe says:

    October 11, 2018

    hi. how can enable that little tag when i’m writing arguments for a function?

    • Ekaterina Prigara says:

      October 11, 2018

      Do you mean the parameter hints? They should be on by default in WebStorm 2018.3 EAP, but please check in Preferences | Editor | Appearance – Show parameter name hints.