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

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

Posted on by Ekaterina Prigara

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

#JSX #npm #React #typescript
Comments below can no longer be edited.

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

  1. Danyl says:

    September 29, 2015

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

  2. Andrii Dieiev says:

    September 29, 2015

    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)

    • Andrii Dieiev says:

      September 29, 2015

      Forgot to add: Windows 10 Build 10547 (latest in Fast Ring)

    • Jim Moring says:

      October 1, 2015

      I encountered the same problem with this update on Windows 8.1.

  3. DarkPark says:

    September 30, 2015

    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:

    September 30, 2015

    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:

      September 30, 2015

      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:

        September 30, 2015

        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:

          September 30, 2015

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

          • Flow + JSX says:

            September 30, 2015

            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:

            September 30, 2015

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

          • Konstantin Ulitin says:

            October 1, 2015

            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:

          October 1, 2015

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

  5. Kasper says:

    September 30, 2015

    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:

    September 30, 2015

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

  7. Strajk says:

    September 30, 2015

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

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

    • Strajk says:

      September 30, 2015

      Comments formatting broke code example, trying again

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

      • Strajk says:

        September 30, 2015

        I give up, here’s the screenshot http://take.ms/eaDdL

        • Ekaterina Prigara says:

          September 30, 2015

          Thanks for letting us know. We’ve already reported the issue today and hope to fix that asap: https://youtrack.jetbrains.com/issue/WEB-18330

          • Strajk says:

            October 2, 2015

            Thanks Ekaterina, have a nice day!

          • Strajk says:

            October 5, 2015

            Fixed with today patch, thanks so much!!

  8. Aaron Trent says:

    October 1, 2015

    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.

    • Ekaterina Prigara says:

      October 1, 2015

      WebStorm supports async/await and some other ES7 experimental features (see a list of issues on our tracker). There’s been an issue of formatting decorators that is already fixed: https://youtrack.jetbrains.com/issue/WEB-17895
      Can you please report what’s broken on our tracker. Thank would be really helpful.

  9. Torsten Rüter says:

    October 1, 2015

    Thank you for bringing flow to the community!

  10. David Brockman Smoliansky says:

    October 1, 2015

    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. Andrew Koroluk says:

    October 1, 2015

    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!

    • Ekaterina Prigara says:

      October 2, 2015

      Great to hear that. The feedback would be very much appreciated on our tracker (https://youtrack.jetbrains.com/issues/WEB), the support is rather raw now and we are willing to improve that.

  12. Alex says:

    October 3, 2015

    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?

    • Ekaterina Prigara says:

      October 5, 2015

      That’s a known issue, the fix will be available in a new EAP build that we are going to publish today.

  13. Umed says:

    October 11, 2015

    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

    • Ekaterina Prigara says:

      October 13, 2015

      There’s a related issue in our platform: https://youtrack.jetbrains.com/issue/IDEA-143163
      You can vote for that issue and leave a comment there, hope my colleagues would be able to address that in the nearest future.

  14. Hristo says:

    October 31, 2015

    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.

    • Ekaterina Prigara says:

      November 2, 2015

      Thank you for your feedback.
      As it was mentioned in the blog post, WebStorm doesn’t provide integration with the Flow linter itself, so the type checking now is based on our basic knowledge of types, WebStorm doesn’t provide now the type checking for any Flow-specific and custom types. You can follow these to issues for updates on the integration: https://youtrack.jetbrains.com/issue/WEB-14254 and https://youtrack.jetbrains.com/issue/WEB-16607

  15. lucas says:

    January 14, 2016

    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:

    January 14, 2016

    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:

    February 18, 2016

    Does the flow support work on Windows?

Latest Tweets

Related posts

WebStorm 2020.2 EAP #5: Problems View, In-editor JSDoc Comment Rendering, Better @use and @forward Support

WebStorm 2020.2 EAP build #5 is now available! If you’re unfamiliar with our Early Access Program or if you want to catch up on all the new features, check out our previous EAP blog posts. The Toolbox App is the easiest way to get the EAP builds and keep your stable WebStorm version, as well as any EAP versions up to date. Or you can download the EAP builds from our website. You can also choose to be notified right from the IDE when a new EAP build is available: go to Preferences/Settings | Appearance & Behavior | System Settings | Updates and select Automatically check updates for E
Posted on by Ekaterina Ryabukha