WebStorm 11 EAP, 142.5255: Flow support, npm scripts, JSX in TypeScript

A new WebStorm 11 EAP build (142.5255) is now available for download.

Read about features and improvements added in WebStorm 11:

  • WebStorm 11 Early Access Program: Improved TypeScript 1.5 support, TSLint integration, Yeoman integration, new Node.js inspections, support for debugging Webpack, option to run single Mocha test, flame charts in V8 CPU profiler and more.
  • WebStorm 11 EAP, 142.3805: Improved HiDPI support for Windows and Linux, clickable links in comments, breadcrumbs in Stylus files.
  • WebStorm 11 EAP, 142.4148: Encode HTML symbols, Meteor, TypeScript 1.6 features.
  • WebStorm 11 EAP, 142.4723: New formatting options for chained methods, React and TypeScript 1.6 support improvements.

Basic Flow support

We’re happy to introduce basic support for Flow in WebStorm. Flow is a type checker for JavaScript which includes a JavaScript language extension that supports static typing.

WebStorm now understands Flow syntax and provides you with typed parameter info for annotated code in code completion.

flow_param_info

To use Flow, go to Preferences and switch the JavaScript language version to Flow:

flow_language_version

WebStorm also offers a Type mismatch inspection that finds type errors, though it’s still pretty basic. In the future, we plan to integrate the Flow linter to report any type errors.

flow_type_mismatch

npm scripts

npm is seeing more and more use as a task runner. That is why we decided to add an npm scripts tools window and a Run configuration similar to those WebStorm has for Gulp and Grunt.

Once you have a package.json file in your project, you can open the npm scripts tools window (by clicking the icon on the Tool buttons panel, or use the package.json context menu). This window lists all the tasks specified in the package.json scripts section. Double-click the task name to start it.

npm_scripts_tool_window

You can create a new Run configuration for a selected task or npm CLI command and then start it using a familiar Run… action (Alt+Shift+F10 on Windows and Linux or ⌃⌥R on Mac).

JSX in TypeScript

WebStorm adds basic support for another new TypeScript 1.6 feature: JSX support in TypeScript, also known as TSX.

Now you can leverage some of the benefits WebStorm provides for JSX in TypeScript, including coding assistance to JSX tags and component names, navigation from the component usage to its definition, and more.

tsx

Dart support improvements

WebStorm’s support for the Dart language is now fully powered by the Dart Analysis Server. It provides code highlighting, quick-fixes and intentions, code completion, and navigation features.

dart_quick_fixes

It also adds new refactorings for Dart code: Rename, Inline Variable/Method, and Extract Method.

This change will give WebStorm a deeper understanding of Dart code, and will allow you to get IDE support for new language features with just a SDK update.

The full list of addressed issues is available in the release notes.

Download WebStorm 11 EAP (build 142.5255), or use a patch update from the previous EAP build (142.4723).

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.

Develop with pleasure!
– JetBrains WebStorm Team

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Early Access Preview and tagged , , , . Bookmark the permalink.

49 Responses to WebStorm 11 EAP, 142.5255: Flow support, npm scripts, JSX in TypeScript

  1. Danyl says:

    Awesome, finally a type checker in WebStorm :) good job.
    Long life to JetBrains.

  2. Andrii Dieiev says:

    Strange but this is first update that was rejected by Windows Defender
    java.io.FileNotFoundException: C:\Users\Andrii\AppData\Local\Temp\idea.updater.6294115488870215682.tmp\temp.7804213427599466494.tmp (Operation did not complete successfully because the file contains a virus or potentially unwanted software)

  3. DarkPark says:

    2-3 recent major versions of WebStorm (and this EAP) have the same problem in Ubuntu – after some time or operations it’s impossible to open main menu. Extremely irritating.

  4. Flow + JSX says:

    Congrats on the Flow support, however this has a strong caveat. I cannot see a way to use Flow with JSX which one would imagine is a very strong use. What you would need is FlowJS to be merged to the same JavaScript language version, as at the moment any JSX being written with JS language version set to Flow is seen by WebStorm as XML. :-/

    • Ekaterina Prigara says:

      Actually our Flow language level encapsulates all the features of JSX Harmony language level. I have tried WebStorm with this sample file and Flow language level, it seems fine. Can you please share a code sample where JSX is treated as XML on https://youtrack.jetbrains.com/issues/WEB. Would be really helpful.

      • Flow + JSX says:

        Hmm it seems WebStorm autocompletes to “” when you add a prop as oppose to letting the user type prop={ testProp }:

        rather than forcing this:

        A message flashed up in the gutter about XML, which is why I why I was assuming it was related. If this is not clear as a description, I would be happy to provide a video link once I have access to a better connection!

        • Flow + JSX says:

          Ok – your webform just escaped a load of my code – I’ll email it.

          • Flow + JSX says:

            Ok try using something like:

            import React from 'react-native';
            let { Animated, Component } = React;

            class Example extends Component {
            render() {
            return (

            );
            }
            }

            Works fine with JSX Harmony, but shows an error with Flow enabled.

            Regards

          • Flow + JSX says:

            Sorry I just cannot use your webform at all, just seems to ignore a chunk of the code that is added.

          • Konstantin Ulitin says:

            Sorry to hear that. If you still want this issue to be fixed, please create a ticket on ahttps://youtrack.jetbrains.com/issues/WEB (seems XML in return statement in your snippet was thrown off by forum engine)

        • Konstantin Ulitin says:

          You can disable inserting quotes after typing ‘=’ in attribute value in Settings | Editor | General | Smart Keys in XML/HTML section.

  5. Kasper says:

    Thanks Jetbrains for the excellent Dart support you are offering!

    Would love to be able to have html highlighting when I write inline html in Angular 2. Is something like this on the roadmap for WS11 ? I think it is related to this issue

    https://youtrack.jetbrains.com/issue/WEB-9322

  6. James Parsons says:

    Awesome! I was really about to open a feature request for TSX, but I not. Jetbrains is an exceptional company.

  7. Strajk says:

    Updating broke es6 string literals for me, anybody has similar experience?
    Webstorm doesn’t recognise it at all


    .post(
    ${a}/a/b)

  8. Aaron Trent says:

    Any chance ES7/ES2016 features can be added before WebStorm 11 is released? Formatting and other stuff for declarators, the async/await keywords and other stuff are still quite broken or nonexistent.

  9. Torsten Rüter says:

    Thank you for bringing flow to the community!

  10. David Brockman Smoliansky says:

    Will these features be available in IntelliJ as well? If so, when? I really want to start using flow but I don’t want to stop using IntelliJ. Using npm scripts will also be very useful!

  11. This Rocks! Nice work you guys! I’m really excited to see AND use Flow support in WebStorm. Also happy to see the npm integration!

  12. Alex says:

    I’m using nvm on Windows:

    Panel for npm script runs errors on any try:

    C:\nvm\v0.12.2\npm.cmd:1
    (function (exports, require, module, __filename, __dirname) { @IF EXIST “%~dp0
    ^
    SyntaxError: Unexpected token ILLEGAL
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)
    at startup (node.js:129:16)
    at node.js:814:3

    Any advice?

  13. Umed says:

    Do you know that there is bug on mac when you working with multiple full-screened projects opened, when you do some operations that open modals (for example remove, rename) on a second project, after you press ‘ok’ in this modal it automatically switches workspaces and opens me another project. very annoying bug, persist for a long time already

  14. Hristo says:

    Super excited for the Flow support!

    I think WebStorm is incorrectly giving me a warning:

    class Test {
    constructor(cryptoService :Abstract) {}
    }
    var abs = new Abstract();
    var impl = new Impl(); // Impl extends Abstract

    var test1 = new Test(abs); // this is ok
    var test2 = new Test(impl); // WebStorm underlines impl here with a warning

    The warning is: “Argument type Impl is not assignable to parameter type Abstract”

    However, if I run flow from the command line, it doesn’t throw any errors/warnings because this is valid.

  15. lucas says:

    I am having some in my Meteor project with ALL jquery expressions. For example:

    $(“#minx”).val(sObject.extent.minx);

    gives the warning :

    “#min = SyntaxError: Unexpected token ILLEGAL

    Or for example:

    $(“.levelSelection[level=’level2′]”).val()

    .levelSelectio = SyntaxError: Unexpected token .

  16. lucas says:

    Sorry about that..

    I am having some PROBLEMS in my Meteor project with ALL jquery expressions. For example:

    $(“#minx”).val(sObject.extent.minx);

    gives the warning :

    “#min = SyntaxError: Unexpected token ILLEGAL

    Or for example:

    $(“.levelSelection[level=’level2′]”).val()

    gives the warning:

    .levelSelectio = SyntaxError: Unexpected token .

  17. Jack Allan says:

    Does the flow support work on Windows?

Leave a Reply

Your email address will not be published. Required fields are marked *