WebStorm 2017.1.2 is now available

Posted on April 26, 2017 by Ekaterina Prigara

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

WebStorm 2017.1.1 is now available

Posted on April 13, 2017 by Ekaterina Prigara

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

Posted on April 7, 2017 by Ekaterina Prigara

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

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

Posted on March 20, 2017 by Ekaterina Prigara

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

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

Posted on February 22, 2017 by Ekaterina Prigara

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

WebStorm 2017.1 EAP, 171.3224: completion for Vue components, improved integration with ESLint

Posted on February 15, 2017 by Ekaterina Prigara

A new Early Access Preview build for WebStorm 2017.1 (171.3224) is now available! You can download it here and 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 a patch update.

Completion and navigation for Vue components

WebStorm now provides code completion for Vue components inside the template tag.
Cmd-click (or Ctrl-click on Windows and Linux) on the component name to jump to its definition.

vue-component

Improved integration with ESLint

We’ve updated our integration with ESLint: now the IDE now communicates with ESLint as with a language service. We hope you’ll notice some performance improvements when working with ESLint.

Wrap variable declaration with single var

With a new code style option you can configure whether you’d like to keep long variable declarations with single var (or let, or const) on one line or on multiple lines.

formatting-vars

This option is available under Preferences | Editor | Code Style – JavaScript or TypeScript – Wrapping and Braces – Variable declarations.

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

Learn more about other new features in WebStorm 2017.1:

  • WebStorm 2017.1 EAP, 171.1834: Run Mocha tests with the gutter icon; The test status is now shown right next to the test; Integration with the Angular language service; Linters are now detected and enabled by default for the new projects; Support for emoji in the editor; Zero-latency typing is now enabled by default.
  • WebStorm 2017.1 EAP, 171.2014: New intentions that convert forEach and for..in iterations over arrays to for..of; Code style options for quotes and ternary operators; New inspection Equality operator may cause type coercion.
  • WebStorm 2017.1 EAP, 171.2271: Standard code style; Completion in package.json.
  • WebStorm 2017.1 EAP, 171.2455: Improved integration with TSLint; Code style options for the use of semicolons in JavaScript and TypeScript.
  • WebStorm 2017.1 EAP, 171.2822: Initial support for Vue;  Code style options for trailing commas in JavaScript and TypeScript; Improvements in Dart support.

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

Webinar recording: Using WebStorm for Building Angular Apps

Posted on February 8, 2017 by Ekaterina Prigara

The recording of our February 6th webinar featuring Victor Savkin, Using WebStorm for Building Angular Apps, is now available on the JetBrains YouTube channel!

In this webinar, Victor Savkin, a long time WebStorm user and Angular core contributor, walks you through his IDE setup and shares his tips on using the IDE efficiently when working on Angular apps and on big projects like the Angular framework itself.

You can find out more about Victor and his company at http://nrwl.io. You can also follow him on twitter – @victorsavkin.

Here are some questions from the webinar Q&A session: Continue reading →

Posted in Webinar | Tagged , | 4 Comments

Your first unit test using Angular CLI, Karma and WebStorm

Posted on February 7, 2017 by Ekaterina Prigara

This is a guest blog post prepared by Pete Heard.
Pete is a full-stack JavaScript developer who has spent over a decade learning to craft robust software using Test Driven Development and advanced Object Oriented Design. He is the founder of Logic Room, a consultancy that helps organisations create enterprise web and mobile software.

In this article we will use WebStorm 2016.3 with its built-in support for the Angular CLI and Karma test runner. We will write a single unit test which will show you how to mock a service and check that your component works before integrating your changes!

What we will cover:

Setting up your application

1. Install Node.js

Okay, first off let’s make sure you have downloaded and upgraded to the latest and greatest of Node.js by going here.

2. Install Angular CLI

Angular CLI is a wrapper around some tools (for example, Webpack) that you need to create, build and deploy an Angular 2 application. WebStorm offers an integration with Angular CLI that allows you to create a new Angular 2 project and generate new components, directives, and services from the IDE.

We want to get a shiny new copy of Angular CLI on our machine, so enter the following into a terminal window:
npm install -g angular-cli

3. Create an Angular 2 project with Angular CLI

Open WebStorm and click Create new project on the IDE Welcome screen. You will be given an option to start a new Angular CLI project.

1__image

Choose this option, fill in the details and WebStorm will kick off a CLI command ng init --name=MyFirstTest. Wait for WebStorm and the CLI to finish (notice the output in the tool window for indication and a line which reads ‘done’). Continue reading →

Posted in Tutorials | Tagged , , | 5 Comments

WebStorm 2017.1 EAP, 171.2822: Vue support, trailing comma, Dart improvements

Posted on February 2, 2017 by Ekaterina Prigara

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

Initial support for Vue

We’re glad to announce that we are working on Vue.js support in WebStorm (and the plugin is open source, so you’re welcome to contribute). Here’s what you can already try:

Support for script, style and template blocks in .vue files.
You’ll have code completion for ECMAScript 6 by default inside script block and CSS inside style block. WebStorm understands lang attribute inside these tags and allows you to use TypeScript, Pug and CSS-preprocessors instead.

vue-style

Support for the Vue template syntax.
You can get completion for the Vue directives in templates.

vue-directive

Trailing commas in JavaScript and TypeScript

You can now configure whether you’d like to use trailing commas in objects, arrays and for the parameters in method definitions and calls. You can find this code style option under Preferences | Editor | Code Style – JavaScript or TypeScript – Other.

trailing-comma

Continue reading →

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

WebStorm 2016.3.3 is now available

Posted on January 31, 2017 by Ekaterina Prigara

WebStorm 2016.3.3 is now available! You can download it from our website or install an update from the IDE if you’re using WebStorm 2016.3.2.

This update brings over 30 bug fixes, including debugging support for Node.js 7 on Windows and support for Stylelint 7.7+.

For a full list of addressed issues please see the Release notes.

Your WebStorm Team

Posted in Release Announcements | Tagged | Leave a comment