Getting started with Electron in WebStorm

Electron allows you to build cross platform applications using only JavaScript, HTML and CSS (or ECMAScript 6, TypeScript, CoffeeScript or any language that compiles to JavaScript). It provides lots of native OS APIs for things like OS notifications or automatic updates.

There are several well-known apps that use Electron, for example Slack and Atom, as well as a great number of open-source apps built on Electron that you can learn from.

Let’s have a look at how you can set up your workflow with the Electron app in WebStorm: how to enable the coding assistance and how to run and debug Electron application.

Configuring code completion

To enable coding assistance for the Electron APIs in you project, all you have to do is to add github-electron.d.ts as a JavaScript library. Go to Preferences | Languages and Frameworks | JavaScript | Libraries, click Download, search for github-electron and download it.

The downloaded TypeScript definition file contains the descriptions of all the Electron APIs. It is used by WebStorm to provide code completion, information about method parameters and documentation.


To get code completion for Node.js APIs, go to Preferences | Languages and Frameworks | Node.js and npm and click ‘Enable coding assistance’.

Running and debugging Electron app

In Electron, there are 2 types of processes: the main process, which manages the web pages of your application and handles system events, and the render process, which is related to every individual page of the app and hosts most of the application logic. Continue reading

Posted in Tutorials | Tagged , | 26 Comments

Webinar recording: WebStorm – Angular 2 Tips and Tricks

The recording of our May 11th webinar featuring John Lindquist, WebStorm – Angular 2 Tips and Tricks, is now available on JetBrains YouTube channel.

Angular 2 is a big upgrade from Angular 1. Now you need to know classes, TypeScript, modules, and on and on. Luckily WebStorm 2016.1 has kept up with all these changes and provides excellent support to help you navigate through all the new features. In this webinar John Lindquist, walks us through all of these new features in Angular 2 support and shares his productivity tips for working with Angular 2 in WebStorm.

You can reach John on Twitter @johnlindquist and check his Angular 2 videos on

Here are some commons questions from the webinar Q&A session:

Q: How can I enable Angular 2 support in IntelliJ IDEA, PhpStorm, PyCharm or RubyMine?
A: Angular 2 support is provided by the AngularJS plugin developed by JetBrains. You can install it in Preferences – Plugins. This plugin provides the same functionality related to Angular support you may find in WebStorm.

Q: What’s the best way now to create a new Angular 2 project?
A: It’s recommended to use Angular CLI. At the moment you can try the integration with Angular CLI in WebStorm 2016.2 Early access preview – you can create new Angular 2 projects right from the IDE Welcome screen. There’s also the Angular 2 seed project on Github that shows how to use Angular 2 with Webpack.

Q: When will Angular 2 RC be supported in WebStorm?
A: The changes introduced in Angular 2 Release Candidate are now supported in WebStorm 2016.1.3, that you can download on the product website.

Want to learn more about Angular 2 support in WebStorm? Have a look at our recent blog post.

– JetBrains WebStorm Team

Posted in Webinar | Tagged | 12 Comments

WebStorm 2016.2 Early Access Preview

We are happy to announce the start of the Early Access Preview for WebStorm 2016.2, the next big update for WebStorm. You can download WebStorm 2016.2 EAP, build 162.74, right now. You can install it side by side with WebStorm 2016.1 or any previous WebStorm version. No active subscription is required.

While we don’t have that many big new features to show you right now, we hope you’ll still enjoy some of the improvements and fixes that have already landed in WebStorm 2016.2.

Coding assistance for props in React and more

WebStorm can now understand component properties defined using propTypes and provide code completion and resolve to them.


Another nice improvement for React developers is that now WebStorm will automatically add {} instead of “” for React events like onClick, onChange, etc. Moreover, the IDE now understands React non-DOM attributes: key, ref and dangerouslySetInnerHTML.

There’s also a bunch of improvements in React support in TypeScript, like auto imports for components and coding assistance for components properties.

Support for Angular 2 Release candidate

WebStorm 2016.2 EAP brings updates to the Angular 2 support: it now understands variable declarations with let inside the structural directives such as *ngFor and provides proper auto imports  with paths starting with @angular for Angular 2 RC.


Continue reading

Posted in Early Access Preview | Tagged , , , , | 49 Comments

WebStorm 2016.1.2 is now available

WebStorm 2016.1.2, a second bug fix update for WebStorm 2016.1, is now available!

Update, May 18th: We have release WebStorm 2016.1.2b – this update brings these important security fixes to the OS X 10.10 users and some Windows users who were unable to successfully install WebStorm 2016.1.2.
If you have successfully updated to WebStorm 2016.1.2, you may ignore this update.

This update brings lots of bug fixes and improvements in all parts of the IDE. Among those is a fix for supporting debugging with the freshly released Node.js v6.0. Unfortunately, fixes related to the Angular 2 RC support have not made it into this build. To find the full list of addressed issues see the Release notes.

A patch-update from WebStorm 2016.1.1 to 2016.1.2 should be available. If you haven’t yet updated to WebStorm 2016.1, please do that by downloading WebStorm 2016.1.2 from our website.

Important security fixes

In addition to the usual functionality fixes, this update contains important fixes for two security issues inside IntelliJ Platform. The vulnerabilities, in various forms, are also present in older versions of WebStorm; therefore, patches for WebStorm, starting with version 6.0.2, are also available.

Find more information about the issues, the affected versions and ways to update in this special blog post. It is strongly recommended for all users to install the update as soon as possible.

– JetBrains WebStorm Team

Posted in Release Announcements | Tagged | 21 Comments

Live webinar: WebStorm – Angular 2 Tips and Tricks

Join us Wednesday, May 11th, 12:00 PM – 1:00 PM EDT (New York) / 18:00 – 19:00 CEST (Berlin) (check other time zones) for our free live webinar WebStorm: Angular 2 Tips and Tricks, featuring John Lindquist.

Angular 2 is a big upgrade from Angular 1. Now you need to know classes, TypeScript, modules, and on and on. Luckily WebStorm 2016.1 has kept up with all these changes and provides excellent support to help you navigate through all the new features. Come join us as John Lindquist, founder of, walks us through all the new features of WebStorm that can help make your transition to Angular 2 smooth as butter.

We believe that this webinar is going to be interesting for anyone interested in Angular 2 and TypeScript and working in WebStorm and other IntelliJ IDEA-based IDEs.

Space is limited, please register now.

The recording will be available after the webinar.

John LindquistJohn Lindquist has spent the majority of his career developing Rich Web Applications. Before starting, John worked at JetBrains as a WebStorm evangelist, and before that he was a Technical Architect at Isobar leading large teams in building the latest and greatest in web apps for the Air Force, HBO, and Bloomberg.
Posted in Webinar | Tagged , , | 4 Comments

Code review in JavaScript projects

When was the last time you reviewed someone else’s code or had your own code reviewed? None of us write 100% bug-free code, none of us know absolutely everything, and everybody at some point has had to maintain some truly bewildering code.

Code review is a practice that helps developers help each other write better code, learn, share knowledge, and make maintaining code base easier. Performing regular code reviews in a team makes everybody better at what they do, and results in better software with fewer defects.

However, code review can also be a frustrating process – you’re used to all the power of your IDE, yet when you open up a set of changes in an average code review tool, you can’t leverage any of that. The cognitive load of having to navigate through the code in an unfamiliar way and losing all the context your IDE provides is one of the things that makes developers less keen to perform code reviews.

Luckily, there’s a tool that can help you with that: Upsource.


Upsource provides syntax highlighting for dozens of languages. Teams using JavaScript (including ECMAScript 6 and JSX), HTML and CSS and Java get an additional advantage: having an IntelliJ IDEA core together with its JavaScript support in it, Upsource provides server-side static code analysis just like in your IDE.

Let’s take a look at some Upsource features.

Continue reading

Posted in Cool Feature | Tagged , | 6 Comments

WebStorm 2016.1.2 EAP, 145.844: bug fixes

Please meet an Early preview build for the next WebStorm bug-fix update – WebStorm 2016.1.2 EAP (145.844).

As always, you can download it here or, if you are subscribed to the EAP Updates channel in the IDE and have WebStorm 2016.1.1 installed, you should soon get a notification in the IDE about a patch update.

This EAP build brings numerous bug fixes in JavaScript, TypeScript, and Dart support and tool integrations. The full list of issues addressed in this EAP build is available in the Release notes.

If you have any issues with WebStorm 2016.1, please let us know on our issue tracker. Thank you!

– JetBrains WebStorm Team

Posted in Early Access Preview | 3 Comments

Angular 2 workflow in WebStorm

WebStorm is well-known for its AngularJS 1 support. WebStorm 2016.1 introduces lots of new exciting features in Angular 2 support. Combining that with support for the latest TypeScript and ECMAScript 6 (2015) features, WebStorm can be a great playground for your new Angular 2 applications.

If you’re using Angular 2 RC, please make sure you’re using WebStorm 2016.1.3 or WebStorm 2016.2 for proper support.

In this blog post we’d like to share with you some tips and tricks that we hope you’ll find useful when working on Angular 2 apps in TypeScript in WebStorm. We’ll have a look at:

Disclaimer: This blog post is not intended as a tutorial for getting started with Angular 2. If you’re new to Angular 2, we suggest you to go through the Angular 2 Quickstart first. While Angular 2 is still in Beta, there might be some changes in the framework that can affect the way Angular-specific coding assistance works in WebStorm.

Angular 2 and TypeScript support are also available in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Professional, and RubyMine, all version 2016.1 or above. Make sure that you’ve installed AngularJS plugin: go to Preferences | Plugins – Install JetBrains plugins and search for AngularJS.

Let’s see what you can do with WebStorm!

Installing Angular 2

To make WebStorm understand Angular 2 syntax, we need to have Angular 2 library files in our project.

Continue reading

Posted in Cool Feature, Tutorials | Tagged , | 57 Comments

How to compile TypeScript in WebStorm

TypeScript is getting more and more popular recently, especially for Angular 2 projects.
To help you quickly get started with a new TypeScript project, WebStorm offers a built-in TypeScript compiler that you can use instead of configuring some other build tool. Let’s have a closer look at it!

Once you open a TypeScript file, WebStorm will suggest enabling its built-in TypeScript compiler to compile your code to JavaScript.


If you have a tsconfig.json file in your project, WebStorm will retrieve all the compiler options and project configuration from it and use them automatically.

You can configure the compiler behavior in Preferences | Languages & Frameworks | TypeScript.


For example, you can select Set options manually and specify the required compiling options as a command line arguments. These would then be used instead of the options in a tsconfig.json file (though we recommend using tsconfig.json).

Enabling source maps for debug

If you’d like to debug your TypeScript code using WebStorm or Chrome, make sure you add these two compiler options in the project tsconfig.json file:

"sourceMap": true,
"inlineSources": true

That way TypeScript compiler will generate source map file with inlined sources and when debugging the code the breakpoints set in the TypeScript code will be properly hit.

Using different version of TypeScript compiler

You can configure WebStorm to use a different version of the TypeScript compiler. To do so, click Edit… next to the compiler version in Preferences and specify a path to the TypeScript compiling service (lib folder in the TypeScript package with typescriptServices.js and lib.d.ts files).

Auto compilation on changes

There are two modes in which you can use a built-in TS compiler: it can either compile your code automatically as you write the code (check Track changes option), or you can trigger it manually with Compile All or Compile Current File actions. These actions are available via Find action popup (Cmd-Shift-A) or on the TypeScript Compiler tools window. Or you can assign them to the shortcut of your choice in Preferences | Keymap.


Any errors occurred during compilation would be shown in this tool window and also right in the editor (if you have enabled the Track changes compiler option). Double-click the error message to jump to the source code.

Tip: If you want to see errors from the compiler in the editor without automatically generating compiled files along the way, in your tsconfig.json file specify "compileOnSave": false. This option may be useful if you have some other build tool running the compilation.

Experimental: WebStorm 2016.2 adds experimental integration with the TypeScript internal service that provides code completion and analysis. It might provide more precise results and work faster compared to the WebStorm’s own coding assistance. At the same you will be able to benefit from WebStorm’s refactoring capabilities and more. You can enable that in Preferences | Languages & Frameworks | TypeScript.

Smart code completion for tsconfig.json

WebStorm 2016.1 has greatly improved coding assistance for the tsconfig.json file.
Press Alt-Enter or just start typing to get a list of all properties and their available options.


You can also create a new tsconfig.json file using a template via the New file popup (Cmd-N on OS X and Alt-Insert on Windows and Linux).


– JetBrains WebStorm Team

Posted in Tutorials | Tagged | 25 Comments

WebStorm 2016.1.1 is now available

WebStorm 2016.1.1, a first bug fix update for the recently release WebStorm 2016.1 is now available!

This update (build 145.597) brings over 50 bugs fixes and improvements. Among noticeable fixed issues: CSS color preview icon is back (IDEA-151485), support for module augmentation pattern used in typing in TypeScript (WEB-20894) and for upcoming pathMapping semantics in TypeScript 1.9 (WEB-20439), JSX code is now injected inside type="text/babel" in HTML, and more. You can find a full list of addressed issues in the Release notes.

A patch-update from WebStorm 2016.1 and WebStorm EAP build 145.596 should be available. If you haven’t yet updated to WebStorm 2016.1, now it’s a great time to do that. Download WebStorm 2016.1 from our website.

– JetBrains WebStorm Team

Posted in Release Announcements | 9 Comments