WebStorm 2017.2 EAP, 172.3095: npm install and update notifications

A new WebStorm 2017.2 EAP build (172.3095.13) makes it easier to manage project’s dependencies: the IDE will suggest you running npm install or npm update when you open a project, update it from the version control or edit package.json.

npm-update

For the full list of issues addressed in this EAP build, see the Release notes.

You can install this WebStorm 2017.2 EAP build via Toolbox App or by downloading it on this page. It can be installed side-by-side with your stable WebStorm version. A patch update from the last week EAP build is also available.

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

Your WebStorm Team

Posted in Early Access Preview | Tagged | 6 Comments

WebStorm 2017.2 EAP, 172.2953: improved Sass support, code coverage for Mocha, CSS Modules

This week’s WebStorm 2017.2 EAP build (172.2953.12) brings support for Mocha code coverage reports, improvements in Sass and SCSS support, and more.

You can install this WebStorm 2017.2 EAP build via Toolbox App or by downloading it on this page. It can be installed side-by-side with your stable WebStorm version. A patch update from the last week EAP build is also available.

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

Better support for Sass and SCSS nested selectors and selectors with &

For Sass and SCSS selectors created using &, WebStorm now provides code completion in HTML files, as well as navigation to the definition (with Cmd/Ctrl-Click).

scss-amp-completion

For the nested Sass and SCSS selector, you can use Navigate to the definition (Cmd/Ctrl-Click).

navigate-nested-sass

Code coverage for Mocha

Now you can see code coverage reports for Mocha tests right in the IDE.

To get started install nyc, the command-line interface for Istanbul:
npm install --save-dev nyc

Or install Istanbul itself with npm install --save-dev istanbul. We recommend using istanbul@next because it has support for ES6 and TypeScript. Make sure that Mocha is also installed and properly set up.

Now select the set of tests you’d like to run – that could a folder with test files, a test file, a suite or a specific test – then create a new Mocha run/debug configuration via Edit Configurations dialog, save it and hit the Run with coverage icon.

run-with-coverage

You can also use the test icons in the editor to quickly run a specific suite or a test with coverage.

quickly-run-with-coverage

The coverage report will open next to the editor, showing how many files were covered with tests and the percentage of covered lines in them. From the report you can jump to the file and see what lines were covered – marked green – and what lines were not covered – marked red.

coverage-report

Continue reading

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

WebStorm 2017.2 EAP, 172.2827: better webpack support, convert to export, breadcrumbs for JS

This week WebStorm 2017.2 EAP build (172.2827.22) brings lots of new features that we’d like you to try. Download the EAP build on this page or by using Toolbox App. A patch update from the last week EAP build is also available.

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

Support for webpack enhanced module resolution

This update brings a huge improvement in working with projects using webpack. WebStorm now analyses the webpack configuration and provides coding assistance that respects the webpack module resolution. That means that now all the import statements in the code that use enhanced module resolution will be properly resolved.

WebStorm runs webpack under the hood when you open a project or change webpack.config.js and, thanks to the information it gets, WebStorm now properly understands the project resolve roots and resolve aliases.

Now you don’t have to manually mark the directories as Resource roots in Preferences | Directories to fix the unresolved imports – they will just work fine.

In this project react-color is an alias for the path './src/index.js'. Now WebStorm is able to properly resolve the import from react-color, provide navigation to it and completion for the exported symbols.

webpack-alias

By default WebStorm will analyse the webpack configuration file in the root of the project, but you can select another file in Preferences | Languages & Frameworks | JavaScript | Webpack. Continue reading

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

WebStorm team at the events this summer

The WebStorm team is going to attend and sponsor some events this summer. We’d be glad to meet you there!

pitercss_conf, St. Petersburg, Russia, June 16 2017

You can meet the WebStorm team at pitercss_conf.  Stop by our expo table to get a sticker and ask us questions about WebStorm and other JetBrains tools.

Fluent, San Jose, USA, June 20-22 2017

Find the JetBrains booth at the joint Fluent-Velocity conference in the Bay Area. Our colleagues from the TeamCity team we’ll be glad to meet you and give you some WebStorm stickers and keymaps.

AngularUP, Tel Aviv, Israel, June 25 2017

You can find us at this one-day conference on Angular in sunny Tel Aviv. We’ll have a booth there and we’ll be happy to talk about your experience working on Angular apps in WebStorm.

Node Summit, San Francisco, USA, July 26-27 2017

Node Summit is the first Node.js-focused conference we are going to attend. We’ll be at the JetBrains booth to answer your questions and give demos.

AngularCamp, Barcelona, Spain, July 6-7 2017

JetBrains is one of the sponsors of AngularCamp in Barcelona. Unfortunately, we won’t be at the event, but you’ll be able to find some WebStorm stickers and keymaps there.

AngularCamp has a diversity program and provides free and reduced price tickets that you can apply for till June 15.

Your WebStorm Team

Posted in Conferences & Events | Leave a comment

WebStorm 2017.1.4 is now available

WebStorm 2017.1.4 is now available for download!

You can find the full list of addressed issues in the Release notes for this update.

If you’re using WebStorm 2017.1.3, a patch update will be available later today. If you’re using an earlier version, you can download WebStorm 2017.1.4 from our website or using Toolbox App.

WebStorm Team

Posted in Release Announcements | 2 Comments

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