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

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

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

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

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

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

Debugging Angular apps created with Angular CLI in WebStorm

Angular CLI can help us bootstrap a new Angular app with a ready to useTypeScript and Webpack configuration. In this post we’ll see how to debug such apps in WebStorm.

If you have never used JavaScript debugger in WebStorm before, we recommend watching this video first to learn how to get started. The same way you can debug Angular apps in IntelliJ IDEA, PhpStorm, PyCharm and RubyMine.

We have an app generating with Angular CLI. We are using version 1.0.0-beta.26 – the latest available at the time of creating this post, the end of January 2017. Please note that Angular CLI is still in beta – new versions are released often and they might introduce some breaking changes.

  • Run npm start to get the app running in the development mode.
    You can do this either in the terminal or by double-clicking the task in the npm tool window in WebStorm.
  • Wait till the app is compiled and the Webpack dev server is ready. Open http://localhost:4200/ to view it in browser.

ng-cli-run

Note that when the dev server is running, the app will automatically reload if you change any of the source files.

  • Create a new JavaScript debug configuration in WebStorm (menu Run – Edit configurations… – Add – JavaScript Debug) to debug the client-side TypeScript code of your app. Paste http://localhost:4200/ into the URL field.

In WebStorm 2017.1 (now available under the Early Access Preview)

No additional configuration is needed: save the configuration and you’re ready to go.
Continue reading

Posted in Tutorials | Tagged , , , | 9 Comments

Debugging React apps created with Create React App in WebStorm

With Create React App you can quickly bootstrap a new React project. And you don’t have to configure anything to get the app running – it comes with the preconfigured dev environment that uses Webpack, Babel, ESLint and other tools.

In this post, we’ll go through the steps required to debug such apps right in WebStorm (or IntelliJ IDEA, PhpStorm, PyCharm, or RubyMine). If you have never used JavaScript debugger in WebStorm before, we recommend watching this video first to learn how to get started.

0. Open an app generated with create-react-app.

1. Run npm start to get the app running in the development mode.
You can do this either in the terminal or by double-clicking the task in the npm tool window in WebStorm.

2. Wait till the app is compiled and the Webpack dev server is ready. Open http://localhost:3000/ to view it in the browser.

cra-app-is-running

3. Create a new JavaScript debug configuration in WebStorm (menu Run – Edit configurations… – Add – JavaScript Debug). Paste http://localhost:3000/ into the URL field.

4. In WebStorm 2017.1 (now available under the Early Access Preview)

No additional configuration is needed: go to step 5!

4. In WebStorm 2016 (.1, .2 and .3)

Configure the mapping between the files in the file system and the paths specified in the source maps on the dev server. This is required to help WebStorm correctly resolve the source maps.

The mapping should be between the src folder and webpack:///src

Add this value to the table with the project structure in the debug configuration like this:

cra-rc
Continue reading

Posted in Tutorials | Tagged , , | 31 Comments

WebStorm 2017.1 EAP, 171.2455: improved integration with TSLint

A new Early Access Preview build for WebStorm 2017.1 (171.2455.4) 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.

Improved integration with TSLint

We’ve updated the integration with TSLint making it faster (thanks to the new architecture that allows the IDE to communicate with TSLint as with a language service) and open source. We are still finalizing the documentation, but we hope that this plugin can be a good reference point for those who would like to implement a plugin for some other linter.

Fix options

You can now apply the TSLint-powered fixes for some of the issues TSLint detects.

tslint-fix

For that hit Alt-Enter on the highlighted problem and select either TSLint: fix current problem to fix only this particular issue or TSLint: fix current file to apply the fixes when possible to the whole file. Continue reading

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

WebStorm 2017.1 EAP, 171.2272: Standard code style, completion in package.json

Please welcome a new Early Access Preview build for WebStorm 2017.1 (171.2272.15)! 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.

Completion for dependencies in package.json

Adding new project dependencies to package.json became easier: WebStorm now provides code completion for package names and shows info about the latest versions.

package-name

package-version

Support for JavaScript Standard Style

WebStorm now adds support for JavaScript Standard Style, a popular JavaScript code style.

Now you can configure WebStorm code style options for JavaScript to follow the main rules Standard declares and they will be applied when you type the code or reformat it.
Continue reading

Posted in Early Access Preview | Tagged | 28 Comments

Live webinar: Using WebStorm for Building Angular Apps

Join us Monday, February, 6th 2017, 15:00 – 16:00 GMT / 10:00 AM – 11:00 AM EDT (New York) (check other time zones) for our free webinar Using WebStorm for Building Angular Apps, featuring Victor Savkin.

Register now!

In this webinar, Victor Savkin, a long time WebStorm user and Angular core contributor, walks you through his IDE setup and some of the things he uses to build Angular applications and the Angular framework itself. Victor will show how to start a new Angular app and will share some tips on working with large codebases, including refactorings and navigation.

The recording will be available after the webinar.

using_webstorm_for_building_angular_apps

About the presenter
Victor Savkin is an Angular core contributor and co-founder of Narwhal Technologies, where he provides Angular consulting to large teams who want to get their applications to production quickly. Victor toys with eclectic programming technologies and obsesses over fonts and keyboard layouts.

Posted in Webinar | Tagged | 2 Comments