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.

vue-snippet

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 | 1 Comment

WebStorm 2017.3 EAP, 173.3415: improved Angular support, updated Live Edit configuration

The new WebStorm 2017.3 Early Preview build (173.3415.27) is now available. There have been improvements in the Angular support, and updates for the Live Edit configuration.

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.

Updated Live Edit configuration

For a while now, WebStorm has included a feature called Live Edit that worked during the JavaScript debug session to allow you to see the changes you made in your HTML and CSS files immediately in the browser.

Earlier in the course of this EAP we announced that WebStorm no longer requires a Chrome extension for debugging the client-side JavaScript code. However, the Live Edit feature still requires having it installed.

We’ve updated the configuration of Live Edit in Preferences | Build, Execution, Deployment | Debugger | Live Edit to allow you to enable and disable it completely.

live-edit-prefs

Continue reading

Posted in Early Access Preview | Tagged , | 3 Comments

WebStorm 2017.2.5 is now available

WebStorm 2017.2.5 is now available!

You can download WebStorm 2017.2.5 (172.4343.25) on our website or update in Toolbox App or in the IDE. The patch-update is available for WebStorm 2017.2.4 and 2017.2.3.

This update brings support for the upcoming TypeScript 2.6.

WebStorm Team

Posted in Release Announcements | Tagged | Leave a comment

WebStorm 2017.3 EAP, 173.3302: coverage reports for Jest

This week’s WebStorm 2017.3 EAP build (173.3302.13) is now available!

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


Download WebStorm 2017.3 EAP

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

Jest: updating snapshots and coverage reports

A new batch of improvements in the Jest integration had landed in this EAP build.

Now you can see code coverage reports for Jest tests in the IDE. The report will appear after the tests have run (select Run with coverage option instead of just Run), showing how many files were covered with tests and what percentage of lines in them are covered. From the report you can jump to the file and see which lines were covered (marked green) and which were not (marked red).

coverage-report-jest

Jest has a great feature of snapshot testing. If a snapshot doesn’t match the rendered app, the test will fail. That means that either there are changes in your code that caused that or the snapshot is outdated and needs to be updated. You can update the snapshot for a failing test right from the WebStorm test tool window by clicking the “Click to update snapshot” link.

update-snapshot-jest

This will restart the test together with the snapshot update. Continue reading

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

WebStorm 2017.3 EAP, 173.3188: better code completion and docs for JavaScript, new refactoring

This week the new WebStorm 2017.3 EAP build (173.3188.31) brings improved code completion and documentation for JavaScript and DOM APIs, a new refactoring for JavaScript and TypeScript classes, and improvements in webpack support.

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


Download WebStorm 2017.3 EAP

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

Improved code completion and documentation for JavaScript and DOM APIs

WebStorm now uses the TypeScript definition files to power its code completion for standard JavaScript objects and methods. These files are now packaged inside WebStorm and we are going to regularly update them.

Previously we used and maintained our own definition files. Thanks to the transition to the new definition files, WebStorm now provides code completion for Web APIs that were previously unsupported.

Another good news is that the new definition files have documentation for many methods (which you can see if you press F1). If the documentation if not available there, WebStorm will fetch and show the summary from the corresponding MDN article.

mdn-docs

From the documentation popup, you can quickly jump to the full documentation on MDN by clicking the arrow icon. Or you can go directly to it from the code by pressing Shift-F1. Continue reading

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

WebStorm 2017.3 EAP, 173.2941: watch mode with Jest and Mocha

Please welcome the new EAP build of WebStorm 2017.3 (173.2941.6).

To get it, update via Toolbox App, or download it here and install side by side with your stable WebStorm version.


Download WebStorm 2017.3 EAP

You can learn more about the new features added earlier in the WebStorm 2017.3 EAP builds in these blog posts.

Improved integration with Jest

Good news for everyone who is using Jest for testing! We’ve been working on improving integration with Jest in WebStorm, and now it works seamlessly with Jest’s watch mode. That means that you will now get super-fast test results from Jest on changes in the WebStorm test tool window.

All you have to do is to add --watch flag to the options field in the Jest run configuration in WebStorm. If you want to always start tests (including single tests you can run from the editor) in the watch more, add --watch to the default Jest configuration (for that open the Edit configurations… dialog, select and edit Jest under the Defaults list on the left).

jest-watch

In addition to that, WebStorm can now work with Jest configuration files written in JavaScript.

And Mocha

In the same way, WebStorm now allows you to add --watch option to the Mocha run configuration to run it using Mocha’s own watch mode.

Notable Changes

  • Better performance when using Flow with enabled navigation.
  • JavaScript debugger doesn’t require JetBrains IDE Support extension now for all new debug configurations. More details on that are coming in the next blog post. Please note that if you’re using Live Edit, you will still need the browser extension.
  • Support for tagged template literals language injection. This can be useful if you’re working with some CSS-in-JS libraries like CSJS. You can learn how to configure it in this comment.
  • Better support for import() syntax in JavaScript and TypeScript
  • React className is now autocompleted without {} or “”. Type an opening brace or quote, depending on what you need in this particular case, and the closing one will be added automatically.

You can find a list of addressed issues in the Release notes.

Please share your feedback and report issues on our tracker. Thank you!

WebStorm Team

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

Debugging Node.js apps in WebStorm

WebStorm makes it easier to debug Node.js apps. You can put breakpoints right in your source code (no more debugger and console.log() statements!), which can be written in JavaScript or TypeScript.

You can do many things that will help you explore the code and understand where the bug is. In the debugging tool window, you can see the call stack and the variables in their current state, evaluate expressions in the editor, and step through the code. And you can start debugging your app very quickly. Here’s how.

We’ll use a simple Express app as an example.

We need to do two things: first create a new Node.js run/debug configuration that will start the app, and then put a breakpoint.

  • To create a configuration, go to the Run menu and select Edit configurations… Click the + icon and select Node.js configuration type.
  • Now specify the path to the main file of the application that starts it. For the Express app it’s bin/www
  • Save the configuration. Put the breakpoints in your code. Now press Ctrl-D on macOS or Shift+F9 on Windows & Linux to debug the app (or click the green bug-like icon).

debug-local

Now if you do the actions that trigger the code where the breakpoint is, the app will pause on the breakpoint. Explore the call stack and the variables in the debugging tool window, hover over the expressions in the editor to see their current state, step through the code, or put new breakpoints to help you debug further. Continue reading

Posted in Tutorials | Tagged , | 16 Comments

WebStorm 2017.3 EAP, 173.2463: multiple JavaScript versions in project, ESLint improvements

Please welcome the second EAP build of WebStorm 2017.3 (173.2463.22).

To get it, update via Toolbox App, or download it here and install side by side with your stable WebStorm version.


Download WebStorm 2017.3 EAP

We started the WebStorm 2017.3 Early Access Program last week. If you’ve missed the announcement, check out this blog post.

Here are the new features you can try in this week’s EAP build (173.2463.22).

Advanced import of ESLint code style rules

Previously, in WebStorm 2017.2, you could only import code style rules that were explicitly written in ESLint JSON configuration files.

Now, it’s also possible to apply rules from more complex configuration files written in JavaScript and YAML, as well as from configurations that use extends. To do so, use the action Apply ESLint code style rules, which is available in the context menu of the config file.

eslint-apply

WebStorm will send a special command to ESLint asking for a full summary of the applied rules in JSON. It will then parse the output and apply the rules to the IDE settings. You will see the list of applied rules in the IDE log.

eslint-log

Please note that this action requires ESLint to be installed in your project. It also means that the import won’t happen automatically, as it happens for the .eslintrc JSON configs.

New Emmet syntax for JSX

Now you can generate JSX tags with Emmet that will have text inside the tag or value in curly braces.

div{Title} will expand into the tag with the content Title, and div{{title}} will expand into the tag with title in the curly braces.

emmet-in-jsx

By the way, the tag{} syntax can also be very useful in HTML and other template files. Continue reading

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

WebStorm 2017.3 Early Access Preview: new and improved refactorings, better Vue.js support, new REST Client

Today we’re starting the Early Access Program for WebStorm 2017.3, the big update that will be released the end of November 2017.

Toolbox App is the easiest way to get the EAP builds. You can also subscribe to the EAP updates option in the IDE (Preferences | Appearance & Behavior | System Settings | Updates) and get notifications when a new build is available.


Download WebStorm 2017.3 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 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.

WebStorm 2017.3 is going to bring many significant updates. Here are the highlights of what you can already try in this week’s EAP build (173.2290.2):

New and updated refactorings

Extract type alias in TypeScript

The new Extract type alias refactoring allows you to create an alias for a complex type.

Put the cursor on the type and call the Refactor this popup (Ctrl-T on macOS / Ctrl-Alt-Shift-T on Windows & Linux). Then select Extract Type Alias from the list and name the alias.

extract-type-alias

And if the type is used multiple times, the IDE will spot this and suggest automatically replacing all the instances with the new name. Continue reading

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