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 EAP 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 | 12 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 | Leave a comment

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 | 4 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 , , , , | 28 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 , , | 6 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

WebStorm 2016.3.1 is now available

WebStorm 2016.3.1, the first bug-fix update for the recently released major version is now available!

If you’re using WebStorm 2016.3 or WebStorm 2016.2.4, a patch-update should be available. If you’re using an earlier version, give WebStorm 2016.3 and its new features a try and download it from our website for a free 30 day evaluation.

WebStorm 2016.3.1 addresses the issues with using TypeScript 2.0.10 and exporting settings. Find a full list of addressed issues in the Release notes.

Your WebStorm Team

Posted in Release Announcements | Tagged | 7 Comments

Using Flow in WebStorm

Flow is a static type system developed by Facebook. It introduces a syntax of type annotations for JavaScript and provides a type checking tool.

Using types in your code allows Flow to catch more errors before you run the code, but is not mandatory – Flow’s static analysis can detect some errors even without type annotations.

WebStorm 2016.3 adds integration with Flow. So if you’re using Flow in your project, you will now see errors reported by Flow in the editor, as well as in a new Flow tool window. Errors are displayed right as you make changes in your code, without having to save them. Flow can also power WebStorm’s code completion, type hints, and navigation to the definition.

Let’s have a closer look at how this all works in WebStorm.

Installing Flow

If you’re new to Flow, we recommend that you check some examples on the Flow website first and follow their installation steps:

  • Make sure that Flow is added to your project. If not, run npm install --save-dev flow-bin
  • Add a .flowconfig file to your project with flow init command.
  • For all files you’d like to check with Flow, add // @flow comment on top.

Tip: Type flow and press Tab – WebStorm will expand it into // @flow.

In WebStorm:

  • Go to Preferences | Languages & Frameworks | JavaScript in WebStorm and set language version to Flow. WebStorm will then understand Flow type annotations in your code.
  • Check that the path to Flow is specified. If it’s correct, click OK to apply settings. You’re ready to go!

As you may have already noticed, there are three checkboxes for configuring how the Flow service is going to be used by WebStorm. Later we’ll discuss the features each checkbox adds.

flow-preferences

Code analysis and type checking

Once you’re done with the steps above and have enabled Type checking, WebStorm will run a Flow server that will analyze the code you’re working on.

Don’t forget that Flow analyzes only those files that have // @flow at the top.

Any errors Flow finds will be highlighted in the editor. Hover on the error to see its description.

flow-error

Continue reading

Posted in Cool Feature, Tutorials | Tagged , | 6 Comments

WebStorm 2016.3 released: Flow, better TypeScript support, debugging React Native apps, Stylelint, and more

Please meet WebStorm 2016.3, the third big WebStorm update of 2016 jam-packed with new features!

For the past four months we’ve been working hard to improve support for ES6, TypeScript, and Flow and integrate more tools into the IDE, to help you develop more smoothly and productively not only for the web but also for mobile.

Visit What’s new in WebStorm 2016.3 to see a full overview of its new features or watch an overview video below.

And here’re some of the highlights:

  • Support for Flow: type errors are reported right in the editor; Flow-powered code completion
  • Support for React Native: code completion, running and debugging apps in WebStorm
  • Better TypeScript support: more precise code completion and analysis powered by the TypeScript language
    service; smarter Rename refactoring that understands the inheritance hierarchy
  • Set of inspections and quick-fixes for migrating the code to ES6 and a new
    Convert to class intention

Among other noticeable updates: integration with Stylelint, support for PostCSS via a plugin, running and debugging tests with Protractor, quick bootstrap to run and debug Node.js app in Docker, better support for ES6 destructuring, and even more!

40off2xIf you have a WebStorm license purchased before November 2015, before January 1, 2017 you can purchase a new subscription at 40% off and keep using WebStorm with all the latest features.

JetBrains WebStorm Team

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

WebStorm 2016.3 EAP, 163.6957: Protractor, TypeScript quick fixes

Another week – another WebStorm 2016.3 EAP (163.6957) build! You can download it here, or if you have the EAP build (163.6512) from the last week installed, you should soon get a notification in the EAP about a patch update.

Integration with Protractor

Protractor is an end-to-end test frameworks developed by the Angular team. And you can now run and debug tests with Protractor right from WebStorm. Test results will be shown in a tool window in the IDE. You can filter the results and see only the failing tests. You can also quickly jump from the list of tests to the test source.

protractor

To get started right-click (or hit Ctrl-Shift-R on macOS or Ctrl-Shift-F10 on Windows and Linux) on the protractor.conf.js file in the project view or in the editor and select Run ‘protractor.conf.js’. Please make sure first that you have Protractor installed globally on your machine.

You can use the same run/debug configuration to debug the tests.

More quick fixes for TypeScript

WebStorm now makes quick-fix options provided by the TypeScript 2.1 language service available in the editor together with the WebStorm’s own quick fixes and intentiones.

Hit Alt-Enter on the highlighted code and see suggestions to automatically fix it (note that quick fixes are available only for some types of errors).

ts-quick-fixes

WebStorm also added the support for TypeScript 2.0.6.

Completion for React Native StyleSheet properties

When working with the React Native apps, WebStorm will now provide code completion (and color preview) for properties inside StyleSheet. 

rn-stylesheet

Continue reading

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