WebStorm 2016.3 EAP, 163.5219: ES6 object destructuring

Posted on September 30, 2016 by Ekaterina Prigara

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

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

Posted on September 23, 2016 by Ekaterina Prigara

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.

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 , , , | 1 Comment

WebStorm 2016.3 EAP, 163.4396: Create React app

Posted on September 15, 2016 by Ekaterina Prigara

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.

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 , , | 12 Comments

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

Posted on September 8, 2016 by Ekaterina Prigara

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.

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

Posted on September 5, 2016 by Ekaterina Prigara

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

Posted on September 2, 2016 by Ekaterina Prigara

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

Posted on August 25, 2016 by Ekaterina Prigara

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.

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

WebStorm 2016.2.2 is now available

Posted on August 17, 2016 by Ekaterina Prigara

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

Posted on August 8, 2016 by Ekaterina Prigara

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

Posted on August 3, 2016 by Ekaterina Prigara

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