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 , , , | 23 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 , , | 53 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

WebStorm 2017.1 EAP, 171.2014: new intentions for arrays, code style for quotes

Update, December 29: we release another WebStorm 2017.1 EAP build (171.2014.24) this week to address the issues with the missing user color, code style and other schemes and profiles and TSLint. Update is available for the users of the last week and this week EAP builds.

The new WebStorm 2017.1 Early access preview build 171.2014.8 is now available. You can download it here, or if you have the previous EAP build (171.1834.8) from last week installed, you should soon get a notification in the EAP about a patch update.

New intentions for arrays: forEach and for..in to for..of

WebStorm helps you to convert for..in loops on arrays to for..of statements, introduced in ECMAScript 6. All you have to do is to hit Alt-Enter on the loop and select this conversion option.

While for..in iterates over all enumerable properties of an object and you need to perform a hasOwnProperty() check to avoid iterating over object’s prototype properties, for..of iterates only over iterable objects and, thus, better for arrays.

for-in-to-for-of

You can set a visible highlighting level for this inspection in Preferences | Editor | Inspections – ‘for..in’ is used instead of ‘for..of’ and apply fixes for the whole project.

With another new intention can convert iterations with forEach to for..of.

foreach-to-for-in
Continue reading

Posted in Early Access Preview | Tagged | 6 Comments

WebStorm 2017.1 Early Access Preview

Today we start the Early Access Preview for WebStorm 2017.1 (EAP). Download WebStorm 2017.1 EAP, build 171.1834.8, here and install it side by side with your current stable WebStorm. No active subscription is required.

Since we released WebStorm 2016.3 a month ago, we’ve mostly focused on fixes, but also managed to add some new features in WebStorm 2017.1 EAP. Many more are coming after the holiday season. Stay tuned!

Better testing experience

Now it’s even easier to run Mocha tests with the new Run icon on the gutter. Click on an icon next to the test or the suit name and select Run or Debug.

run-test-with-an-icon

Once you’ve run the tests, the icon will show their status – green circles for passed tests, red for failed ones. The run and debug actions will be still available on a click.

You can also re-run tests automatically on changes. To do so, click the Toggle auto-test icon on the left-hand side of the test tool window. You will see how their status changes in the editor, even if you have previously hidden the tool window. This will work both for Mocha and Karma.

auto-test

Continue reading

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

Developing mobile apps with React Native in WebStorm

React Native allows you to develop native mobile apps for iOS and Android using JavaScript and React. It’s created by Facebook and used for such well-known apps as Instagram, Airbnb, and now JetBrains’ own YouTrack mobile app (which is open-source, by the way).

With WebStorm 2016.3 you can now develop mobile apps with React Native getting all the benefits of WebStorm goodies like code completion for React, Flow support, and a built-in debugger. We believe WebStorm can be a great and powerful tool for development with React Native!

Let’s see how we can set up a workflow for development with React Native in WebStorm.

Install React Native CLI

Make sure you have a React Native CLI installed on your machine. To install it, run the following command in the Terminal: npm install -g react-native-cli.

The list of tools you need to install to get started with React Native depends on your OS and the mobile platform you’re going to target your app at. Check out React Native’s Getting Started guide for detailed installation instructions.

Creating a new project

Now you can create a new React Native project right from the IDE Welcome screen: click Create new project, select React Native from the list on the left, enter a project name and click OK.

new-react-native-project
Continue reading

Posted in Tutorials | Tagged , , | 86 Comments

WebStorm 2016.3.2 is now available

WebStorm 2016.3.2 is now available with many important bug fixes and improvements.

A patch-update is available for WebStorm 2016.3, 2016.3.1, as well as for the 2016.3.2 RC build. If you’re using an earlier version, now it’s a great time to give WebStorm 2016.3 and its new features a try and download it from our website for a free 30-day evaluation.

Among noticeable fixes and improvements:

  • The issue with using special symbols in Terminal with some keyboard layouts is now fixed
  • Support for debugging iOS apps with React Native 0.37+
  • Support for Stylelint 7.4+
  • Improvements in support for TypeScript 2.1

Improvements in support for async functions

We’ve added 2 new inspections that would help you working with the async functions. First one warns you if you forgot await when making an asynchronous function call:

missing-await

Continue reading

Posted in Release Announcements | Tagged | 15 Comments