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 , , | 36 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 , , | 22 Comments

WebStorm 2016.3 EAP, 163.3983: ESLint autofix, detecting TypeScript version

The new WebStorm 2016.3 EAP build (163.3983) is now available! You can download it here or, if you have the previous WebStorm 2016.3 EAP build (163.3512) installed, you should soon get a notification in the IDE about a patch update (unfortunately, there is no patch for Windows this time).

ESLint autofix

You can now run ESLint autofixing for the current file right from the editor. Hit Alt-Enter on the highlighted error reported by ESLint and select Fix current file with ESLint or run Fix ESLint Problems from the Find action dialog.

eslint-fix

You can also see ESLint errors in the Inspect code tool window and apply fix from there.

Please note that ESLint provides autofixing only for some of the rules, mostly related to the code formatting.

Detecting TypeScript version

In the TypeScript projects WebStorm now automatically detects and uses TypeScript version installed in the project.

typescript-version

You can check which version is currently used or select another version in Preferences | Languages & Frameworks | TypeScript.

Undo commit

With a new Undo Commit… action in the VCS log you can, as the name suggest, undo a commit that is not yet pushed.

undo-commit

Test names in Go to symbol…

You can now navigate to a test by its name using Go to symbol… action (Ctrl-Alt-Shift-N on Windows and Linux and Alt-Cmd-O on OS X).

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.4396: Create new React apps with Create React App from the Welcome screen; Improvements in Angular 2 support.
  • 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 , , | Leave a comment

WebStorm 2016.2.3 is now available

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

This update brings over 30 bug-fixes in various IDE subsystems. 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.3512: Docker support, new fonts

The new WebStorm 2016.3 EAP build (163.3512) is now available! You can download it here or, if you have installed the previous WebStorm 2016.3 EAP build (163.3094), you should soon get a notification in the IDE about a patch update (unfortunately, there is no patch for Windows this time).

Using Docker with Node.js apps

WebStorm 2016.3 EAP brings integrations with Docker: you can now run and debug Node.js apps running in Docker using a Node.js run/debug configuration in WebStorm. WebStorm can also help you quickly bootstrap Docker for your app. Find more details on the integration in this document.

docker

San Francisco font for OS X

On OS X the San Francisco font is now used for all the menus and tool windows both in the default light and dark themes.

san-francisco

And by the way, the native file chooser is now back. Sorry for the inconvenience before.

Fira Code font

The IDE now bundles the FiraCode font that supports ligatures. You can set it as your editor font in Preferences | Editor | Colors & Fonts | Font.

firacode

Flow tool window

When using Flow, you can now see all the errors in the current file and in the project displayed in the tools window in addition to the editor.

flow-tool-window

We’ve also added a new live template: type flow and hit Tab to expand it into // @flow.

In addition to that, the Flow configuration has been moved to Preferences | Languages & Frameworks | JavaScript. There you can enable Flow for all *.js files and specify the path to Flow package.

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.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.4396: Create new React apps with Create React App from the Welcome screen; Improvements in Angular 2 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.

– JetBrains WebStorm Team

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

WebStorm 2016.3 Early Access Preview: Flow, PostCSS, and more

Back from the summer vacations, we are ready to announce the start of the Early Access Preview for WebStorm 2016.3, the third (!) major update coming this year.

Today’s EAP build brings lots of new exciting features, and more are coming later in September! Download WebStorm 2016.3 EAP right now.

You can install it side by side with WebStorm 2016.2 or any previous WebStorm version. No active subscription is required. Please note that this is a pre-release version of WebStorm. We would appreciate your feedback on our issue tracker.

We upload a new WebStorm 2016.3 EAP build every week adding more new features:

  • 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.4396: Create new React apps with Create React App from the Welcome screen; Improvements in Angular 2 support.
  • 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.

Integration with Flow

Flow is a static type checking system for JavaScript, developed by Facebook. Just a couple of weeks ago Flow became available on Windows and we’re happy to announce that you can now easily use Flow in WebStorm to analyse your code.

flow

Set JavaScript version to Flow in Preferences | Languages & Frameworks | JavaScript and check that the path to your locally or globally installed Flow is set correctly in Preferences | Languages & Frameworks | JavaScript. That’s it!

Now all the files that begin with // @flow are going to be analysed with Flow and the errors are going to be reported right in the editor. If you change a file with a function definition, you don’t need to save it manually to trigger Flow to check its usages, it all works seamlessly.

PostCSS support

Good news for those using PostCSS – an official plugin for the PostCSS support is now available. You can install it via Preferences | Plugins – just search for PostCSS.

WebStorm now provides full-featured support for PostCSS with intelligent code completion, navigation, inspections, configurable code style and auto-formatting, as well as the Rename refactoring for custom selectors and media queries. Read more in the plugin description.

postcss

If you write PostCSS code in files with a .css extension, you will need to associate these files with PostCSS in Preferences | Languages & Frameworks | Stylesheets | Dialects to enable PostCSS support.

The following PostCSS plugins are supported: postcss-custom-properties, postcss-apply, postcss-custom-media, postcss-media-minmax, postcss-custom-selectors, postcss-nesting, and postcss-nested.

Continue reading

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