WebStorm 2019.3 EAP #6: Template Language Injections, Suggestions for Variable and Parameter Names, and More

Posted on October 17, 2019 by Ekaterina Ryabukha

WebStorm 2019.3 Early Preview 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 the previous EAP blog posts.

The Toolbox App is the easiest way to get the EAP builds and keep both your stable WebStorm version and any EAP versions up to date. Or you can download the EAP builds from our website. You can also get notified right 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 2019.3 EAP

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

Here are some of the highlights of WebStorm 2019.3 EAP #6 (build 193.4697.16). For the full list of issues fixed in this update, see the Release Notes.

Injecting Template Languages into Your Code

Sometimes you have code in a language that is different from the main language of your file, for example, some HTML in a string in your JavaScript file. As you may know, WebStorm is helpful enough to give you code completion for those bits of code. The technical term for this mechanism is language injections. Continue reading →

Posted in Early Access Preview | Tagged , | 2 Comments

WebStorm 2019.3 EAP #5: TypeScript 3.7, Support for Vue.js Named Slots, and Completion for CSS Libraries on CDN

Posted on October 10, 2019 by Ekaterina Prigara

WebStorm 2019.3 Early Preview 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 the previous EAP blog posts.

The Toolbox App is the easiest way to get the EAP builds and keep both your stable WebStorm version and any EAP versions up to date. Or you can download the EAP builds from our website. You can also get notified right 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 2019.3 EAP

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

Here are some of the highlights of WebStorm 2019.3 EAP #5 (build 193.4386.12). For the full list of issues fixed in this update, see the Release Notes.

Support for TypeScript 3.7 Features

WebStorm 2019.3 will introduce support for two new TypeScript 3.7 features: optional chaining and nullish coalescing. To preview this, update your project TypeScript version to 3.7.0-beta or turn off the TypeScript service in Preferences/Settings | Languages and Frameworks | TypeScript.

We plan to support the new syntax in the upcoming WebStorm 2019.2.4 as well.

Completion for slot names for Vue.js components from the project

As we promised a couple of weeks ago when announcing improvements for Vue slots
support, we are adding autocompletion for the names of slots of Vue components defined in your project.

So if you have a component in your project that has named slots, now when using this component, you’ll see suggestions for these names in the v-slot directive of a template tag.

Completion for Vue.js named slots

Completion for classes from CSS libraries added using a CDN link

If you’re using Twitter Bootstrap or another CSS library in your project and you have it linked from a CDN in your HTML file, you can now get completion for the class names from this library, without adding its sources to the project. Continue reading →

Posted in Early Access Preview | Tagged , , , , | 1 Comment

WebStorm 2019.3 EAP #4: Improvements in Debugger, Push Any Branch

Posted on October 4, 2019 by Ekaterina Prigara

WebStorm 2019.3 Early Preview 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 the previous EAP blog posts.

The Toolbox App is the easiest way to get the EAP builds and keep both your stable WebStorm version and any EAP versions up to date. Or you can download the EAP builds from our website. You can also get notified right from the IDE when a new EAP build is available: go to Preferences | Appearance & Behavior | System Settings | Updates and select “Automatically check updates for Early Access Program”.

DOWNLOAD WEBSTORM 2019.3 EAP

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

Here are some of the highlights of WebStorm 2019.3 EAP #4 (build 193.4099.10). For the full list of issues fixed in this update, see the Release Notes.

See return values in Variables view

We’ve added a new Show Method Return Values option to the debugger (you need to click the gear icon on the debugger’s left panel to enable it). This option allows you to see what value the method returns without using console.log, creating an extra variable or using Evaluate expression.

With this option on, you’ll see the return value right on top of the variables view as soon as you step through this line of code (pause on it first and then click Step over or Step into). You can change its value if needed.

Show method return values in debugger

Enable Show Method Return Values in debugger tool window

Continue reading →

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

WebStorm 2019.3 EAP #3: Lots of Improvements in Vue.js Support, Updated “Compare with Current” Action for Branches

Posted on September 26, 2019 by Ekaterina Prigara

WebStorm 2019.3 Early Preview build #3 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 the previous EAP blog posts.

The Toolbox App is the easiest way to get the EAP builds and keep both your stable WebStorm version and any EAP versions up to date. Or you can download the EAP builds from our website. You can also get notified right from the IDE when a new EAP build is available: go to Preferences | Appearance & Behavior | System Settings | Updates and select “Automatically check updates for Early Access Program”.

DOWNLOAD WEBSTORM 2019.3 EAP

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

Here are some of the highlights of WebStorm 2019.3 EAP #3 (build 193.3793.13). For the full list of issues fixed in this update, see the Release Notes.

Support for Vue.js components defined in separate files

The most requested feature around WebStorm’s Vue.js support – by far – is support for components not defined in a single .vue file but in separate files.

We have some great news for anyone using these patterns: WebStorm can now understand the link between different parts of the component located in separate files, and provide proper code completion for props, data, and methods.

Here’s an example – we have separate JavaScript and stylesheet files that are linked in the vue file though the src attribute. Props defined in JavaScript are now properly completed in the template as do methods.

Vue components defined in separate files

Continue reading →

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

WebStorm 2019.2.3 is available

Posted on September 25, 2019 by Ekaterina Prigara

WebStorm 2019.2.3 is now available!

Update to it using Toolbox App, or from the IDE. You can also download WebStorm 2019.2.3 from our website.

Fixes and improvements in WebStorm 2019.2.3:

  • Navigation bar is now correctly displayed in the full-screen mode on macOS (JBR-1649)
  • “Compare with Current” for git branches now shows a dialog as in 2019.1 (IDEA-209664)
  • It’s now again possible to assigning file patterns back to common file types (WEB-38869)
  • Option to enable more contrast scrollbars is now available in Preferences/Settings – Appearance & Behavior | Appearance (IDEA-69682)
  • Performance problem in projects with lots of ignored files was fixed (IDEA-219152)
  • Errors are now correctly highlighted in Dart files after external changes (WEB-41017)
  • Problem with saving passwords on Ubuntu was fixed (IDEA-185926)

You can find a full list of issues fixed by the WebStorm team in the release notes.

The WebStorm Team

Posted in Release Announcements | Tagged | 6 Comments

WebStorm 2019.3 EAP #2: timeline for GitHub pull requests, quote style for CSS, Run Anything action

Posted on September 20, 2019 by Ekaterina Prigara

WebStorm 2019.3 Early Preview build #2 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 the previous EAP blog post.

The Toolbox App is the easiest way to get the EAP builds and keep both your stable WebStorm version and any EAP versions up to date. Or you can download the EAP builds from our website. You can also get notified right from the IDE when a new EAP build is available: go to Preferences | Appearance & Behavior | System Settings | Updates and select “Automatically check updates for Early Access Program”.

DOWNLOAD WEBSTORM 2019.3 EAP

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

Here are some of the highlights of WebStorm 2019.3 EAP #2 (build 193.3519.19). For the full list of issues fixed in this update, see the Release Notes.

Dart Support Now Available as a Plugin

Starting with WebStorm 2019.3, if you use Dart, you’ll need to install the Dart plugin in Preferences | Plugins. This is exactly the same plugin that was available out of the box in WebStorm before.

We’re unbundling the plugin in order to have more flexibility when releasing updates for it. Right now, bundled plugins can only be updated together with an update of the entire IDE. When a plugin is available separately, it can have its own release cycle.

Continue reading →

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

WebStorm 2019.3 Early Access Program and Roadmap

Posted on September 12, 2019 by Ekaterina Ryabukha

Over a month ago, WebStorm 2019.2 went live. Since then, we’ve released two bug-fix updates, WebStorm 2019.2.1 and WebStorm 2019.2.2, and started to work on WebStorm 2019.3, which is scheduled for release at the end of November. It’s now time to share our plans for the upcoming release and announce the start of the Early Access Program.

Continue reading →

Posted in Early Access Preview | Tagged , | 12 Comments

WebStorm 2019.2.2 is available

Posted on September 10, 2019 by Ekaterina Prigara

WebStorm 2019.2.2, the second bug-fix update for WebStorm 2019.2, is now available!

Update to it using Toolbox App, or from the IDE. You can also download WebStorm 2019.2.2 from our website.

What’s fixed:

  • CORS problem when debugging in Chrome caused by the x-ijt header was fixed (WEB-30191)
  • Working directory is now set automatically when running a JavaScript scratch file with Node.js (WEB-38037)
  • File watchers that reformat the code now better handle cases when file and class are renamed (WEB-33502)
  • Shortcut for the “Stretch to Left” action for resizing Project View now works again (IDEA-218926)
  • Problem with saving updated settings for new projects was fixed (IDEA-211731)

You can find a full list of issues addressed in WebStorm 2019.2.2 in the release notes.

The WebStorm Team

Posted in Release Announcements | Tagged , | Leave a comment

Using TypeScript to check your JavaScript code

Posted on September 3, 2019 by Ekaterina Prigara

There are several things WebStorm can do to help you find potential problems in your JavaScript code and improve its quality.

First, there are dozens of smart built-in inspections that check your code as you type and offer various quick-fixes for the problems they detect. Second, you can see warnings and errors from linters like ESLint right in the editor. Third, you can use Flow in your project.

One more option that we’re going to talk about in this blog post is using TypeScript for checking your JavaScript code.

TypeScript is a superset of JavaScript (more precisely, of its latest specification, ECMAScript 2019). That allows the TypeScript language service (which you actually get when you run npm install typescript) to check your JavaScript code as if it were untyped TypeScript code.

TypeScript error in JavaScript file

Here’s how you can enable TypeScript in your JavaScript project, and see errors and warnings from it in WebStorm:

Add a tsconfig.json file

tsconfig.json is a configuration file that TypeScript uses. In it, you can provide information about your project to TypeScript and specify what sort of checking you want to do. In TypeScript projects, the file also describes how the code should be compiled, but that’s not what we are interested in right now.

Continue reading →

Posted in Tutorials | Tagged , , | Leave a comment

WebStorm 2019.2.1 is available

Posted on August 22, 2019 by Ekaterina Prigara

WebStorm 2019.2.1, the first bug-fix update for the recently released WebStorm 2019.2, is now available!

Update to it using Toolbox App, or from the IDE. You can also download WebStorm 2019.2.1 from our website.

Apart from bug fixes, this update also brings a lot of improvements and features. Here’s what’s new in WebStorm 2019.2.1:

  • In Angular projects, a different TSLint configuration specified in the angular.json file can be used for test files (WEB-33171)
  • Better support for Vue components with TypeScript decorators (WEB-31693)
  • Improved suggestions for scoped packages in package.json (WEB-34628)
  • Support for CSS Media Queries Level 5 (WEB-36265)
  • “Duplicate declaration” inspection now works for TypeScript (WEB-40037)

What’s fixed:

  • False-positive “Mismatched property value” error in SCSS and Sass files was fixed (WEB-40241)
  • Invalid item no longer appears in the code completion suggestions (WEB-39612)
  • Move refactoring now allows moving symbols between .ts and .tsx files (WEB-29039)
  • Tabs inside JSDoc are now preserved when formatting the code (WEB-15618)
  • Problems with typing some symbols using AltGr were fixed (JBR-1743,
    JBR-1744)

You can find a full list of issues addressed in WebStorm 2019.2.1 in the release notes.

The WebStorm Team

Posted in Release Announcements | Tagged , | 5 Comments