WebStorm 2016.1.3 is now available

WebStorm 2016.1.3, a new bug fix update for WebStorm 2016.1, is now available!

This update brings Angular 2 RC compatibility (the IDE now understands variable declarations with let inside the structural directives such as *ngFor and provides proper auto imports with paths starting with @angular), support for the scoped npm packages, and improvements in the TypeScript support and integration with the build tools. You can find the full list of addressed issues in the Release notes.

A patch-update from WebStorm 2016.1.2 and 2016.1.3 EAP should be available.

Your WebStorm Team

Posted in Release Announcements | Tagged , , | 1 Comment

WebStorm 2016.2 EAP, 162.232: apply VCS patches, drag into HTML

Meet the new WebStorm 2016.2 Early Access Preview build (162.232)! You can download it here or, if you have already installed the first WebStorm 2016.2 EAP build, you should soon get a notification in the IDE about a patch update.

Here are some of the new things you can try in WebStorm 2016.2 EAP.

Improved way of working with patches

Now it’s so much easier to apply patches to a project!

Just copy the patch to the clipboard, go to the IDE and it will immediately suggest applying it! For example, if you’re working with a Github pull request, type .patch at the end of the URL, copy the text, go to WebStorm and voilà! Alternatively, you can drag the patch file into the IDE, or use the Apply patch action in the VCS menu.


Continue reading

Posted in Early Access Preview | Tagged | 2 Comments

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 Add…, 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 , | 2 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 egghead.io.

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 it’s not yet integrated with WebStorm, but we plan to work on that in WebStorm 2016.2 and make it possible to 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.2 Early Access Preview, that you can downloaded here.

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 | 6 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.2 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 , , , , | 34 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 | 19 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 egghead.io, 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 egghead.io, 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 try the Early access preview build of 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 2016.1. 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. 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 , | 29 Comments