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, build 163.3094.20, 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.

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 | Flow (the UI will change before release). 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 | CSS 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 , , , , | 22 Comments

WebStorm 2016.2.2 is now available

WebStorm 2016.2.2 is now available! You can download it from our website or, if you’re using WebStorm 2016.2.1, you will soon receive a notification about available patch-update.

In addition to various bug fixes, this update brings performance improvements for the projects opened for the first time, thanks to a new way of indexing the node_modules folder. You can find a full list of all addressed issues in the Release notes.

Your WebStorm Team

Posted in Release Announcements | Tagged | 7 Comments

Using External tools: ESLint autofix and React Native

Did you know that you can easily run many command line tools from WebStorm with just a shortcut? Well, now you do! No need to go to the Terminal, thanks to the feature called External tools. Let’s see how we can use External tools to run ESLint autofix and React Native.

ESLint

ESLint is a popular linter for JavaScript that has a great number of built-in rules and can also be extended with plugins. WebStorm’s integration with ESLint allows you to see warnings and errors reported by ESLint right in the editor, as you type. (To enable that, go to Preferences | Languages & Frameworks | JavaScript | Code quality tools | ESLint.) Unfortunately, WebStorm does not yet support ESLint autofixing functionality. But we can enable that via External tools!

Assuming that you already have ESLint installed (globally or locally) and configured the rules in your project, that should be rather easy: go to Preferences | Tools | External tools and click + to add a new tool. Let’s name it ESLint Fix.

If ESLint is installed globally, run this in the command line from the project root (where app.js is the file we want to fix):
eslint app.js --fix

So in the External tools configuration, we need to set Program and Parameters accordingly, but using specific WebStorm macros that would add the filename of the opened file and project root path:

run-eslint-fix

Continue reading

Posted in Cool Feature | Tagged , | 4 Comments

WebStorm 2016.2.1 is now available

WebStorm 2016.2.1, the first bug-fix update for the recently released WebStorm 2016.2, is now available! If you missed the WebStorm 2016.2 release, find out more about its new features and download WebStorm 2016.2.1 on the What’s new page. And if you are already using it, you’ll soon get a notification about available patch-update.

This update brings over 80 bug fixes in various subsystems, including fixes for debugging Karma tests from the IDE. You can look through them in the Release notes.

In addition to that WebStorm 2016.2.1 also brings some new features and improvements.

ui-router state diagram

With this new feature, you can see a diagram illustrating the relations between views, states and templates in AngularJS app that use ui-router. You can invoke Show AngularJS ui-router State Diagram from the Find action dialog (Shift-Cmd-A on OS X or Shift+Ctrl+A on Windows and Linux) or from the file context menu in the editor.

Continue reading

Posted in Release Announcements | Tagged | 30 Comments

WebStorm 2016.2.1 EAP, 162.1447: ui-router state diagram and bug fixes

We are rolling out a preview for the WebStorm 2016.2.1 (162.1447), a bug-fix update to the recently released major WebStorm update.

You can download it here and install side by side with the stable version of WebStorm or, if you have WebStorm 2016.2 installed and you’re subscribed to the EAP update channel, you should soon get a notification in the IDE about a patch update.

ui-router state diagram

With this new feature (that we were still finishing at the moment of the initial WebStorm 2016.2 release), you can see a diagram illustrating the relations between views, states and templates in AngularJS app that use ui-router. You can invoke Show AngularJS ui-router State Diagram from the Find action dialog (Shift-Cmd-A on OS X or Shift-Ctrl-A on Windows and Linux) or from the file context menu in the editor.

ui-router-852@2x

WebStorm 2016.2.1 EAP also brings lots of bug fixes and minor improvements. We’ve addressed the issue with debugging Karma tests from the IDE. The full list of addressed issues can be found in the Release notes.

Please report any issues to our tracker. Thanks!

Your WebStorm Team

 

Posted in Cool Feature | Tagged , , | 12 Comments

WebStorm 2016.2: Drag files into HTML and quotes style

Things that automate some small but really routine tasks are the best. That’s why we made possible to add links to JavaScript and CSS files and images by dragging them into the opened HTML file.

If you drag a JavaScript file, WebStorm will automatically create <script src="file_name.js"></script> tag inside the head tag in the HTML file. For CSS files it will add <link rel="stylesheet" href="file_name.css">:

drag-css-js-to-html-1600

Drag an image into a specific place inside the HTML body to add an img tag with width and height attributes:

drag-image-to-html-1600

You can configure whether you’d like to have double or single quotes in this generated code in Preferences | Editor | Code Style | HTML – Other – Generated quote marks.

That would actually also affect all quotes added, thanks to code completion, for example when you type <div class=""></div>. If you enable the Enforce on reformat option, the quotes will be replaced according to the selected style with the Reformat code action (Alt-Cmd-L on OS X, Ctrl+Alt+L on Windows and Linux).

Your WebStorm Team

Posted in Cool Feature | Tagged , | 5 Comments

WebStorm 2016.2 released: TypeScript 2.0, improved support for React, Angular CLI, and more

Please welcome the official release of WebStorm 2016.2, the second update for our JavaScript IDE this year. This update brings even better experience while editing and refactoring JavaScript and TypeScript code and steps up the IDE’s debugging capabilities.

Download WebStorm 2016.2 for your OS on the What’s new page on our website.

Here are the highlights of this update:

  • Support for the upcoming TypeScript 2.0 features.
  • Improvements in React support: coding assistance for component properties defined using PropTypes, support for non-DOM attributes and lifecycle methods.
  • Integration with Angular CLI for creating new projects and the collection of Angular 2 code snippets.
  • New intentions for upgrading to ECMAScript 6: Convert to arrow function and Convert to const or let.

In other updates, you can now take advantage of support for jspm imports, support for fonts with ligatures in the editor, improvements in working with VCS patches, and more.

For a more detailed overview please visit What’s new in WebStorm 2016.2.

Your WebStorm Team

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

WebStorm 2016.2 EAP, 162.844: convert to arrow function, custom background

Fresh WebStorm 2016.2 EAP build (162.844) is now ready! You can download it here or, if you have installed the previous WebStorm 2016.2 EAP build (162.646), you should soon get a notification in the IDE about a patch update.

Convert to arrow function

We’re now working on a set of intentions that will help you to convert your code to ES6. In WebStorm 2016.1 we’ve introduced Convert to ES6 template string action. And the new intention that is now available is for converting to arrow functions.

For example, you can convert a  callback function to arrow function by hitting Alt-Enter on the function keyword:

to-arrow-function

You can also convert arrow function to a shorthand arrow function:

to-shorthand-arrow-function

We’d be very happy to hear your feedback on that! In the next WebStorm 2016.2 EAP builds we’re planning to highlight the code which can be converted and allow bulk fixes across the project files.

Continue reading

Posted in Early Access Preview | Tagged , | 13 Comments

WebStorm 2016.2 EAP, 162.646: Angular CLI, ligatures, and debugging in Firefox

The new WebStorm 2016.2 EAP build (162.646) is now available! You can download it here or, if you have installed the previous WebStorm 2016.2 EAP build (162.426), you should soon get a notification in the IDE about a patch update.

Angular CLI and code snippets

Thanks to the integration with Angular CLI,  you can now create new Angular 2 projects with ease. Install angular-cli globally via npm, click Create new project on the IDE Welcome screen, select Angular CLI from the list of project templates, enter a project name, and click Create.

angular-cli

In addition to that, we’ve added a collection of Angular 2 code snippets developed by John Papa and adapted to WebStorm by Reto Ryter.

The list of templates is available in Preferences | Editor | Live templates. To use a template, type its abbreviation in the editor and then press Tab to expand it. Press Tab again to jump to the next edit location in the template.

ng2-snippet

Support for fonts with ligatures

The editor in WebStorm now supports fonts with programming ligatures, like Fira Code, Monoid or Hasklig.

ws-ligatures

Continue reading

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

WebStorm 2016.1.3 is now available

WebStorm 2016.1.3, a new bug fix update for WebStorm 2016.1, is now available!

This update brings Angular 2 RC compatibility (the IDE now understands variable declarations with let inside the structural directives such as *ngFor and provides proper auto imports with paths starting with @angular), support for the scoped npm packages, and improvements in the TypeScript support and integration with the build tools. You can find the full list of addressed issues in the release notes for the builds 145.1616 and 145.1503.

A patch-update from WebStorm 2016.1.2 and 2016.1.3 EAP should be available.

Your WebStorm Team

Posted in Release Announcements | Tagged , , | 19 Comments