WebStorm 2017.2 released: Move symbol refactoring, import code style from ESLint, better webpack support, and more

Posted on July 17, 2017 by Ekaterina Prigara

Today we’re announcing WebStorm 2017.2  🎉

This big summer update adds powerful Move symbol refactoring, supports new code style options for JavaScript and TypeScript, improves testing with Karma and Mocha, and much more!

Here’s what you can do with the top new features in WebStorm 2017.2:

  • Import code style from an ESLint configuration.
  • Run single Karma tests and generate code coverage reports for Mocha.
  • Take advantage of code completion in JavaScript that respects the project configuration stored in your webpack.config.js file.
  • Order code inside classes with the Rearrange code action.
  • See Parameter hints and inferred type info in TypeScript.
  • Build interfaces with support for Angular Material.
  • Enjoy better code completion and navigation for Sass selectors.
  • Scope styles for single components with support for CSS Modules.

Explore all the new features of WebStorm 2017.2 on our website.


Download WebStorm 2017.2

JetBrains WebStorm Team

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

WebStorm 2017.2 EAP, 172.3198: apply styles from ESLint, TypeScript type info

Posted on June 29, 2017 by Ekaterina Prigara

This week’s WebStorm 2017.2 EAP build (172.3198.20) is now available.

Now you can import some of the code style rules in ESLint configuration files to the IDE. In addition, we’ve improved how type info is shown in TypeScript and added an option to fold all one-line methods and functions in JavaScript and TypeScript.

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 in our tracker. Thank you!

Import code style from ESLint configuration

WebStorm now allows you to import ESLint code style rules (we matched 37 ESLint rules) to the IDE’s JavaScript code style settings.

Now if you open an .eslintrc JSON file or package.json with the eslintConfig field, you’ll see the question “Apply code style from ESLint?” at the top of the editor. Click Yes to apply the matched rules to the Project code style scheme.

import-eslint

Continue reading →

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

WebStorm 2017.2 EAP, 172.3095: npm install and update notifications

Posted on June 22, 2017 by Ekaterina Prigara

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

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

Posted on June 15, 2017 by Ekaterina Prigara

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 , , , , | 13 Comments

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

Posted on June 9, 2017 by Ekaterina Prigara

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

Posted on June 9, 2017 by Ekaterina Prigara

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

Posted on June 8, 2017 by Ekaterina Prigara

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

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

Posted on May 24, 2017 by Ekaterina Prigara

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

Posted on May 18, 2017 by Ekaterina Prigara

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

Posted on May 17, 2017 by Ekaterina Prigara

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