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

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.

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

WebStorm 12 Public Preview, 145.184: fixes

A new WebStorm 12 EAP, Public Preview build (145.184) is now available!

You can download it on the Preview next version page on our website (where you can also find the overview of all new features) or, if you have a previous EAP build (145.61) 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.

As we are getting really close to the official release of WebStorm 12, your feedback is very important for us. So 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 | Leave a comment

WebStorm 12 EAP, 145.61: fixes and improvements

A new WebStorm 12 EAP build (145.61) is now available!

As always, you can download it here or, if you have a previous EAP build (144.4199) installed, you should soon get a notification in the IDE about a patch update.

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

Read about the features and improvements added in previous WebStorm 12 EAP builds:

Continue reading

Posted in Early Access Preview | 4 Comments

WebStorm 12 EAP, 144.4199: CSS Custom Properties, and fixes

Welcome a new WebStorm 12 EAP build (144.4199)!

As always, you can download it here or, if you have a previous EAP build (144.3891) installed, you should soon get a notification in the IDE about a patch update.

Support for CSS Custom Properties

WebStorm adds support for CSS Custom Properties based on the W3C recommendations.

You can get code completion for variable names:

completion-for-css-vars

From a variable you can jump to its definition with the Cmd-Click (Ctrl-Click), see its quick definition or find its usages.

WebStorm would also validate the default value and parameter info.

css-prop-warning

Coding assistance for classes and ids in CSS

Now when you type a selector in a CSS file, WebStorm will suggest you classes and ids used in your HTML and CSS files. That also works for Sass, SCSS and Less.

completion-for-selectors

Continue reading

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

WebStorm 12 EAP, 144.3891: debugging Web Workers, and more

A fresh WebStorm 12 EAP build (144.3891) is now available for download!

As always, you can download it here or, if you have a previous EAP build (144.3600) installed, you should soon get a notification in the IDE about a patch update.

Debugging web workers

Web Workers allow you to run intensive scripts in the background thread separate from the main execution thread of a web application.

WebStorm JavaScript debugger can now hit breakpoints inside these background workers. You can go through the frames and explore variables the same way as you’re used to. In the drop-down list on the left you can jump between the workers’ threads and the main application thread.

debug-web-workers

Improvements in Dart support

The update brings more improvements in the Dart support:

  • New options in Generate code (Cmd-N on OS X or Alt-Insert on Windows and Linux) that help to add named constructor and to override toString(), ==() and hashCodedart-generate-code
  • Improvements in the package:test support: now you can run all test suites in a folder right from its context menu
  • Remote debug for Dart command line app is now fixed

--nolazy option in Node.js run/debug configuration

--nolazy option is no longer added to the Node.js run/debug configuration. It was used to ensure that breakpoints are hit reliably in older versions of Node.js. However,  no longer needed for Node.js v4 and v5 and moreover it has negative effects on performance. If you’re using Node.js v0.12,  please add --nolazy explicitly in the Node parameters field in the configuration.

The full list of issues addressed in this EAP build is available in the Release notes.

Continue reading

Posted in Early Access Preview | Leave a comment