WebStorm 2017.2 EAP, 172.2465: run single Karma test, better navigation for TypeScript

Please welcome a third WebStorm 2017.2 EAP build (172.2465). You can download it here or install a patch update from the last week EAP build.

Run single Karma test

You can now run or debug a single test or a suite with Karma from the IDE. That way you can save some time and run only those you’re currently working on, instead of running all tests.

To run a test click on the icon next to it on the gutter and select run or debug. Or put the cursor on the test name and hit Ctrl-Shift-R on macOS or Ctrl-Shift-F10 on Windows and Linux to run it. You’ll see the test status icon, green for passed and red for failed, immediately after you’ve run it.

run-karma-test

You might be familiar with this feature if you’re using Mocha or Jest integration in WebStorm.

You can also create and save run/debug configurations for all project tests or for particular suites via Edit configurations… dialog. Continue reading

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

WebStorm 2017.2 EAP, 172.2273: move symbol refactoring

A new WebStorm 2017.2 EAP build (172.2273) is now available! Please download it here. To find out what the EAP is and what features are already available in WebStorm 2017.2 EAP, check out our last week announcement.

Move Symbol Refactoring

This week we are adding a long-awaited Move Symbol Refactoring for JavaScript and TypeScript. It works for classes, functions and variables – all top-level symbols in the ES6 modules. To use it use Refactor This (Ctrl-T on macOS or Alt-Ctrl-Shift-T on Windows and Linux) – Move or just hit F6 on a symbol you’d like to move.

Here’s an example: we’re moving changeSelectedPlaylists from PlayerActions.js to PlaylistsActions.js. Notice that an import for types that changeSelectedPlaylists requires is added to PlaylistsActions.js. And the imports of changeSelectedPlaylists in all other files will also be updated.

move-symbol

Don’t forget to configure the code style for Imports and Punctuation in Preferences | Editor | Code Style | JavaScript or TypeScript to make sure that the result of the refactoring follows your preferred code style.

You can find the full list of issues addressed in this EAP build in the Release notes.

Please report your feedback to our issue tracker. To get notifications of new EAP builds as they become available, subscribe to the EAP channel in Preferences | Appearance & Behavior | System Settings | Updates.

Your WebStorm Team

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

WebStorm 2017.1.3 is now available

Today we are releasing WebStorm 2017.1.3!

This update brings over 40 fixes, including:

  • Support for types from React prop-types 15.5 (WEB-26418)
  • Support for TypeScript 2.3 (WEB-26641)
  • Linting with Standard in the JSX files (WEB-26653)
  • Debugging Node.js 8 (WEB-26794)

In addition to that WebStorm can now automatically add imports for augmentation modules in TypeScript.

A patch update is available for the users of WebStorm 2017.1.2 and 2017.1.2 EAP. If you’re using an earlier version, give WebStorm 2017.1 a try and download it from our website for a free 30-day evaluation.

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

WebStorm Team

Posted in Release Announcements | Tagged | 10 Comments

WebStorm 2017.2 Early Access Preview: parameter hints, code rearrangement, Angular Material

We are glad to announce the start of the Early Access Program for WebStorm 2017.2!

The first WebStorm 2017.2 EAP is now available for download. It brings lots of improvements and promises even more new features in the next EAP builds. The WebStorm 2017.2 release is planned for late July. Stay tuned!

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 a 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.

To be notified when the new EAP is available, switch to the EAP updates channel in the IDE (Preferences | Appearance & Behavior | System Settings | Updates) or install our Toolbox App.

In this update you will find:

Parameter hints in TypeScript

You will now see parameter hints in TypeScript code. They show the names of parameters of a function or method and make the code easier to read.

param-hints

To make hints not too distracting, by default they are shown only for parameters that are strings, numbers, objects or boolean values and are not shown for some frequently used methods, like filter or map or for some parameter names, like start.

You can modify this blacklist, enable hints for all parameters or disable them completely in Preferences | Editor | General | Appearance – Show parameter name hints.

Auto imports in JavaScript

In JavaScript, imports are now added automatically when you autocomplete a symbol that is exported in another project file.

auto-import-js

Please note that auto imports don’t work for symbols from the project’s dependencies, but in many cases you can add an import with a quick-fix (press Alt-Enter and select Insert import). Continue reading

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

Quick Tour of WebStorm and Docker

Node.js developers are embracing Docker for repeatable builds, and WebStorm supports Docker-oriented workflows: Quickly bootstrap your Node.js app with a Dockerfile, then run and debug your app in Docker, from the WebStorm IDE.

Let’s take a look.

Note: WebStorm’s Docker support is for server-side Node.js applications. It isn’t aimed at client-side applications, e.g. Angular or React. Nor is it for tools like linters or test runners which need to interact with the editor.

Summary

  • Setup your local Docker environment
  • Create, run, and debug a local demo Express application
  • Connect to your Docker servers
  • Setup a remote Node.js interpreter based on Docker
  • Run your Express application in Docker, and connect from WebStorm’s REST client
  • Debug the Express application, in a Docker container

Background

WebStorm manages the running of your code in Node.js, as well as debugging, profiling, testing, and more. Your run configuration specifies a path to your locally-installed Node.js interpreter – e.g. /usr/local/bin/node – and options that go with it.

WebStorm can also, though, manage remote interpreters. Meaning, your code is executed by a Node.js interpreter inside another environment, such as Vagrant or on an SSH-available server.

With WebStorm 2016.3, Docker is added to the list of remote interpreter options. Once configured, WebStorm will create a new container on each run, with the container bound to the project directory, then execute your project code in the Docker-based Node.js environment.

Docker Setup

Docker has become easy to download and install, across multiple platforms, and in multiple ways. For this article, we targeted macOS and used the standard Docker for Mac package, version 1.13.1 at the time of the writing. This version is after Docker’s switch away from Virtualbox, hallelujah to all our souls.

Hello Express

The purpose of this article isn’t to show developing Node.js applications, but rather, to show running a Node.js application in a container, then talking to it from the IDE. Therefore we’ll use a simple Express app saved in a hello_express.js file, with a single REST endpoint at root that returns ‘Hello World’:

Hello Express

With that file saved in our WebStorm project, we’ll run it with the local interpreter:

01 Run

Continue reading

Posted in Tutorials | Tagged , , | Leave a comment

WebStorm 2017.1.2 is now available

WebStorm 2017.1.2 is now available and brings over 40 fixes and improvement.

A patch update should be available soon for the users of WebStorm 2017.1.1 and 2017.1.2 RC. If you’re using an earlier version, give WebStorm 2017.1 and its new features a try and download it from our website for a free 30-day evaluation.

With WebStorm 2017.1.2 you can now use the new Jest integration to run and debug tests in the apps created with create-react-app. For that create a new Jest run/debug configuration, specify the path to the react-scripts package instead of Jest and add --env=jsdom option:

jest-run

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

WebStorm Team

Posted in Release Announcements | Tagged , , | 10 Comments

WebStorm 2017.1.1 is now available

We’re glad to announce that WebStorm 2017.1.1, the first bug-fix update for the recently released WebStorm 2017.1 is now available! It addresses the issues we found in the initial release and brings lots of great improvements.

A patch update should be available promptly for the users of WebStorm 2017.1, 2016.3.6 or 2016.3.5. If you’re using an earlier version, give WebStorm 2017.1 and its new features a try and download it from our website for a free 30-day evaluation.

Completion in webpack 2 configuration files

To help you migrate to webpack 2, WebStorm now provides code completion and documentation for options in the webpack.config.js file.

webpack-conf

More flexibility with TypeScript imports

For some modules you might want to import their submodules instead of the entire module. For examples, for RxJS you might prefer to use import {Observable} from 'rxjs/Observable' instead of the more general import {Observable} from 'rxjs'.

To make WebStorm follow these rules when automatically adding imports, in Preferences | Editor | Code Style | TypeScript – Imports you can now specify the exact paths the IDE should avoid. Instead of them the IDE will look for alternative paths to import the same symbol.

If you are not happy with some specific import, hit Alt-Enter on it and select Change import… . You will see a list of other valid paths for this symbol.

change-import-ts

Resolve roots in JavaScript projects

We added a bunch of improvements to the way WebStorm works when you want to resolve imports from several roots (for example, in a project that uses enhanced webpack module resolution) and have several project directories marked as Resource root for that.

Enable “Use paths relative the project, resource or sources roots” in Preferences | Editor | Code Style | JavaScript – Imports to make WebStorm use paths relative to this folder (or these folders) when generating imports.

resolve-root

In IntelliJ IDEA in JavaScript project make directories you want to resolve from as Sources roots.

Among other fixes and improvements:

  • Fixed false ESLint errors for the linebreak style (WEB-25487)
  • Support for data- attributes in JSX (WEB-22667)
  • Support for objects in Vue.js bindings (WEB-26092)
  • Performance improvements when working with TypeScript (WEB-25973)
  • Fixed the download of the TypeScript definitions files from the DefinitelyTyped repository in Preferences (WEB-26160)
  • Support for CSS Grid
  • Updated live templates for Angular

Please see the Release Notes for a full list of addressed issues.

WebStorm Team

Posted in Release Announcements | Tagged , | 3 Comments

Using JavaScript Standard Style

Standard is a popular JavaScript code style guide. It can also lint your code since it’s built on top of ESLint and, therefore, it can also be used as an ESLint plugin.

To improve the experience with WebStorm for those who use Standard, in WebStorm 2017.1 we added lots of new JavaScript code style options that are defined in Standard (such as the use of semicolons and trailing commas and quotes style). We also implemented a simple way to make
WebStorm follow them and report them in the editor.

As Standard is based on ESLint, its support is implemented via WebStorm’s ESLint integration.

Enable linting

Assuming Standard (or eslint-config-standard) is listed in package.json, when you open a new project WebStorm will notice that and will enable linting with Standard automatically. Run npm install to see warnings reported by Standard in the editor.

error-from-standard

To enable linting with Standard yourself, go to Preferences | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint, select the Enable check-box and select the path to the Standard package in the drop-down list. (Standard can be installed either locally in your project’s node_modules folder, or globally.)

Apply code style rules

WebStorm will also suggest to set Standard code style for formatting.

use-standard

Once you click Yes, the code style options available in WebStorm will be set the way Standard suggests.

You can also do this manually: go to Preferences | Editor | Code Style | JavaScript and click Set from Predefined Style – Standard. This style will then replace your current scheme.

set-from-standard

Please note that Standard can report a wider range of code style issues than WebStorm can automatically fix.

Fix issues with WebStorm and ESLint

Some of the issues Standard reports can be fixed by Standard or ESLint (depending on what you’re using). Press Alt+Enter on the highlighted code in the editor and select Fix current file.

fix-with-standard-or-ws

For some code quality issues, you will also see available quick-fix options provided by WebStorm. For example, for an undefined variable WebStorm will suggest to insert a declaration.

JetBrains WebStorm Team

Posted in Tutorials | Tagged , , , | 4 Comments

WebStorm 2017.1 released: Vue.js, Jest, new code style options, Standard Style, and more

Welcome WebStorm 2017.1, the first big update this year!

We’ve added support for such exciting technologies as Vue.js and Jest, brought more flexibility to code styles, improved React and Angular support, and so much more!

Explore all the new features on our website or in this overview video:

Highlights include:

  • Vue.js support: coding assistance for Vue template language; completion and automatic import for Vue components
  • Jest integration: run Jest tests and see the results right in the IDE
  • Support for Standard style and lots of new code style options: use of semicolons and trailing commas, quote style, sorting for imports, and more
  • Imports for React components are added automatically
  • Completion for modules in package.json; TSLint-powered quick-fixes; support for the Angular language service; new module dependency diagram; test status icons in the editor; emoji support in the editor 🎉.

Download WebStorm 2017.1 on our website now!

JetBrains WebStorm Team

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

WebStorm 2017.1 EAP, 171.3566: module dependency diagram, auto imports for React components

A new Early Access Preview build for WebStorm 2017.1 (171.3566) is available! Please download it here. You can install it side-by-side with your current stable WebStorm version. Or if you have the previous EAP build from the last week, you should soon get a notification in the IDE about an available patch update.

Auto import for React components

WebStorm now suggests you code completion for React components defined in the app (excluding stateless components) and automatically adds an import statement for them.

auto-import-react

In addition to that WebStorm warns you if you’re using JSX in your file, but forgot to import React. The warning is shown for a first JSX tag in this file. Hit Alt-Enter on it and select Insert import * as React from ‘react’.

Module dependency diagram

You can now visualize the module dependencies a file or a folder has. To do that right-click on a file or a directory in the project view or in the editor and select Diagrams – Show diagram.

dependency-diagram

From the diagram you can navigate to the depended file – right-click on the file and select Jump to source.

Updated Find in path dialog

The Find in path dialog has been updated – it became much simpler and it now shows search results and their preview instantly.

find-in-path

Continue reading

Posted in Early Access Preview | Tagged , | 21 Comments