WebStorm 2016.2 EAP, 162.844: convert to arrow function, custom background

Fresh WebStorm 2016.2 EAP build (162.844) is now ready! You can download it here or, if you have installed the previous WebStorm 2016.2 EAP build (162.646), you should soon get a notification in the IDE about a patch update.

Convert to arrow function

We’re now working on a set of intentions that will help you to convert your code to ES6. In WebStorm 2016.1 we’ve introduced Convert to ES6 template string action. And the new intention that is now available is for converting to arrow functions.

For example, you can convert a  callback function to arrow function by hitting Alt-Enter on the function keyword:

to-arrow-function

You can also convert arrow function to a shorthand arrow function:

to-shorthand-arrow-function

We’d be very happy to hear your feedback on that! In the next WebStorm 2016.2 EAP builds we’re planning to highlight the code which can be converted and allow bulk fixes across the project files.

Continue reading

Posted in Early Access Preview | Tagged , | 13 Comments

WebStorm 2016.2 EAP, 162.646: Angular CLI, ligatures, and debugging in Firefox

The new WebStorm 2016.2 EAP build (162.646) is now available! You can download it here or, if you have installed the previous WebStorm 2016.2 EAP build (162.426), you should soon get a notification in the IDE about a patch update.

Angular CLI and code snippets

Thanks to the integration with Angular CLI,  you can now create new Angular 2 projects with ease. Install angular-cli globally via npm, click Create new project on the IDE Welcome screen, select Angular CLI from the list of project templates, enter a project name, and click Create.

angular-cli

In addition to that, we’ve added a collection of Angular 2 code snippets developed by John Papa and adapted to WebStorm by Reto Ryter.

The list of templates is available in Preferences | Editor | Live templates. To use a template, type its abbreviation in the editor and then press Tab to expand it. Press Tab again to jump to the next edit location in the template.

ng2-snippet

Support for fonts with ligatures

The editor in WebStorm now supports fonts with programming ligatures, like Fira Code, Monoid or Hasklig.

ws-ligatures

Continue reading

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

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 for the builds 145.1616 and 145.1503.

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

Your WebStorm Team

Posted in Release Announcements | Tagged , , | 19 Comments

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.

apply-patch

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

electron-doc

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 , | 31 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 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.

props-react

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.

ng2-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 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.

UpsourceCodeReviewUI

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