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.
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.
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, we would normally run this in the command line from the project root to apply fixes (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. Please note that on Windows you need to specify the full path to the ESLint executable.
If on the other hand you have ESLint installed locally, replace the program with ./node_modules/.bin/eslint (on OS X) or .\node_modules\.bin\eslint.cmd (on Windows).
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.
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.
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.
Drag an image into a specific place inside the HTML body to add an img tag with width and height attributes:
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).
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.
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:
You can also convert arrow function to a 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.
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.
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.
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.
Meet the new WebStorm 2016.2 Early Access Preview build (162.232)! You can download it here or, if you have already installed the first WebStorm 2016.2 EAP build, you should soon get a notification in the IDE about a patch update.
Here are some of the new things you can try in WebStorm 2016.2 EAP.
Improved way of working with patches
Now it’s so much easier to apply patches to a project!
Just copy the patch to the clipboard, go to the IDE and it will immediately suggest applying it! For example, if you’re working with a Github pull request, type .patch at the end of the URL, copy the text, go to WebStorm and voilà! Alternatively, you can drag the patch file into the IDE, or use the Apply patch action in the VCS menu.