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

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.

remove-unused-import

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.

es6-imports-folded

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.

completion-tsconfig

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.

add-node-interpreter

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.

node-rc

debug-node-remotely

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.

vagrant

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.

angular2-completion

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

angular2-variables

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

amgular2-events

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

by-word-diff

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

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 Early Access Preview and tagged , , , . Bookmark the permalink.

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

  1. Anton says:

    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:

      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:

    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.

  3. Prashant says:

    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:
    http://screencast.com/t/kYxCo9INbHx

  4. Francis Kim says:

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

  5. Jaroslav Řehorka says:

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

  6. Andy Westacott says:

    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?

  7. Andy Westacott says:

    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:

    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:

      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:

        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:

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

          I added the node parameter:
          –remote-debugging-port=8088

          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:

            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:

            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”).

Leave a Reply

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