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 , | Leave a comment

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 , , , , , , , , | 31 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

WebStorm 2016.3 EAP, 163.6512: React Native

A new WebStorm 2016.3 EAP (163.6512) build is now available! You can download it here, or if you have the EAP build (163.6110) from the last week installed, you should soon get a notification in the EAP about a patch update.

Debugging React Native apps

With WebStorm you can now run and debug mobile apps developed with React Native! Together with the React and Flow support we believe WebStorm can become a great and powerful tool for development with React Native. We’d appreciate your feedback on this new feature!

debug-react-native

We assume that you already have React Native installed and configured for the iOS or Android development. We really recommend you to install Watchman on macOS, it helped us make the app running with no errors when we were developing and testing the new feature.

Now create a new React Native Run/Debug configuration in WebStorm, select the target platform and hit Ok. Make sure the path to the React Native CLI package is correct. Put the breakpoints in your code and start the Debug session.

react-native-configuration

Once the emulator opens for the first time, go to the in-app developer menu and select Remote JS Debugging. The WebStorm built-in debugger will then connect to the emulator and you can debug your app.

Continue reading

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

WebStorm 2016.2.4 is now available

WebStorm 2016.2.4 is now available! You can download it from our website. A patch-update should be available, if you’re using WebStorm 2016.2.2 or 2016.2.3.

WebStorm 2016.2.4 addressed the issues with scrolling on macOS Sierra and brings over 30 bug-fixes. You can find a full list of addressed issues in the Release notes.

Your WebStorm Team

Posted in Release Announcements | Tagged | 10 Comments

WebStorm 2016.3 EAP, 163.6110: new inspections for ES6

A fresh WebStorm 2016.3 EAP (163.6110) build is now available! You can download it here, or if you have the previous EAP build (163.5644) from last week installed, you should soon get a notification in the EAP about a patch update.

TypeScript language service

For the past few months we’ve been working on the integration with the TypeScript language service for code analysis and completion. Now we’re finally enabling it by default for all TypeScript projects. On top of that, WebStorm adds its own powerful refactorings and quick-fixes. WebStorm will also provide coding assistance if the service takes too long to reply. Thanks to the integration, WebStorm will report errors more consistently with the compiler.

New inspections for ES6

We’ve added two new inspections that can help you migrate your code to ECMAScript 6 and be sure that you’re consistently using the new syntax in your project:

  • ‘var’ used instead of ‘let’ or ‘const’, which as the name suggests will report any usage of var and suggest converting that to let or const.
  • require()’ used instead of ‘import’, which will help you migrate to ES6 imports.

In addition, the Convert to arrow function and Convert to template string intentions which were introduced in WebStorm 2016.2 are now available as inspections.

The main benefit of having them as inspections compared to intentions is that you can run them for the whole project using Code | Inspect code… and then batch-apply fixes.

inspect-code

With a new severity level “No highlighting, only fix” that is used for these new inspections by default, no warnings will be reported in the editor when you, for example, use a ‘require()’ statement, but if you press Alt-Enter on it, you’ll see a quick-fix that will convert it to the ‘import’ statement. You can also apply fixes for the whole file – hit the arrow right and select this option.

require-to-import

You can find and configure these inspections in the new “ECMAScript 6 migration aids” inspection group (Preferences | Editor | Inspections). Note that they work only in projects with ECMAScript 6 or JSX React enabled in Preferences | Languages & Frameworks | JavaScript.

Continue reading

Posted in Early Access Preview | Tagged , | 7 Comments

WebStorm 2016.3 EAP, 163.5219: ES6 object destructuring

Please welcome a new WebStorm 2016.3 EAP build (163.5219)! You can download it here, or if you have the previous EAP build (163.4830) from the last week installed, you should soon get a notification in the EAP about a patch update.

Better support for ES6 destructuring

WebStorm now provides better support for object destructuring. You can now easily jump to the definition from the destructuring assignment and see quick documentation and parameter info when using a function.

destructuring

For a detailed list of the issues addressed in this EAP build, please see the Release notes.

Continue reading

Posted in Cool Feature | 4 Comments

WebStorm 2016.3 EAP, 163.4830: Stylelint, usages for default exports, and more

Please welcome a new WebStorm 2016.3 EAP build (163.4830)! You can download it here, or if you have the previous EAP build (163.4396) from the last week installed, you should soon get a notification in the EAP about a patch update.

Integration with Stylelint

WebStorm adds integration with Stylelint, a code quality tool for stylesheets. You can now see the errors reported by Stylelint right in the editor.

stylelint

To get started, install Stylelint globally or locally in your project via npm, add .stylelintrc file with the Stylelint configuration and then enable the integration in Preferences | Languages & Frameworks | Stylesheets | Stylelint. That’s it! Stylelint errors will be shown in the editor. Hover over the highlighted code to see the error description.

Find usages for ES6 default exports

You can now find usages for default-exported functions or classes: press Alt-Cmd-F7 on OS X or Ctrl+Alt+F7 on Windows and Linux on the export  to see usages in a popup or press Alt-F7 to see usages listed in a tool window.

find-usages-default-export

Updated Angular 2 code snippets

Angular 2 has been finally released, yay! We’ve updated the collection of the Angular 2 Live templates in WebStorm to comply with John Papa’s recommendations.

In addition, we’ve fixed some issues with duplicates in import suggestions when using Angular 2.0.

TypeScript import can be shortened

A new inspection now warns you if an import statement in the TypeScript code can be shortened. That is very useful when you re-import all classes contained in a directory in the index.ts file.

short-path-in-ts-import

For a detailed list of the issues addressed in this EAP build, please see the Release notes.

Learn more about other new features in WebStorm 2016.3:

  • WebStorm 2016.3 EAP, 163.3094: Integration with Flow; PostCSS support; Smarter Rename for TypeScript; More features in Angular CLI integration; Grouped generated files in the Project view; Option to generate an .editorconfig file; Code style option for arrow functions.
  • WebStorm 2016.3 EAP, 163.3512: Integration with Docker for Node.js apps; Bundled Fira Code font; San Francisco font is default on OS X; Flow tool window with file and project errors.
  • WebStorm 2016.3 EAP, 163.3983: ESLint autofix; Automatic detection of TypeScript version in the project; Undo commit action; Test names now available in the Go to symbol.
  • WebStorm 2016.3 EAP, 163.4396: Create new React apps with Create React App from the Welcome screen; Improvements in Angular 2 support.
  • WebStorm 2016.3 EAP, 163.5219: Better support for ES6 object destructuring.

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.

– JetBrains WebStorm Team

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

WebStorm 2016.3 EAP, 163.4396: Create React app

WebStorm 2016.3 EAP build (163.4396) is now available! You can download it here. Unfortunately, there’re no patch-updates available this time.

Create React App

Create React App is an officially recommended way to create new React apps. And now you can create new apps using Create React App right from the IDE Welcome screen!

create-react-app

Make sure that you have create-react-app installed globally on your computer, for that run npm install -g create-react-app. Then to start your new project, double click on the start task in the npm tasks tool window to run it. That’s it!

Improvements in Angular 2 support

When providing code completion and resolve for methods in the Angular 2 templates, WebStorm now understands available type info and therefore provides more precise results.

ng2-methods-completion

In addition to that, in the TypeScript projects all compiled JavaScript files are now automatically excluded, so that they won’t appear in resolve, find usages, search results, etc. Please let us know what you think about it.

You can find a more detailed list of issues addressed in this EAP build in the Release notes.

Learn more about other new features in WebStorm 2016.3:

  • WebStorm 2016.3 EAP, 163.3094: Integration with Flow; PostCSS support; Smarter Rename for TypeScript; More features in Angular CLI integration; Grouped generated files in the Project view; Option to generate an .editorconfig file; Code style option for arrow functions.
  • WebStorm 2016.3 EAP, 163.3512: Integration with Docker for Node.js apps; Bundled Fira Code font; San Francisco font is default on OS X; Flow tool window with file and project errors.
  • WebStorm 2016.3 EAP, 163.3983: ESLint autofix; Automatically detecting TypeScript version in the project; Undo commit action; Test names now available in the Go to symbol.
  • WebStorm 2016.3 EAP, 163.4830: Integration with Stylelint; Find usages for ES6 default exports; Updates Angular 2 live templates; New inspection “TypeScript import can be shortened”.
  • WebStorm 2016.3 EAP, 163.5219: Better support for ES6 object destructuring.

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.

– JetBrains WebStorm Team

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