WebStorm 2018.1 Early Access Preview: improvements in CSS support, run icons for npm tasks

This week we are starting an Early Access Program for WebStorm 2018.1, an IDE update that will be released at the end of March.

Toolbox App is the easiest way to get the EAP builds. You can also get notifications right in the IDE when a new EAP build is available, for this select “Automatically check updates for Early Access Program” in Preferences | Appearance & Behavior | System Settings | Updates.

Download WebStorm 2018.1 EAP

If you’re not yet familiar with our Early Access Programs, here are some details:

  • Every week we publish a fresh build for the upcoming version of WebStorm.
  • EAP builds provide access to the newest features we’re currently developing.
  • EAP builds are free to use but expire 30 days after they’re built.
  • You can install an EAP build side-by-side with a stable WebStorm version.
  • We welcome your feedback in our issue tracker, youtrack.jetbrains.com/issues/WEB.
  • Please don’t forget to mention the build number you’re using.

Important: WebStorm EAP builds are not fully tested and may be unstable.

Over 180 issues were already fixed in WebStorm 2018.1 (and that doesn’t include the issues addressed in the IntelliJ-platform). Here are some of the highlights of the first WebStorm 2018.1 EAP build (181.2784.29).

Improvements in CSS support

Better code completion for SVG properties and values

In CSS we’ve updated the list of SVG properties and added code completion and validation for their values that were not available before.


Navigation from HTML to compiled CSS and its source

Before, when you cmd-clicked on a class name in the HTML file that had a link to a compiled CSS file, you always navigated to this class in that linked CSS file, even when an original source file in Sass, SCSS or Less was right next to it.

Now WebStorm will suggest navigating both to the CSS file and the source file, if there are source maps or these files have the same names and are located in the same folder. Continue reading

Posted in Early Access Preview | Tagged | 4 Comments

WebStorm 2017.3.3 is now available

WebStorm 2017.3.3 (173.4301.22) is now available!

As always, you can install this update using Toolbox App. If you’re using WebStorm 2017.3.1, 2017.3.2 or 2017.3.3 EAP, you will soon see an update notification in the IDE. If you are using an earlier WebStorm version, please download WebStorm 2017.3 from our website.

New in WebStorm 2017.3.3:

  • Responses from the new REST Client are now formatted automatically (WEB-28672)
  • Node.js debugger now supports –experimental-modules flag (WEB-30325)

What’s fixed:

  • False positive errors from the eslint-plugin-import ESLint plugin were fixed (WEB-30497)
  • Debug for apps created with Angular CLI 1.5.5+ (WEB-30035)
  • Debugging the app’s main process with Electron 1.8.1+ (WEB-29655)
  • Meteor debugger now uses –inspect by default (WEB-30124)

You can look through the full list of addressed issues in the Release notes.

WebStorm Team

Posted in Release Announcements | Tagged | 5 Comments

Using and creating code snippets

Code snippets, or Live Templates as they are called in WebStorm, can help you save and reuse code. This can be any code fragment that you find yourself using often – just a line of code like a method definition, or a skeleton for a whole file.

There are two ways to use a snippet: either type its designated abbreviation and hit Tab, or select it from the code completion suggestions.

What makes Live templates particularly useful is that you can customize them with variables. To move from one variable inside the template to the next one, press Enter or Tab.

Here’s an example. We’ve created and used a Live Template for a new React stateless component, in which a component name is a variable that we can specify when using the template. (We’ll talk about creating custom templates in a second.)

Simple Live Template in action

A template can have multiple variables and they can depend on each other. Here the variable for the selector name is a dashed-case version of the class name.

Live Template a-component with two variables

WebStorm has several collections of Live Templates that are available out of the box, including code snippets for development with Vue, Angular, and AngularJS. You can find then under Preferences | Editor | Live Templates.

By the way, Live Templates can be used not only in JavaScript or TypeScript, but in any language that WebStorm supports.

Creating a custom Live Template

Let’s now see how we can create our very own Live Template. For this example, we’ll create a template for an Angular component, similar to the default a-component. This is a simple one! Continue reading

Posted in Cool Feature, Tutorials | 4 Comments

Debugging client-side JavaScript with WebStorm 2017.3

We have some good news for everyone who is using WebStorm to debug client-side JavaScript apps in Chrome!

The first big news is that starting with Chrome 63, you can now use Chrome DevTools and WebStorm debugger at the same time.

Second, with WebStorm 2017.3 you no longer need an additional Chrome extension to debug apps in WebStorm.

Debugging in WebStorm and in Chrome DevTools at the same time

If you’ve ever tried to open DevTools in the browser while having a debugger opened in WebStorm, or vice versa, you saw that the WebStorm debugger immediately disconnected.

That happened because both WebStorm and DevTools are using the same debug protocol that did not support multi-client debugging. For many years, this Chromium issue was one of the most popular on their tracker. Well, now it’s finally fixed in Chrome 63!

This means that now you can use both the DevTools debugger and the WebStorm debugger at the same time, having their best features at your command.

For example, you can debug your app using WebStorm where you can put the breakpoints right in the source code, and then use the DevTools Elements panel to inspect DOM and styles, or its powerful Network panel to get insights into network performance.

Debugging with Webstorm and Chrome at the same time

Stepping through the code is synchronized between DevTools and WebStorm. Once a breakpoint is hit, you can use the step and resume actions in either tool – both tools will show the execution point in the code and update the call stacks and the variables view.

Easy start with JavaScript debugger

As of WebStorm 2017.3, you no longer have to install JetBrains’ Chrome extension to debug your client-side apps in the IDE.

To debug the app, all you have to do now is create a new JavaScript debug configuration and specify the URL your app is running on. Then put the breakpoints in the code and start the debug configuration. WebStorm will open a new instance of Chrome (with the remote debugging on) and seamlessly attach to it.

WebStorm team

Posted in Cool Feature | Tagged | 30 Comments

Working with Vue.js in WebStorm

Vue.js is a popular framework for creating user interfaces. Its core functionality is focused on building UI components, which is quite similar to React and Angular.

In 2017 Vue.js gained real momentum: according to the recent results of the State of JavaScript survey it’s one of the most used frameworks at the moment, and many developers are interested in learning it.

WebStorm introduced support for Vue.js at the beginning of 2017, and since then we’ve added lots of improvements.

Let’s take a look at how WebStorm (or PhpStorm, IntelliJ IDEA, PyCharm, GoLand, or RubyMine with the Vue.js plugin) can help you to work with a Vue.js app written in JavaScript.

Create a new Vue.js project

One of the best ways to create a new Vue app is using the Vue CLI. It has a bunch of base project templates that can also be additionally configured to your needs – when generating the project; the CLI will ask you additional questions about the code style, linters, test runners, etc.

In this post, we are going to use a project created using the webpack template with configured vue-router.

Just install the dependencies and open the project in WebStorm and then we’re ready to go!

Run the app

To run our app, we need to run an npm start task that will start the dev server. To do that, simply double-click on the task name in the npm tool window on the left side of the IDE.

When the app is compiled, open http://localhost:8080 in the browser to see the app.


By default, all the apps generated with the Vue CLI use the webpack dev server with the hot module replacement mode enabled. It means that when you change something in the components and the changes are saved, the app in the browser is automatically updated. Please note that WebStorm auto-saves your changes when you switch the focus to another application or start a run configuration.

Working with the code

Let’s create a new component in an src/components folder where the components are stored.

We can use a file template for the Vue components that WebStorm provides, there are template, script, and style tags: right-click on the folder, select New… – Vue Component and then name it.


We want our new component to render a greeting when we click a button.

Using code snippets

Continue reading

Posted in Tutorials | Tagged | 39 Comments

WebStorm 2017.3.2 is available

WebStorm 2017.3.2 is now available!

You can install this update using Toolbox App. If you’re using WebStorm 2017.3, 2017.3.1 or 2017.3.2 EAP, you will soon see an update notification in the IDE. If you are using an earlier WebStorm version, please download WebStorm 2017.3 from our website.

WebStorm 2017.3.2 brings over 50 bug fixes (please see the Release notes).

In addition to that, WebStorm 2017.3.2 improves support for Vue component from the component libraries, like Vuetify: they are now available in code completion and you can jump to their definition with cmd-click.


WebStorm Team

Posted in Release Announcements | Tagged , | 4 Comments

WebStorm 2017.3.1 is now available

WebStorm 2017.3.1, the first bug-fix update for the recently released WebStorm 2017.3 is now available!

You can install this update using Toolbox App. If you’re using WebStorm 2017.3, 2017.3.1 EAP, or 2017.2.5, you will soon see an update notification in the IDE. If you are using an earlier WebStorm version, please download WebStorm 2017.3 from our website.

WebStorm 2017.3.1 brings not only the bug fixes but also includes a number of improvements.

Support for Fragments in React 16.2

WebStorm 2017.3.1 adds support for the new Fragment feature in React.
The editor now understands the new Fragment syntax that allows you to list children elements in the component’s render method surrounded by an empty tag or put into an array.


You will also get code completion for the new Fragment component. Continue reading

Posted in Release Announcements | Tagged , , | 11 Comments

WebStorm 2017.3: improved Vue.js support, new refactorings, new REST Client, and more

🎉 Today we’re announcing WebStorm 2017.3  🎉

This big update brings improvements to all parts of the IDE, from support for JavaScript, TypeScript, and the frameworks to debugging and testing.

Here are the key highlights of WebStorm 2017.3 that you can’t miss:

  • Enjoy improved code completion and documentation for standard JavaScript
    objects and methods.
  • Move class methods up the class hierarchy safely with the new ‘Pull member
    up’ refactoring
  • Use the new ‘Extract type’ and ‘Extract interface’ refactorings in TypeScript.
  • Enjoy better code completion and navigation and new code snippets for
  • Run tests with Jest in watch mode, update failing snapshots in one click, and
    explore code coverage reports in the IDE.
  • Test REST APIs right from the editor.

Explore the new features and download WebStorm 2017.3 on our website.

Download WebStorm 2017.3

WebStorm Team

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

WebStorm 2017.3 EAP, 173.3622: Vue code snippets and alias for system’s default node

The new WebStorm 2017.3 Early Preview build (173.3622.29) is now available.

You can update via Toolbox App, or download the build here and install it beside your stable WebStorm version.

Download WebStorm 2017.3 EAP

To learn more about all the new features added in earlier WebStorm 2017.3 EAP builds, please check out these blog posts.

Code snippets for Vue.js

With this EAP build we’re adding a collection of Live templates for Vue.js. These code snippets has been adapted from the collection created by Sarah Drasner.

To use a code template, type its abbreviation or select it from the list of available templates (Cmd-J on macOS or Ctrl-J on Windows and Linux) and press Tab to expand it. Press Tab again to move from one variable to another inside the template. Continue reading

Posted in Early Access Preview | Tagged , | Leave a comment

WebStorm 2017.3 EAP, 173.3531: faster indexing and improvements in VCS

The new WebStorm 2017.3 Early Preview build (173.3531.1) is now available.

You can update via Toolbox App, or download the build here and install it beside your stable WebStorm version.

Download WebStorm 2017.3 EAP

To learn more about all the new features added in earlier WebStorm 2017.3 EAP builds, please check out these blog posts.

Optimizing project indexing

As you may know, to provide code completion and navigation WebStorm has to analyze the project sources. This process is called indexing. It happens when you open the project for the first time, install the project’s dependencies, update from a version control or change the branches, or simply add new files to the project.

There are two things that affect the indexing time: 1. The amount of data that the IDE needs to index; and 2. The actual speed of processing each file. For every WebStorm release, we are making many small and big improvements on the both fronts. This time we decided to tell you a bit more about what’s been done in WebStorm 2017.3.

Reducing the number of indexed files

Here what’s been done:

  • We’ve made some optimizations for the packages required for an Angular project. The biggest one was the switch from indexing the compiled JavaScript files to using the metadata.json files for the Angular packages. For the projects generated with Angular CLI, it allowed us to cut about 2MB of files from indexing.
  • We’ve switched from using the custom definition files for the standard JavaScript and DOM APIs to using the TypeScript type declarations files. This gives us a small decrease to the indexed file size.
  • We’ve introduced pre-built indices: this allowed us to ship some index information right with the IDE distribution. Right now it’s done only for the standard JavaScript APIs that we’ve mentioned above, but we plan to extend it further in the future.

Continue reading

Posted in Early Access Preview | Tagged | 5 Comments