We are very excited to announce today the release of WebStorm 11! This major update is aligned with updates for other JetBrains products that comprise JetBrains Toolbox.

Download and install WebStorm 11 right now!

WebStorm 11 refines your web development experience by adding support for powerful cutting-edge technologies and thoroughly improving the core functionality of the IDE. New features in WebStorm 11 include:

• Improved TypeScript support: WebStorm 11 now fully supports the latest TypeScript 1.6 features and brings coding assistance for JSX and ES2015 features to TypeScript code. WebStorm also adds integration with TSLint
• Flow and React support improvements: We’ve added basic support for Flow type annotations, and improved code completion and navigation for React components.
• Initial support for Angular 2: WebStorm 11 provides code completion for Angular 2 binding, components and new event attributes in TypeScript and ECMAScript 2015
• npm scripts: A new tool window lists all tasks in package.json and allows you to run any of them with a simple double-click.
• Yeoman integration: Hundreds of new project generators are available right from the IDE Welcome screen, thanks to the new integration with Yeoman.

Among other notable updates are improved support for ECMAScript 2015, the option to run a single Mocha test, a new Preview mode for Find in path, support for debugging projects built with Webpack, new Node.js configuration and inspections, improved Dart support powered by the Dart Analysis Server, and much more.

For a more detailed overview please visit What’s new in WebStorm 11, and download the IDE for your OS.

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.

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:

And now:

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.

Improvements in Angular 2 support

This WebStorm 12 EAP build brings smarter code insight for one-way binding in Angular 2 applications. Now you can get jump from the binding in the component usage to the property in the component definition.

Coding assistance for component names in HTML and event attributes is now fixed when working with angular2-beta.

WebStorm running on Java 8

The whole IntelliJ IDEA platform migrates to Java 8. That means that now you can not launch WebStorm under a JDK older than Java 8. The change affects all the EAP builds (144.*) and further major releases in Spring, 2016.

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

Please report your feedback to 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.

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

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

– JetBrains WebStorm Team

A new WebStorm 12 EAP build is now available! The highlights of this update include: running and debugging Node.js apps remotely from the IDE, unused import warning for JavaScript and TypeScript, more improvements in Angular 2 support, and more.

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

Read about the features and improvements added in other 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.2925: Inline rename, smarter auto-imports and Optimize imports action for TypeScript, debugging async client-side code, and improvements in Angular 2 support.

Unused imports warning

WebStorm will now highlight any unused ES6 imports in JavaScript and TypeScript files.

With Optimize imports (Ctrl-Alt-O) (which now also works in JavaScript files), you can get rid of any unused imports and merge multiple import statements for symbols from one module. Or you can remove each unused import individually using a quick-fix – just press Alt-Enter on the highlighted import.

Code folding for ES6 imports

Import statements in JavaScript and TypeScript files are now folded by default.

With the updated Related symbols… action (Cmd-Ctrl-↑ on OS X, Ctrl+Alt+Home on Windows and Linux), you can see the list of imported symbols and jump to their definitions.

Code assistance in tsconfig.json, .babelrc and .eslintrc

WebStorm now provides smarter code completion based on JSON Schemas in tsconfig.json, .babelrc and .eslint configuration files. Press Alt-Enter or just start typing to get a list of all properties and their available options.

Remote run and debug for Node.js apps

One of the biggest new features in WebStorm 12 EAP is that you can now run and debug your Node.js apps on a remote server or Vagrant box right from the IDE.

To set up a Remote Node.js interpreter, click the … button to the right of the Node.js interpreter field in the Node.js run/debug configuration. Then click + and select Add Remote. You can configure a remote interpreter using an existing SFTP deployment configuration or Vagrantfile, or by entering SSH credentials.

If you’re using SSH credentials, you need to configure a mapping between the local project root and its remote location in your run/debug configuration.

Then specify the JavaScript file you need to run, save the configuration and you’re ready to go – put the breakpoints in your code and click Debug.

Vagrant integration

Integration with Vagrant is now available in WebStorm out-of-the-box. You can run, reload and stop the Vagrant box from the IDE, without using the command line.

Press Cmd-Shift-A, type Vagrant and press Enter to access the list of available Vagrant commands or assign this action to a shortcut of your choice in Preferences | Keymap.

Angular 2 support improvements

Lots of improvements in Angular 2 support have landed in this EAP build.

Paths in templateUrl and styleUrls fields are now resolved and you can in one click jump to the file.

WebStorm will now inject JavaScript inside any bindings so you can enjoy code completion.

You can now get coding assistance and type inference for the variables defined in the template.

Other improvements include code completion and resolve of custom event handlers defined in the component with the @Output decorator.

Debugging Electron applications

Now you can debug Electron applications with WebStorm.
To debug the app’s main process, you need to create a Node.js run/debug configuration and specify the path to the Electron executable in the Node.js interpreter field. To debug packaged apps, specify the path to Electron inside the built app (for example, on Mac that would be your_app.app/Contents/MacOS/Electron).

If you’d like to debug the render process, first start the app with the --remote-debugging-port= option. Then create a Chromium remote run/debug configuration, specify that port number and start the debugger. That’s it!

Start run and debug configurations while indexing

We’ve made it possible to start run/debug configurations while your project is still indexing. For example, you can now start a build task or run your Node.js app. Please note that there might be some limitations when you start the debugger while indexing is in progress.

And finally, check out some new features coming to WebStorm from IntelliJ Platform:

• support for right-to-left languages in the editor
• by-word difference highlighting in all diff dialogs
• an option to compare revisions of a file between branches in Mercurial

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

Please report your feedback to 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

Keeping up with everything that’s going on in the web development community and the JavaScript ecosystem can be challenging. With lots of articles and blog posts that we on the WebStorm team go through on a regular basis, we thought we’d share some that we enjoyed and discussed the most over the past month.

We’re not going for the most comprehensive digest out there, but want to focus mainly on covering the technologies already supported in WebStorm as well as the industry’s best practices.

JavaScript, libraries and frameworks

Dr. Axel Rauschmayer, who’s well known for his blog 2ality and multiple books about JavaScript, has started a new weekly email newsletter, ES.next News.

Jake Archibald in his blog talks about web streams and how they will help us take even more control over network processes and improve the performance of web pages.

On January 14 jQuery celebrated its 10th birthday and is still one of the the most popular frameworks for web development. John Resig, the author of jQuery, shares his memories and jQuery milestones. On the same day jQuery 3.0 reaches beta… and it no longer supports IE6-8.

If you’ve missed this news, as of January 12, 2016, Microsoft has ended support for older versions of Internet Explorer (versions 6-8).

Péter Márton shares his perspective on the best practices for developing React apps in 2016. We think the only thing missing is WebStorm :) Don’t forget to check out the WebStorm tips on coding assistance, linting and refactoring for React developers.

One of January’s most discussed articles was Cory House’s critical comparison of Angular 2 and React. By the way, support for both frameworks saw some noticeable improvements in WebStorm 12 EAP. Unfortunately or luckily for us all, there’s no silver bullet. JavaScript fatigue and the state of modern web development also were hot topics this January.

Node.js

In January Microsoft open sourced ChakraCore, part of their JavaScript engine, and sent a pull request to enable Node.js to work with ChakraCore. The Microsoft team shows some performance improvements when using Node.js with ChakraCore for some real-life tasks, as compared to the current Node.js version with V8.

While that pull request is still going through the code review, the Node.js community is discussing plans for moving toward VM neutrality.

Sacha Greif, a co-author of Discover Meteor, talks about the current state of the Meteor platform and what went wrong, and shares his hopes for Meteor becoming a back-end platform for building React apps in the future.

Tools

The Battle of Task Runners is far from over. Cory House shares his experience of moving from Gulp and Grunt to writing npm scripts (good that WebStorm supports them all, right?!). He believes that Gulp and Grunt introduce redundant abstractions that make debugging really complicated and the whole build process too unstable and too dependent on dozens of plugins.

And a bit more on npm:

• a great collection of tips and articles on npm;
• surprising discovery that disabling npm install progress bar leads to a significant improvement in performance (the fix is on the way).

We hope you’ve enjoyed this overview of January’s trending web topics. We’ll be super happy to hear your feedback on this blog post! Did you like it? Should we continue this type of posts? Let us know!

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:

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.

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.

Install missing module from npm

WebStorm will now suggest you to install a module in the import statement, if it’s available on npm and add it to the package.json.

More improvements in Angular 2 support

You can now enjoy smarter coding assistance for directives inside Angular 2 inline templates.

Trailing commas in function parameter lists and calls

This ES7 feature proposal is now supported in WebStorm when JavaScript language version is set to ECMAScript 6.

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:

• WebStorm 12 EAP, 144.3891: Debugging Web workers, improvements in Dart support.
• 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 intsconfig.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.

Please report your feedback to 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

WebStorm is well-known for its AngularJS support. WebStorm 2016.1 introduces lots of new exciting features in Angular (previously known as 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 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 apps in TypeScript in WebStorm. We’ll have a look at:

• Auto imports in TypeScript
• Using Angular CLI
• Code completion in Angular components and templates
• Documentation lookup
• Navigation
• Refactoring Angular components and methods
• Compiling TypeScript
• Debugging Angular apps

Disclaimer: This blog post is not intended as a tutorial for getting started with Angular . If you’re new to Angular, we suggest you to go through the Angular Quickstart first. While Angular 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 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

To make WebStorm understand Angular syntax, we need to have Angular library files in our project.

The easiest way to add Angular to the project is using npm. If you don’t have package.json file in the project yet, run in the terminal opened in the application’s root folder: npm init -y

Then run: npm install --save @angular/core

That will install the core Angular package with the critical runtime parts of the framework. Most probably you would also need to install other packages Angular consists of – here’s a full list.

Tip: If you have already added a package.json file in your project, you can just right-click it in the IDE Project view and use Run npm install action.

Using Angular CLI

WebStorm 2016.2 adds integration with Angular CLI for bootstrapping new Angular  projects. Install Angular CLI globally via npm:
npm install -g @angular/cli

Now you can create new projects with it from the IDE Welcome screen: click Create New Project, select Angular CLI from the list on the left, enter project name, click Ok, wait till all dependencies are installed and you’re ready to go.

Auto imports in TypeScript

One of the great advantages of using typed languages like TypeScript is that you get far more precise and intelligent coding assistance, which helps you write better code more efficiently.

To define a component in our Angular application, we use @Component decorator. It needs to be imported from the Angular 2 library.

WebStorm can import symbols from other files and modules automatically. So you can just start typing @Component or, for example, a class defined in the project and WebStorm will just take care of the import statement. By the way, imported symbols from the same module are nicely put in one import statement.

You can disable auto imports in Preferences | Editor | General | Auto Import. You can still add the import by hitting Alt-Enter on the unresolved symbol and selecting Add import statement.

If you want to import everything you need first, start typing the import statement and WebStorm will suggest the files and modules to import as well as the symbols available in them.

For all unused imports, WebStorm will show a warning. With the Optimize imports action (Ctrl-Alt-O), you can easily clean up all the unused imports and merge related import statements from the same file into one line.

Code completion in Angular components and templates

WebStorm will provide you with code completion results for any functions, methods, and properties, as well as for Angular-specific event and property bindings and inside them.

Here are a few examples:

Inside any template you’ll get code completion for methods defined in the component:

Code completion suggestions and resolve work for custom event handlers defined in the component with the @Output decorator, for example:

If you’ve defined a variable inside the template, you’ll get coding assistance and type inference for it later in the same template.

In @Component decorator we can see suggestions for available properties, such as selector or template.

Documentation lookup

With the caret on Angular methods or functions, you can press F1 to quickly view documentation. You can also invoke Documentation right from code completions results.

Navigation

One of the most useful shortcuts for navigating around the code is Ctrl-click (or Ctrl-B) on Windows and Linux and Cmd-click or Cmd-B on OS X – it takes you to the definition of any class, function, method, variable or component. It also allows you to jump to a different module from the import statement.

Some Angular-specific navigation includes:

• Navigation to the file from the path in styleURLs and templateURL.
• Jumping to the component definition (to the @Component where you have specified its name it the selector parameter) from its usage in the HTML file.
• Navigation from a one-way binding in the component to the property defined using @Input in the component definition.

Press Ctrl/Cmd-Alt-Left arrow to navigate right back to where you were.

Refactoring Angular components and methods

Refactoring options available in WebStorm can be a real time saver.
For component names you can use Refactor – Rename. Press Ctrl-T on the tag or selector property in the component definition and then select Rename.

Rename also works for custom event handlers, class names and methods defined in the component.

Compiling TypeScript

If you don’t have a fully set-up built process for your app, you may want to try a built-in TypeScript compiler. You can read about it in our How to compile TypeScript blog post.

Debugging Angular app

If you’d like to debug your Angular app created with Angular CLI in WebStorm, check out this step-by-step tutorial.

Also watch a recording of our webinars WebStorm: Angular 2 Tips and Tricks featuring John Lindquist and Using WebStorm for Building Angular Apps with Victor Savkin.

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

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.

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.

Improvements in TypeScript support

In TypeScript you can now enjoy a smarter support for enums.

Single vs double quotes in HTML attributes

You can now configure whether you want IDE to add single, double or no quotes at all when autocompleting attributes in HTML and JSX. The option is available in Preferences | Editor | Code style | HTML – Other – Generated quote marks.

Code coverage for Dart

Run with Coverage option is now available for the Dart command-line app run configuration. It’s not yet supported for Dart Test because of the Pub tool limitation.
In addition to that, you can now use other language injection in string literals and navigate through the Call hierarchy for Dart code.

The bigger list of issues addressed in this EAP build you can see on our issue tracker.

Please report your feedback to 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.

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

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

Ryan Dahl, the creator of Node.js, has finally introduced Deno, a new runtime for JavaScript and TypeScript. If you’re eager to give it a go, we’ve got some great news for you! Starting with v2020.1, you can get support for Deno in WebStorm and other JetBrains IDEs, including PhpStorm, IntelliJ IDEA Ultimate, and PyCharm Professional. Let’s see what’s included in this support.

Installing the Deno plugin

At the moment, Deno support is provided through the corresponding plugin which is not bundled with WebStorm and other JetBrains IDEs. This may change later depending on the popularity of Deno and the feedback we’ll get from you.

To install the Deno plugin, go to Preferences/Settings | Plugins and search for Deno under the Marketplace tab. Then, open Preferences/Settings | Languages and Frameworks | Deno to enable Deno support for your current project. (more…)

WebStorm 2020.2 EAP build #4 is now available!

If you’re unfamiliar with our Early Access Program or if you want to catch up on all the new features, check out our previous EAP blog posts. (more…)

WebStorm 2020.2 EAP build #5 is now available!

If you’re unfamiliar with our Early Access Program or if you want to catch up on all the new features, check out our previous EAP blog posts. (more…)

WebStorm 2020.2 EAP build #6 is now available!

If you’re unfamiliar with our Early Access Program or if you want to catch up on all the new features, check out our previous EAP blog posts. (more…)

WebStorm provides many ways to get around in your source code, project files, and IDE settings more efficiently. Let’s take a look at some of them. (more…)

WebStorm 2020.1.3, the third bug-fix update for the recently released WebStorm 2020.1, is now available! (more…)

WebStorm 2020.2 Beta is now available! To catch up on what has already been implemented in v2020.2, check out our previous EAP blog posts. (more…)

The list of learning resources for WebStorm continues to grow! In addition to the recently launched learning plugin and the WebStorm Guide, we’re actively working on a series of videos that will help you understand the fundamentals of WebStorm. (more…)

We’re ready to share the second video from our WebStorm Fundamentals series! In this video, we explore some of the most common ways to tailor WebStorm’s look and feel to your liking. (more…)

WebStorm 2020.2 Beta 2 is now available! To catch up on what has already been implemented in v2020.2, check out our previous EAP blog posts.

The Toolbox App is the easiest way to stay up to date with the EAP builds and keep your stable WebStorm version at the same time. You can also download the EAP builds from our website. You can choose to be notified directly from the IDE when a new EAP build is available: go to Preferences/Settings | Appearance & Behavior | System Settings | Updates and select Automatically check updates for Early Access Program.

DOWNLOAD WEBSTORM 2020.2 EAP

Important! WebStorm EAP builds are not fully tested and might be unstable.

Here are some of the highlights of WebStorm 2020.2 Beta 2 (build 202.6397.17). For the full list of issues fixed in this update, see the release notes.

Support for Nuxt.js

In the past year, we’ve done a lot to make WebStorm’s Vue coding assistance the most advanced on the market so that you can work with Vue projects more comfortably. We’re happy to say that we’ve managed to deliver on this promise! In addition to many existing features, this build comes with support for Nuxt.js, a popular framework built on top of Vue. Here is what’s included in this support.

First of all, if you’re using a Nuxt version from 2.9.0 onwards and don’t have the @nuxt/types package installed, WebStorm warns you about it and suggests installing it as a dev dependency. Please do so if you want the IDE to have better code completion.

When working with the nuxt.config.js file, you’ll now get proper code completion suggestions. On hover, you’ll also see the Documentation popup showing the type information for the Nuxt options used in the file.

Nuxt-specific webpack setup is also supported now. Starting with Nuxt.js 2.12.0, WebStorm will automatically find the webpack config file and use the module resolution rules from it for coding assistance. For versions earlier than 2.12.0, you can copy the script from here and point WebStorm to it to achieve the same result.

Besides that, WebStorm now supports all core Nuxt.js components, providing you with code completion suggestions and relevant documentation on mouseover. The IDE also recognizes references to the Vuex store and can resolve and autocomplete them correctly.

Lastly, all assets put into the static directory and referenced in Vue templates in the <img src="/logo.png"/> format will be properly resolved in your Nuxt.js project too.

New intentions around optional chaining and nullish coalescing

In addition to the recently added intention for converting code to optional chaining and/or nullish coalescing, WebStorm 2020.2 brings a new intention that does the opposite.

Let’s say you’ve changed your mind and want to get the initial code back to add an extra condition. With the new intention, it can be done easily! Place the caret on the expression you’d like to convert, press Alt+Enter and select Expand optional chaining and nullish coalescing.

This isn’t the only new intention we’ve added. You can now quickly convert code to optional chaining and nullish coalescing in if/else conditional statements. This will work for logical operators used in such statements and for nested if statements too. Try it yourself! Press Alt+Enter on the expression you want to convert and select the corresponding intention.

Those are all the biggest highlights. Please report any issues you encounter to our issue tracker, and stay tuned for next week’s update!

The WebStorm team