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

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.
  • 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.

Smarter Rename for TypeScript

Rename refactoring in TypeScript now works through the inheritance hierarchy.
Now when you want to rename a method in a class, WebStorm will make sure that it’s also renamed in a parent class or in an interface. It also works the other way around: when renaming something in an interface or a parent class descendants are renamed as well.

ts-rename

In addition to that, Go to implementation… now works better for classes and interfaces.

More Angular CLI

Angular CLI commands that allow you to generate components, directives, services, and other blueprints are now available in Angular 2 projects (generated with Angular CLI) right in the New… popup (Cmd-N on OS X or Alt-Insert on Windows and Linux).

ng-cli

Grouped files in Project view

WebStorm now automatically displays generated files grouped with a source file located in the same folder in the Project view, for example, .css and .css.map files will be grouped with a .sass file with the same name. This will also work for some other patterns like .ts – .js – .js.map or .pug – .html.

grouped-files

Generate .editorconfig

You can now generate an .editorconfig file based on the current IDE code style settings. Go to Preferences | Editor | Code style – EditorConfig and hit Export – an .editorconfig file will added to the project root.

editorconfig

Spaces around arrow functions

With a new code style option you can configure adding spaces around arrow operator in JavaScript and TypeScript when reformatting the code or when using Convert to arrow function intention. Check Preferences | Editor | Code style | JavaScript – Spaces – Around operators.

You can find a more detailed list of issues addressed in this EAP build on our issue tracker.

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

Comments below can no longer be edited.

35 Responses to WebStorm 2016.3 Early Access Preview: Flow, PostCSS, and more

  1. Developer says:

    August 25, 2016

    Awesome! Yet I think the version info is wrong. After updating to 2016.3 EAP 163.3094.20, it keep prompting for another update to 2016.3 EAP 164.3094.20, notice the major version says 164 instead of 163.

    • Dennis Ushakov says:

      August 25, 2016

      Thanks a lot for noticing, fixed!

  2. Michael Hasenstein says:

    August 25, 2016

    There seems to be a typo somewhere. When I start the freshly installed EAP 163.3094.20 I get an “Platform update available” message, and clicking on it I’m informed that I have “163.3094.20” installed and that “164.3094.20” is available (164 instead of 163).

    • Dennis Ushakov says:

      August 25, 2016

      Indeed, thank you for the report, should be fixed now

  3. TED Vortex says:

    August 25, 2016

    I’m having the same issue Michael Hasenstein, hopefully it will be fixed in a minor update. I will just evade the popup by not closing WebStorm for a couple of days !

    Cheers great update !

    • Dennis Ushakov says:

      August 25, 2016

      Thank you too, fixed, should not bother you anymore 🙂

  4. Sergey Zarouski says:

    August 26, 2016

    Very exciting update! Thank you.

  5. Andrey says:

    August 26, 2016

    Hi, Ekaterina. I’m node.js developer and using yours WebStorm for backend development. Could you prompt me how can I add “Database tools” plugin which is used in PhpStorm to WebStorm? Because this plugin just doesn’t exist within WebStorm plugin repository. Thanks for advance.

    • Dennis Ushakov says:

      August 26, 2016

      Database tools is not available in WebStorm, you can vote for this request

  6. michael says:

    August 26, 2016

    Should these be available in the current IntelliJ 2016.3 EAP as well?

    • Dennis Ushakov says:

      August 26, 2016

      Yes it will be available once IntelliJ 2016.3 EAP is published

      • michael says:

        August 26, 2016

        umm… isn’t it already? https://confluence.jetbrains.com/display/IDEADEV/IDEA+2016.3+EAP

        • michael says:

          August 26, 2016

          It seems that the current 2016.3 EAP does _not_ include proper flow support yet. when it will be available in the IntelliJ?

          • michael says:

            August 26, 2016

            I downloaded latest Webstorm 2016.3 EAP, and it didn’t have proper support either? I tried with the code you have in the screeshot in the flow part. what i did was:

            1. downlaoded and installed latest WS 2016.3 EAP
            2. created new react project
            3. changed language level to flow
            4. added annotation on the top of the file
            5. wrote the code in your example
            6. no any errors. Nothing has changed since previous versions. doh.

            • Dennis Ushakov says:

              August 26, 2016

              You need to specify Flow executable in Settings | Languages & Frameworks | JavaScript | Flow. This UI will change in future EAPs

  7. michael says:

    August 26, 2016

    oh, excellent, thanks! I just didn’t notice there was an extra menu for flow. I was under impression that Preferences | Languages & Frameworks | JavaScript | Flow means that flow is selected from the dropdown 🙂

    if flow is installed as npm package, this path works: node_modules/flow-bin/vendor/flow

  8. Hongbo Miao says:

    August 26, 2016

    Thanks, an amazing update!!

  9. devman says:

    August 26, 2016

    just downloaded latest and did the below

    – pointed WS Flow exec to C:\Users\username\AppData\Roaming\npm\node_modules\flow-bin\vendor\flow

    – made sure the java-script language version is set to flow
    – added // @flow to the top of file
    – restarted WS

    this is the code with intentional error but WS don’t report anything!

    // @flow

    function add(a: number, b: number): number {
    return a + b;
    }

    add(`string`, 2);

    • Konstantin Ulitin says:

      August 29, 2016

      Do you have a .flowconfig file in your project root? Basically, WebStorm flow integration won’t work unless ‘flow check’ or ‘flow check-contents’ works in terminal. We’ll add error notifications from flow server in the next WebStorm EAP.

      • devman says:

        August 31, 2016

        thanks man, it works now based on your advice, but the IDE becomes sooo slow and on each line of code i write it starts to perform indexing!

        • Konstantin Ulitin says:

          September 2, 2016

          Could you please create an issue on youtrack and attach idea.log?

  10. John Malindgez says:

    August 28, 2016

    Guys, what are your plan for issues like these
    https://youtrack.jetbrains.com/issue/WEB-16923
    https://youtrack.jetbrains.com/issue/WEB-22473
    https://youtrack.jetbrains.com/issue/WEB-22611
    https://youtrack.jetbrains.com/issue/WEB-18593
    https://youtrack.jetbrains.com/issue/WEB-22998
    It’s been over a year since some of them were created, ES6 used in most projects now, but WebStorm still can’t recognize object destructuring correctly 🙁

    • Michael Hasenstein says:

      August 29, 2016

      I think I have 28 issues open at this time, about 1/3rd of all the issues I ever created.

      For my JS code I rely a lot on “simulated static type checking” — I use JSDoc and Google Closure compiler syntax for each and every variable and function and let Webstorm tell me if anything is wrong. I guess with that I’m a fringe case, I’m thinking about switching to Facebook’s Flow instead of relying on the IDE. So the new Flow support is very welcome. If that works I’ll probably have a lot less issues.

    • Konstantin Ulitin says:

      August 29, 2016

      We’ll handle destructuring issues in the nearest time. Sorry for the inconvenience.

  11. Clark Tomlinson says:

    September 2, 2016

    Am i the only one not seeing the advertised editorconfig stuff?

    • Ekaterina Prigara says:

      September 5, 2016

      Please check that you have EditorConfig plugin enabled in Preferences | Plugins.

  12. Pavel Doleček says:

    September 11, 2016

    Beware, don’t forget to check this to see Flow errors

    https://dl.dropboxusercontent.com/s/f6s2i9rlngoh2o9/Preferences_2016-09-11_23-28-52.png?dl=0

  13. Pavel Doleček says:

    September 11, 2016

    Beware: Don’t forget do enable Flow in Inspections

    https://dl.dropboxusercontent.com/s/f6s2i9rlngoh2o9/Preferences_2016-09-11_23-28-52.png

  14. Thomas says:

    September 13, 2016

    Grouped files does not work for “file.js” with “file.min.js.map”

    • Alexander Doroshko says:

      September 13, 2016

      Fixed, thanks!

  15. Andy Edwards says:

    October 2, 2016

    Sweet! One thing though: it’s possible to have multiple projects in WebStorm each using different versions of Flow. Only being able to specify the path to a single flow executable means not all projects would typecheck correctly. The typical thing is to use the flow-bin npm package as a dependency of each project. So an option to search for flow-bin relative to source files would be great!

    • Ekaterina Prigara says:

      October 3, 2016

      You can configure the path to Flow for each project. For that simply go to the project Preferences | Languages & Frameworks | JavaScript, select Flow and specify the path. By default WebStorm will try to find and use a locally or globally installed Flow.

      • Navaneeth says:

        October 10, 2016

        @Prigara: Is there any expected release date? If it is some where near, I would like to update our webstorms to it directly. We are using 2016.2.1 as of now.

        • Ekaterina Prigara says:

          October 10, 2016

          We are planning to release WebStorm 2016.3 in mid-November. You can install WebStorm 2016.3 EAP side-by-side with your current WebStorm 2016.2.1.

  16. Serhii says:

    November 16, 2016

    Grouping in project view for custom scope doesn’t work. For instance I can see my .ts, .js and map files on the same level – http://prntscr.com/d826vo