Announcing WebStorm 2019.2 roadmap

Posted on May 9, 2019 by Ekaterina Prigara

It’s been over a month since the WebStorm 2019.1 release, we are done (almost!) with the bug fixes and we are now starting work on the new features and improvements for the WebStorm 2019.2 release, which is scheduled for the end of July.

We will start the Early Access Program for WebStorm 2019.2 in the next couple of weeks. In the meantime, we would like to share with you our roadmap for WebStorm 2019.2. This is something we haven’t done since the end of 2015, when we moved to having three major releases a year.

The main goals for the upcoming release are:

  • Boost productivity when working with JavaScript and TypeScript with smart intentions, quick-fixes, and refactorings.
  • Make the Vue.js support better.
  • Improve performance, quality, and usability of the existing features.

Continue reading →

Posted in General Announcements | Tagged , | 18 Comments

WebStorm 2019.1.2 is available

Posted on May 8, 2019 by Ekaterina Prigara

WebStorm 2019.1.2, the bug-fix update for WebStorm 2019.1, is now available!

Here are some of the fixes and improvements available in WebStorm 2019.1.2:

  • False positive warning about a top-level this in JSX (WEB-38467)
  • Performance problem when resolving symbols from the reselect module was fixed (WEB-38158)
  • The IDE will detect a test runner when it’s installed but not listed in package.json (WEB-35160)
  • Create new React-TypeScript projects from the Welcome screen – Create New Project – React App (WEB-35582)
  • Reorder Terminal tabs with Ctrl+Shift+Left/Right on Windows and Linux and Cmd-Shift-Left/Right on macOS (IDEA-202809)

Please also see the Release Notes.

The WebStorm Team

Posted in Release Announcements | Tagged , | 5 Comments

WebStorm 2019.1.1 is available

Posted on April 17, 2019 by Ekaterina Prigara

WebStorm 2019.1.1, the first bug-fix update for the recently released WebStorm 2019.1, is now available!

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

Syntax highlighting in the type info tooltip and documentation

The tooltip that shows the expression type (Cmd/Ctrl-hover) in JavaScript and TypeScript files now has a syntax highlighting.

Type info highlighting

We’ve also added highlighting for the code samples shown in the documentation popup.

Highlighting in docs

Configuration for the use of aliases and path mappings in imports

It is now possible to configure how aliases and path mappings will be used when adding imports automatically in JavaScript and TypeScript files. If you want to use relative paths when importing a symbol in the nearby file and use path mappings or aliases everywhere else in your app, you can select Only in files outside specified paths in the new option Use path mappings/aliases in Preferences / Settings | Editor | Code Style | JavaScript or TypeScript – Imports.

Other improvements and fixes in WebStorm 2019.1.1:

  • Support for Cucumber step definitions written using strings (WEB-15600)
  • New Reload in Browser action in the JavaScript debug tool window (WEB-26400)
  • Performance problem when editing some TypeScript types was fixed (WEB-38026)
  • Jump from the terminal to the editor for Esc (IDEA-116221)
  • Improved font rendering on macOS (JBR-1174)
  • Flow integration now uses Flow LSP (please note that on Windows we recommend disabling the Safe Write option when using Flow)

The WebStorm Team

Posted in Release Announcements | Tagged , | 6 Comments

Featured plugin: JS GraphQL

Posted on April 16, 2019 by Ekaterina Prigara

The JS GraphQL plugin is one the most popular plugins for WebStorm, IntelliJ IDEA, and other JetBrains IDEs, and we are very excited about the release of its second version

In this blog post we’ll have a closer look at the updated plugin and how it can help you work with GraphQL in your JavaScript apps.

We want to thank Jim Meyer, the author of the plugin, for the amazing work he has done to build this plugin!

Working with schema files

The plugin brings full support for the GraphQL Schema Definition Language (SDL). That means your .graphql file will include syntax highlighting, and as you start typing, you will get suggestions for the keywords and built-in and custom types, as well as interfaces and enums.

Completion in schema file

Cmd/Ctrl-click the type name to navigate to its definition.

The plugin will check that all the types you’ve used are defined somewhere in the file, and it will show an error message if they’re not. Press Alt-Enter to fix the problem with one of the available quick-fixes.

Quick fix in schema file
Continue reading →

Posted in Cool Feature | Tagged , , | 4 Comments

WebStorm 2018.3.6 and 2018.2.8 are available

Posted on April 3, 2019 by Ekaterina Prigara

Today we are releasing updates for WebStorm 2018.3 and 2018.2.

You can update using Toolbox App or from the IDE. You can also download these updates from our website.

These updates bring stability improvements from the IntelliJ platform.

In addition to that, WebStorm 2018.3.6 fixes problems with running some tests using Jest 24+ (WEB-37680), completion after new in TypeScript (WEB-36511), and closing curly braces in Angular templates (WEB-37540).

If you want to use the latest WebStorm version, you can skip these updates and update directly to WebStorm 2019.1.

Your WebStorm Team

Posted in Release Announcements | Leave a comment

WebStorm 2019.1: smart intentions for JavaScript, improvements in Angular support, updated CSS and HTML docs, and new debug console

Posted on March 25, 2019 by Ekaterina Prigara

⭐️WebStorm 2019.1 is now available!⭐️

WebStorm 2019.1 brings with it new smart intentions for JavaScript and TypeScript, improved support for Angular, updated documentation for CSS and HTML, a more powerful debug console, and much more!

Explore the top new features and download WebStorm 2019.1 on our website.

In this blog post we would like to share with you the detailed release notes for this WebStorm update. They are compiled from the EAP blog posts that we’ve been publishing here for the past several months.
Here are the features and improvements grouped by the WebStorm subsystems:

  • JavaScript and TypeScript support: intentions for destructuring; convert function with Promise to async function; convert properties in constructor to class fields; inspections for switch statements; add or remove export; extended error messages in TypeScript.
  • Style sheets support: updated docs for CSS and browser compatibility check; extract CSS variable; camel case support for CSS Modules; support for Less 3.0 features.
  • HTML support: improved HTML documentation.
  • Development with Angular: new inspections for Angular projects; easier navigation in Angular projects.
  • Development with React: improved completion for merged props; Extract Method refactoring for custom React Hooks.
  • Development with Vue.js: better support for Vue projects with TypeScript.
  • Node.js and npm: completion for npm scripts; version range tooltip for dependencies; run and debug Node.js app when using Docker Compose; simple Node.js project template.
  • Linters integrations: improved support for ESLint and TSLint in complex projects; support for TSLint as TypeScript plugin.
  • Debugging: new debugger console.
  • Testing: highlighting for failed line in test; testing with Cucumber and TypeScript.
  • IDE improvements: Recent Locations popup; save project as a template; soft-wraps for selected file types.
  • Version Control: cherry-pick a file from a commit from the VCS log; incoming and outgoing commits.

DOWNLOAD WEBSTORM 2019.1

Continue reading →

Posted in Release Announcements | Tagged , | 17 Comments

Get started building apps with Vue.js in WebStorm

Posted on March 21, 2019 by Rachel Appel

Vue Overview

Vue.js, the “Progressive JavaScript framework”, is user interface framework that you can use to build rich and responsive web apps. While Vue focuses on the UI (i.e., the view), it enables you to plug-in other libraries and tools to use for other scenarios, such as accessing back-end data or unit testing.

Before continuing, keep in mind that there are multiple ways to complete what you see in this post. After trying out Vue.js, you may prefer to add some small changes to the process that you see here.

Start a new Vue project

WebStorm relies on the Vue CLI to create projects, so it must be installed by running npm install --g @vue/cli in the terminal before trying to create one. The Vue CLI is the Vue Command Line Interface that helps to speed up development by scaffolding an application skeleton for you.

Open WebStorm and choose Create New Project on the IDE’s welcome screen. Select Vue.js from the list of project templates. Enter the location where the app will be generated, and the rest of the information as follows (also shown in the following image):

  • Node interpreter: Location of node.
  • vue-cli or @vue-cli: Location of CLI version you wish to use.

New Vue project

Continue reading →

Posted in Tutorials | Tagged , | 2 Comments

Write Object-Oriented TypeScript: Polymorphism

Posted on March 20, 2019 by Rachel Appel

This is part 4 of a 4 part article on how to program in TypeScript using object-oriented techniques. If you are just starting with TypeScript and WebStorm, see our blog post on Getting Started with TypeScript.

Implement polymorphism in TypeScript

When multiple classes inherit from a parent and override the same functionality, the result is polymorphism. Each of those child classes now implements a property or method, but they each may have their own way of performing that implementation.

For example, both business and personal checking accounts can inherit from a parent checking account. Calling a method to open the business checking account might require that the code checks for a higher initial deposit than when opening a personal checking account. A business account might require multiple owners, where a personal checking account can have one or more. Alternatively, one child class might override the parent’s members while another child doesn’t but just accepts the parent class’s implementation instead. This also demonstrates polymorphic behavior, since those behaviors are different between the siblings. Continue reading →

Posted in Tutorials | Tagged , | Leave a comment

WebStorm 2019.1 EAP #7: run Node.js using Docker Compose, Recent Locations popup

Posted on March 7, 2019 by Ekaterina Prigara

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

Toolbox App is the easiest way to get EAP builds. 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.1 EAP

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

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

Run and debug Node.js app when using Docker Compose

If you’re using Docker for testing your Node.js application, you can now use the configuration described in the Docker Compose file to easily run and debug the app from the IDE.

Please note that the described steps only work if you use node or npm in the command field of your Docker Compose file to run your app, e.g. command: node ./src/app.js Continue reading →

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

Write Object-Oriented TypeScript: Encapsulation

Posted on March 5, 2019 by Rachel Appel

This is part 3 of a 4 part article on how to program in TypeScript using object-oriented techniques. If you are just starting with TypeScript and WebStorm, see our blog post on Getting Started with TypeScript.

Implement encapsulation in TypeScript

A key aspect of object-oriented programming, encapsulation enables you to perform what’s called “data hiding”. It’s necessary to hide certain data so that it’s not changed accidentally or purposefully by other components or code in the program. For example, you don’t want any code from outside of the CheckingAccount class calling its private methods directly. But the data that is inside the CheckingAccount class can and should be changed by other code in the CheckingAccount class itself. If encapsulated, the data can be exposed thoughtfully to other classes through methods and properties that enforce business rules.
Continue reading →

Posted in Tutorials | Tagged , , | Leave a comment