WebStorm 12 EAP, 144.3143: remote debug for Node.js, unused imports warning, debugging Electron and more

Ekaterina Prigara

A new WebStorm 12 EAP build is now available! The highlights of this update include: running and debugging Node.js apps remotely from the IDE, unused import warning for JavaScript and TypeScript, more improvements in Angular 2 support, and more.

As always, you can download it here or, if you have a previous EAP build (144.2925) installed, you should soon get a notification in the IDE about a patch update.

Read about the features and improvements added in other WebStorm 12 EAP builds:

  • WebStorm 12 EAP, 144.3600: Support for Git worktrees, updated look and feel of the Git Log, Missing import statement inspection for JavaScript.
  • WebStorm 12 EAP, 144.3357: SSH Console, Extract field refactoring in TypeScript, support for debugging Node.js apps built with Webpack, and more.
  • WebStorm 12 EAP, 144.2925: Inline rename, smarter auto-imports and Optimize imports action for TypeScript, debugging async client-side code, and improvements in Angular 2 support.

Unused imports warning

WebStorm will now highlight any unused ES6 imports in JavaScript and TypeScript files.


With Optimize imports (Ctrl-Alt-O) (which now also works in JavaScript files), you can get rid of any unused imports and merge multiple import statements for symbols from one module. Or you can remove each unused import individually using a quick-fix – just press Alt-Enter on the highlighted import.

Code folding for ES6 imports

Import statements in JavaScript and TypeScript files are now folded by default.


With the updated Related symbols… action (Cmd-Ctrl-↑ on OS X, Ctrl+Alt+Home on Windows and Linux), you can see the list of imported symbols and jump to their definitions.

Code assistance in tsconfig.json, .babelrc and .eslintrc

WebStorm now provides smarter code completion based on JSON Schemas in tsconfig.json, .babelrc and .eslint configuration files. Press Alt-Enter or just start typing to get a list of all properties and their available options.


Remote run and debug for Node.js apps

One of the biggest new features in WebStorm 12 EAP is that you can now run and debug your Node.js apps on a remote server or Vagrant box right from the IDE.

To set up a Remote Node.js interpreter, click the button to the right of the Node.js interpreter field in the Node.js run/debug configuration. Then click + and select Add Remote. You can configure a remote interpreter using an existing SFTP deployment configuration or Vagrantfile, or by entering SSH credentials.


If you’re using SSH credentials, you need to configure a mapping between the local project root and its remote location in your run/debug configuration.

Then specify the JavaScript file you need to run, save the configuration and you’re ready to go – put the breakpoints in your code and click Debug.



Vagrant integration

Integration with Vagrant is now available in WebStorm out-of-the-box. You can run, reload and stop the Vagrant box from the IDE, without using the command line.

Press Cmd-Shift-A, type Vagrant and press Enter to access the list of available Vagrant commands or assign this action to a shortcut of your choice in Preferences | Keymap.


Angular 2 support improvements

Lots of improvements in Angular 2 support have landed in this EAP build.

Paths in templateUrl and styleUrls fields are now resolved and you can in one click jump to the file.

WebStorm will now inject JavaScript inside any bindings so you can enjoy code completion.


You can now get coding assistance and type inference for the variables defined in the template.


Other improvements include code completion and resolve of custom event handlers defined in the component with the @Output decorator.


Debugging Electron applications

Now you can debug Electron applications with WebStorm.
To debug the app’s main process, you need to create a Node.js run/debug configuration and specify the path to the Electron executable in the Node.js interpreter field. To debug packaged apps, specify the path to Electron inside the built app (for example, on Mac that would be your_app.app/Contents/MacOS/Electron).

If you’d like to debug the render process, first start the app with the --remote-debugging-port= option. Then create a Chromium remote run/debug configuration, specify that port number and start the debugger. That’s it!

Start run and debug configurations while indexing

We’ve made it possible to start run/debug configurations while your project is still indexing. For example, you can now start a build task or run your Node.js app. Please note that there might be some limitations when you start the debugger while indexing is in progress.

And finally, check out some new features coming to WebStorm from IntelliJ Platform:

  • support for right-to-left languages in the editor
  • by-word difference highlighting in all diff dialogs
  • an option to compare revisions of a file between branches in Mercurial


The full list of issues addressed in this EAP build is available in the Release notes.

Please report your feedback to our issue tracker. To get notifications of new EAP builds as they become available, subscribe to the EAP channel in Preferences | Appearance & Behavior | System Settings | Updates.

– JetBrains WebStorm Team

Comments below can no longer be edited.

22 Responses to WebStorm 12 EAP, 144.3143: remote debug for Node.js, unused imports warning, debugging Electron and more

  1. Anton says:

    January 20, 2016

    Thanks for the progress on Angular 2 support. I had a problem though – after updating my WS, I didn’t have any of these features enabled. Turned out node_modules must *not* be excluded to make Angular 2 features work. That’s unfortunate, since node_modules tend to be huge, its indexing takes a lot of resources and sometimes undesirably pollutes the autocomplete suggestions.

    • Dennis Ushakov says:

      January 20, 2016

      Yes, node_modules must not be excluded because we’re relying on them to provide proper code insight not just for Angular2 specific features, but for auto-imports (which I find quite useful in A2 components) as well.

  2. Alexey says:

    January 21, 2016

    Do you considering implementing node remote support for gulp/test runners/typescript/linters? This will be the great improvement in node developer workflow with vagrant/VM, since it’s common in these days to have node available only in VM.

    • Ekaterina Prigara says:

      January 22, 2016

      Not at the moment. We decided to work on the integration with the remote Node.js interpreter step-by-step, starting with the debugger. You can see the issues about npm, build tools, test runners and linters support in the list of related tasks: https://youtrack.jetbrains.com/issue/WEB-1974

  3. Prashant says:

    January 21, 2016

    The ‘unused import’ feature shows plain incorrect warnings.

    In this screenshot here you can see that all the imports marked as ‘unused’ are actually used:

    • Ekaterina Prigara says:

      January 22, 2016

      Thanks, we have already fixed that: https://youtrack.jetbrains.com/issue/WEB-19951
      The fix will land in the next EAP build.

      • Piotr says:

        January 24, 2016

        Same for the JSX. All imports used in JSX-only syntax are marked as unused, which cause warning and code being automatically removed when optimising imports. Is WEB-19951 also fixing this?
        BTW. There should be also a rule allowing “import React from ‘react’;” if only JSX is used.

        • Ekaterina Prigara says:

          January 25, 2016

          That was also fixed as part of that issue. Will work correctly in the next EAP build.

  4. Francis Kim says:

    January 27, 2016

    Gee, I just realised I’m still on WebStorm 10 😐 Time to upgrade…

  5. Jaroslav Řehorka says:

    January 27, 2016

    Looks great but do you plan to integrate jspm? (https://youtrack.jetbrains.com/issue/WEB-18904)

    • Ekaterina Prigara says:

      January 27, 2016

      No plan for that at the moment, but we’ll try to do something with that may be in the next release.

  6. Andy Westacott says:

    February 8, 2016

    Are there are any other requirements for debugging Electron apps on Windows?

    I have followed the instructions above with WS 12 EAP and it starts my Electron app correctly but never hits any breakpoints?

    • Vladimir Krivosheev says:

      February 9, 2016

      Could you please clarify — do you debug packaged app (.exe) or from sources?

      • Andy Westacott says:

        February 9, 2016

        i have the sources. I am not using an asar file

    • Louis Duran says:

      February 19, 2016

      Same thing here. My application starts (it’s just running Electron.exe) but I don’t hit breakpoints. I have the added complexity that my application is written in TypeScript but that should be fine.

  7. Andy Westacott says:

    February 11, 2016

    Do you mean do I build Electron from its own sources?

    If so I am using the pre-built binary downloaded from the Electron site.

  8. Louis Duran says:

    February 19, 2016

    Debugging Electron would be great since my project is likely going to be switching from a NWJS application to Electron. I haven’t been able to successfully setup a debug session to Electron from WebStorm with the instructions above.

    • Louis Duran says:

      February 19, 2016

      Detailed instructions would be super helpful. Like what executable is important to start up, how to debug both render and main process and how to debug packaged apps and unpackaged apps.

      • Ekaterina Prigara says:

        February 22, 2016

        What OS are you using?
        Electron executable is the one you use to start your Electron app from the command line. That can be located locally in your project in the node_modules folder or globally, depending on your setup.
        To debug both render and main processes you need to start both the Node.js and Chromium remote run/debug configurations. We’ll work on a more details blog post in the future. Stay tuned!

        • Louis Duran says:

          February 22, 2016

          I am debugging from Windows 7. Yes I pointed my node debug to the electron.exe.

          I added the node parameter:

          I think I mostly want to debug the render process. We have very little code in the main process.

          As another added complication, we are writing our code in Typescript. Our build creates .map files to do the mapping between the Javascript and the Typescript source.

          Thanks. I look forward to more instruction.

          • Ekaterina Prigara says:

            March 1, 2016

            Hello Louis,
            we have tried debugging TypeScript Electron apps on Windows, seems to work fine. Please make sure that you’ve done the following: 0. Make sure that TypeScript compiler generates source maps (“inlineSources”: true, “sourceMap”: true); 1. Started the Electron app with the –remote-debugging-port=8080 option; 2. Created a Chromium remote debug configuration in WebStorm, specify the port, here’s an example; 3. Put breakpoints and start the debugging session.

            Please let us know if that doesn’t work for you. Here’s a link to our issue tracker: https://youtrack.jetbrains.com/issues/WEB

          • Ekaterina Prigara says:

            March 1, 2016

            To debug the main process of the packaged app, you need to create a Node.js run configuration similar to this one (your app name should be instead of “Onshape”).