WebStorm 12 EAP, 144.2925: debugging async code, smarter auto imports and more

A fresh WebStorm 12 EAP build (144.2925) is now available!

You can download it here and install it side-by-side with your stable version of WebStorm. Or if you’re subscribed to the EAP update channel in the IDE and have already installed a previous EAP build, you should get a notification about a patch-update.

If you missed the announcement of WebStorm 12 EAP, you can catch up on it in this blog post.

Inline rename for TypeScript

You can now use Rename refactoring in the TypeScript code inline. That means that you can just hit Shift-F6, change the name right in the editor and it will be instantly refactored across the whole project, no Rename dialog anymore.

inline-rename-for-ts

Smarter imports

Auto imports in TypeScript became smarter: now symbols from one module are automatically added into one import statement.

Before that, when you type, for example, @Injectable, the import would have generated the following way:

auto-imports

And now:

smarter-imports

This behaviour could be configured in Preferences | Editor | General | Auto imports.

And with a new Optimize imports actions (Ctrl-Alt-O) WebStorm can merge imports that are already typed in the similar way. This works now only for the TypeScript files, but we will extend it to ES6 files as well.

Debugging async code

WebStorm now allows you to debug asynchronous client-side code in Chrome: check the Async checkbox on the debugger pane and now once a breakpoint inside an asynchronous function is hit or you step into that code, you can see a full call stack, including a caller and all the way to the beginning of asynchronous actions.

async-debug Continue reading

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

Working with ReactJS in WebStorm: Linting, refactoring and compiling

We recently explored coding assistance that WebStorm provides for React and JSX. Now we would like to talk a bit about the tools in the React ecosystem. In this area it’s not easy to provide a complete overview as tools are developing at a crazy pace. So right now we’ll focus on linters (code quality tools), refactoring and tools that can help us compile code.

Code analysis

As you may know, WebStorm has a wide range of built-in inspections for JavaScript and HTML, and these inspections also work for JSX code.

For example, WebStorm alerts you in case of unused variables and functions, missing closing tags, missing statements and much more. For some inspections WebStorm provides quick-fixes, like add a missing semicolon:

react-inspection

You can customize the list of inspections in Preferences | Editor | Inspections. Disable those you don’t want to see, or change severity level from warning to error or vice versa.

On top of such inspections, you can also use linters like ESLint and JSCS for the JSX code. Let’s talk about these in more detail.

ESLint

ESLint is a linting utility that provides a wide range of linting rules, which can also be extended with plugins. WebStorm integrates with ESLint and allows you to see warnings as errors reported by ESLint right in the editor, as you type. Continue reading

Posted in Tutorials | Tagged , , | Leave a comment

WebStorm 12 roadmap and EAP

Time flies fast and we are already starting the Early Access Program for the next major WebStorm release. You can download WebStorm 12 EAP, build 144.2608, right now. You can install it side by side with WebStorm 11. No active subscription is required.

While we don’t have that many new features to show you right now, we hope you’ll try out some of the improvements (like support for the new Angular 1.5 Component helper and code insights for Angular 2 bindings), performance fixes for JavaScript and numerous fixes that have already landed in WebStorm 12 EAP.

Also, with this being a perfect time for New Year’s resolutions, we would like to share with you our plans for the next couple of months.

Better coding assistance for JavaScript, ECMAScript and TypeScript

We’re always working on improvements in language support, but this time we want to allocate some extra time to work on refactoring options available for JavaScript, ES6 and TypeScript. And of course, performance is always our top priority: we hope to deliver faster indexing for big JavaScript projects, faster code completion results, and more.

Your CPU snapshots showing any IDE performance issues are always very welcome and appreciated.

Keeping up with the frameworks: React, Angular 1.5 and 2

With so many great frameworks around and already supported in WebStorm, we want to make sure that WebStorm users can get the best coding assistance for them with support for all the latest features. As we see a big (and growing) interest in React in the community and the strong position of Angular, we want to further improve support for these frameworks in WebStorm with more smart features.

There are also some things on our list that had been planned for but unfortunately did not make it into WebStorm 11. We have revised some of the initial ideas and hope to start working on some of them in the nearest future:

Next steps in npm support improvements
WebStorm 11 included npm script integration and some npm-related inspections in code. Now it’s time to add coding assistance for packages and their versions in package.json, and to support various scenarios of managing project Node.js dependencies from the IDE.

Webpack support
While we’ve made WebStorm able to debug apps built with Webpack, we’re still thinking about the best way to support Webpack-specific require statements.

Running and debugging Node.js applications remotely
We’d like to add an option to run Node.js applications remotely from the IDE and debug them. We have already started working on a remote run via SSH on a remote machine and then we plan to enhance the feature with the integration with Docker and Vagrant.

Other things that we are considering and may work on include:

  • Options to run and debug Electron applications
  • support for CSS variables
  • further Flow integration (if it becomes available for Windows)
  • deeper integration with build tools (may be some new workflow that could replace the File watchers), and more.

We want to hear your opinion before deciding which of these features will be implemented in WebStorm. So, our issue tracker is always open for your feature requests (and bug reports). Let us know what you think!

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

  • WebStorm 12 EAP, 144.3600: Support for Git worktrees, updated look and feel of the Git Log, Missing import statement inspection for JavaScript.
  • WebStorm 12 EAP, 144.3357: SSH Console, Extract field refactoring in TypeScript, support for debugging Node.js apps built with Webpack, and more.
  • WebStorm 12 EAP, 144.3143: Unused imports warning, code assistance in tsconfig.json, .babelrc and .eslintrc, remote run and debug for Node.js apps, Vagrant integration, debugging Electron apps, and further improvement in Angular 2 support.
  • WebStorm 12 EAP, 144.2925: Inline rename, smarter auto-imports and Optimize imports action for TypeScript, debugging async client-side code, and improvements in Angular 2 support.

– JetBrains WebStorm Team

Posted in Early Access Preview, General Announcements | 45 Comments

WebStorm 11.0.3 is now available

WebStorm 11.0.3 is now available!

This update brings various fixes and improvements, mostly in the core IntelliJ platform, the whole list of addressed issues is available in the Release notes. In addition to that WebStorm 11.0.3 adds support for a new unit testing package for Dart.

Click Configure – Check for update on the IDE Welcome screen to update. You can use a patch-update for WebStorm 11.0.2. Or, you can download WebStorm 11.0.3 from our website.

– JetBrains WebStorm Team

Posted in Release Announcements | 34 Comments

WebStorm 11.0.2 is now available

WebStorm 11.0.2 is now available! You can download it from our website or install a new version directly from WebStorm 11.0.1.
This update brings lots of bug fixes and various improvements. Here are some highlights.

Better support for npm 3

npm 3 brings a new flat structure of dependencies. Previously, to make indexing faster WebStorm indexed only top level folders in the node_modules directory, excluding module’s own dependencies. With the new flat structure the old approach doesn’t work. So in WebStorm 11.0.2 we now first check the list of the dependencies in the package.json file and then index only those modules.

npm3

Improved auto import for any TypeScript symbol

WebStorm can now automatically import any TypeScript symbol from other project files and modules right as you type.

angular-completion-imports

We have also updated our built-in TypeScript compiler to version 1.7.3 and improved support for multiple tsconfig.json files in one project. Continue reading

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

Webinar Recording: Continuous Integration with JavaScript

The recording of our December 2 webinar with Wesley Higbee, Continuous Integration with JavaScript, is now available on JetBrains YouTube channel.

In this webinar you will learn about building and deploying JavaScript applications with TeamCity, JetBrains’ CI and deployment tool. Wes explains why we need CI and then covers the whole workflow for the modern JavaScript application: building the app, linting, unit testing and deployment. He uses tools like Gulp, SystemJS, TSLint and Karma during his demo, but in the same way you can configure any command-line tools to run on TeamCity.

You can reach Wes on Twitter @g0t4, read his blog at weshigbee.com and learn more about his company Full City Tech. Wes has also recently released a new video course on SystemJS.

Continue reading

Posted in Webinar | Tagged , , | Leave a comment

WebStorm 11.0.2 RC, 143.1183: bug fixes

WebStorm 11.0.2 Release candidate (143.1183) is now available for download.

This update brings lots of fixes and improvements:

  • Faster indexing for node_modules folder when using npm 3: WebStorm will index only modules listed in package.json.
  • Support for the bind operator ES7 proposal.
  • New Problems view in Dart.
  • Various improvements and fixed in JavaScript debugger.

The full list of fixed issues is available in the release notes. You can use a patch update from the previous WebStorm 11.0.2 EAP build (143.870). Please note that this build requires an active license.

Please report your feedback to our issue tracker.

Develop with pleasure!
– JetBrains WebStorm Team

Posted in Early Access Preview | Leave a comment

WebStorm 11.0.2 EAP is available

WebStorm 11.0.2 (build 143.870) first EAP is available for download.

This update includes critical bug fix for JavaScript debugger, HiDPI fixes for Windows/Linux and YAML parsing improvements. The full list of fixed issues is available in the release notes. You can use a patch update from the 11.0.1 if you’re on EAP update channel.

Please notice that it requires an active license.

Develop with pleasure!
– JetBrains WebStorm Team

Posted in Early Access Preview | 3 Comments

WebStorm 11.0.1 bug fix update available

We’re happy to announce that WebStorm 11.0.1 (build 143.382) is available for download!

This update brings important bug fixes, including the problem with debugging with Node.js 5.0. The full list of addressed issues is available in the release notes. A patch update from WebStorm 11 is also available.

Please report any issues on our issue tracker.

Develop with pleasure!
– JetBrains WebStorm Team

Posted in Release Announcements | 10 Comments

Live Webinar: Continuous Integration with JavaScript

Join us Wednesday, December 2nd, 10:00 AM – 11:00 AM EDT (15:00 – 16:00 GMT) for our free live webinar Continuous Integration with JavaScript, featuring Wes Higbee.

In this webinar you will learn about building and deploying JavaScript applications with TeamCity, JetBrains’ CI and deployment tool. We will cover dependency management, use of module bundlers like Webpack or SystemJS for the ECMAScript 6 code, and unit testing with Karma, and we’ll see how TeamCity can be a safety net for deployments.

We believe that this webinar is going to be interesting for anyone doing front-end development with WebStorm, other JetBrains IDEs as well as other IDEs and editors.

Space is limited, please register now.

The recording will be available after the webinar.

Hadi HaririWes Higbee is passionate about helping others achieve remarkable results with technology. Wes launched Full City Tech Co. to leverage his expertise to help companies rapidly deliver high quality software to delight customers. Quality is achieved through collaborative practices like Continuous Integration. Wes has a strong background in using Continuous Integration with TeamCity to bring quality to the table.
Posted in Webinar | Tagged , , , , , | Leave a comment