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

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

ts-compile-tip

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.

ts-compiler

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.

ts-compiler-tool-window

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.

completion-tsconfig

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

create-tsconfig

– 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

WebStorm 2016.1 EAP, 145.596: bug fixes

The WebStorm team had a busy week after releasing WebStorm 2016.1 (if you missed the announcement, please follow this link). Today we’re making the EAP build for WebStorm 2016.1 bug-fix update available for download.

You can download it here, or if you’re subscribed to the EAP update channel, a patch-update from WebStorm 2016.1 should be available.

This EAP build brings various bug fixes and minor improvements that did not make it into the release build. Some noticeable fixes include: proper Less code highlighting, support for module augmentation pattern used in typing in TypeScript (WEB-20894), and injected JSX inside type="text/babel". Please find the full list of addressed issues in the Release notes.

Please report any issues you have with the IDE on 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

Posted in Early Access Preview | 8 Comments

WebStorm 2016.1 released: better refactoring options, Angular 2, debugger improvements, and more

We’re excited to announce the release of WebStorm 2016.1, the first major update for our IDE this year. This update brings even better experience while editing and refactoring JavaScript and TypeScript code and steps up the IDE’s debugging capabilities.

Download WebStorm 2016.1 for your OS on the What’s new page on our website.

Here are the highlights of this update:

    • Improvements in ECMAScript 6 and TypeScript support: better refactoring options, new Unused imports inspection and Optimize imports action.
    • Major enhancements in Angular 2 support: coding assistance for event and property bindings, completion inside any data bindings, code insight for custom event handlers, and much more.
    • Support for debugging asynchronous client-side code, arrow functions in ES6, and Web and Service workers.

debugging Node.js apps on a remote machine or Vagrant box from the IDE.

Other updates worth mentioning include support for AngularJS ui-router, support for CSS Custom properties, running and debugging Electron apps in the IDE, support for the JSON Schema format for smarter coding assistance, and new Convert string to template string intention.

For a more detailed overview please visit What’s new in WebStorm 2016.1.

JetBrains WebStorm Team

Posted in Release Announcements | Tagged , , , , | 9 Comments

WebStorm 2016.1 Release Candidate 2

Welcome the second release candidate build for WebStorm 2016.1!

We’re getting really close to the release day and we’re really looking forward to hearing your feedback about WebStorm 2016.1 on our issue tracker.

You can download WebStorm 2016.1 RC2 on the Preview next version page on our website. Update: Unfortunately, there’s no patch update from the previous RC build (145.256).

In this update we fixed a critical performance issue with indexing the node_modules folder.

– JetBrains WebStorm Team

Posted in Early Access Preview | 11 Comments

WebStorm 2016.1 Release Candidate

WebStorm 2016.1 Release candidate (145.256) is now available!

If you’re wondering why we have changed the version number from 12 to 2016.1, please check out the blog post in our company blog.

You can download it on the Preview next version page on our website or, if you have a previous EAP build (145.184) installed, you should soon get a notification in the IDE about a patch update.

This build is focused on the bug fixes and improvements in the recently added features. The full list of issues addressed in this EAP build is available in the Release notes.

We are looking forward to hearing your feedback on 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

Posted in Early Access Preview | Leave a comment