WebStorm 2019.3 EAP #9: Yarn 2, Further Improvements in Vue Support

Posted on November 7, 2019 by Ekaterina Prigara

WebStorm 2019.3 Early Preview build #9 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 #9 (build 193.5096.13). For the full list of issues fixed in this update, see the Release Notes.

Support for the Upcoming Yarn 2 Release

A new major Yarn version is coming later this year with the Plug’n’Play feature – a completely new installation strategy for project dependencies.

In the past month, we’ve worked together with the Yarn team and put a lot of effort into making sure that all WebStorm key features work fine when using Yarn 2.

The first and most important thing we had to do was to locate and properly index a project’s dependencies (which are actually no longer located in the node_modules folder) to provide code completion and navigation. As before, WebStorm creates a JavaScript Library from these files, called Dependencies from package.json. You can disable it or configure its scope in Preferences | Languages and Frameworks | JavaScript | Libraries.

Yarn dependencies are configured as JavaScript Library

The second thing we did was to make sure that all integrated tools like linters and test runners can still be used when installed using Yarn 2.

Continue reading →

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

Live Webinar: Using React + TypeScript + TDD, Part 1

Posted on November 5, 2019 by Ekaterina Ryabukha

Join us Tuesday, November 19th, 6:00 PM – 7:00 PM CET (12:00 – 1:00 PM EST) for our free live webinar React + TypeScript + TDD in WebStorm, Part 1, featuring Paul Everitt.

In this webinar, we’ll go over some tips and tricks that can help you be more productive when developing React applications using TypeScript. Specifically, we’ll cover the following topics:

  • Setting up a project
  • Introduction to testing
  • Debugging during testing
  • Getting started with TSX and ES6
  • Functional React components in TypeScript

We believe that this webinar could be interesting for web developers somewhat familiar with React and similar frontend stacks.

Space is limited, please register now.

A video recording will be available after the webinar.

A few weeks after this, we’ll have the second part where we’ll talk about such things as sharing props using type information, modeling class state with TypeScript interfaces, and more. Please stay tuned for the upcoming webinar announcement! Meanwhile, you can register for that second part here.

Paul EverittPaul Everitt is the PyCharm Developer Advocate at JetBrains. Before that, Paul was a co-founder of Zope Corporation, taking the first open source application server through $14M of funding. Paul has bootstrapped both the Python Software Foundation and the Plone Foundation. Prior to that, Paul was an officer in the US Navy, starting www.navy.mil in 1993.

The WebStorm Team

Posted in Webinar | Tagged , , | Leave a comment

WebStorm 2019.3 EAP #8: Documentation in Vue.js Projects

Posted on October 31, 2019 by Ekaterina Prigara

WebStorm 2019.3 Early Preview build #8 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 #8 (build 193.4932.10). For the full list of issues fixed in this update, see the Release Notes.

Documentation in Vue.js Projects

With WebStorm 2019.3, you can now check out documentation for components and directives defined in Vue.js and in some popular component libraries.

The IDE uses the information provided in the web-types.json file shipped with the library. At the moment, Quasar version 1.1.1 and above ships the most detailed documentation. For Vuetify version 2.1.7, you can now see type info and default values for the attributes in the documentation popup. Docs for BootstrapVue are coming soon, with the 2.1.0 update. For Vue.js, we’ve compiled the docs ourselves using the information from the website.

So here’s what the documentation looks like if you press F1 on the name of a component or directive in your code:

Documentation for the Vue framework

You can also press F1 when the completion popup is open:

Docuementation for the Quasar library

To jump to the extended doc and examples on the library’s website, press Shift-F1 or click the link at the bottom of the popup.

Please report any issues on our issue tracker, and stay tuned for the upcoming release announcement!

The WebStorm Team

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

WebStorm 2019.2.4 is available

Posted on October 30, 2019 by Ekaterina Prigara

WebStorm 2019.2.4 is now available!

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

Fixes and improvements in WebStorm 2019.2.4:

  • Support for nullish coalescing in TypeScript (WEB-41494)
  • Faster completion for Vue.js tags and attributes (WEB-41087)
  • Creating new projects now works with Vue CLI v4.0 (WEB-40757)
  • WebStorm now again uses a regular Open File dialog on macOS Catalina

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 | 9 Comments

WebStorm 2019.3 EAP #7: Faster Startup Time and New Checkout Branch Action

Posted on October 25, 2019 by Ekaterina Ryabukha

WebStorm 2019.3 Early Preview build #7 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.

When announcing the start of the EAP program for WebStorm 2019.3, one of the things that we committed to was improving the IDE performance. With the EAP program coming to its end, we are ready to tell you about the most significant improvement in this area which is available in WebStorm 2019.3 EAP #7 (build 193.4778.12). For the full list of issues fixed in this update, see the Release Notes.

Faster startup

So far, one of the most common performance problems faced by WebStorm users has been the sluggish startup of the IDE. In the last two release cycles, we’ve devoted a lot of effort to reducing the time that users have to wait for the welcome screen to show up and for the IDE to open up with already indexed projects. As a result, you may expect WebStorm 2019.3 to handle this job significantly faster compared to previous versions.

Let’s clarify what exactly we mean by “significantly faster”. We’ve measured the startup time of WebStorm 2019.3 on different operating systems and compared these numbers with the ones for v2019.1 and v2019.2. To get accurate results, we used the same project everywhere: it was a React application generated with create-react-app, with the app.js file opened in the editor. Here’s what we’ve got:

WebStorm startup benchmark Continue reading →

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

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 , , , | 5 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