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.
To use Flow, go to Preferences and switch the JavaScript language version to Flow:
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.
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.
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.
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.
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
Danyl says:
September 29, 2015Awesome, finally a type checker in WebStorm 🙂 good job.
Long life to JetBrains.
Andrii Dieiev says:
September 29, 2015Strange 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, 2015Forgot to add: Windows 10 Build 10547 (latest in Fast Ring)
Jim Moring says:
October 1, 2015I encountered the same problem with this update on Windows 8.1.
Ekaterina Prigara says:
October 1, 2015It’s a known issue, unfortunately: https://youtrack.jetbrains.com/issue/IDEA-144421
We’ve submitted a request to Microsoft, but no reply yet.
DarkPark says:
September 30, 20152-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.
Ekaterina Prigara says:
September 30, 2015Sorry for that, known issue and we’re still investigating: https://youtrack.jetbrains.com/issue/IDEA-141725
Now it has a critical status, so hope our colleagues will address it asap.
Flow + JSX says:
September 30, 2015Congrats 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, 2015Actually 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, 2015Hmm 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, 2015Ok – your webform just escaped a load of my code – I’ll email it.
Flow + JSX says:
September 30, 2015Ok 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, 2015Sorry 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, 2015Sorry 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, 2015You can disable inserting quotes after typing ‘=’ in attribute value in Settings | Editor | General | Smart Keys in XML/HTML section.
Kasper says:
September 30, 2015Thanks 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
Ekaterina Prigara says:
September 30, 2015Thank you!
Do you mean HTML in Angular 2 in Dart file or JavaScript file?
Kasper says:
October 1, 2015I meant inline html in a dart file, like this:
http://imgur.com/pLK8mYq
Alexander Doroshko says:
September 30, 2015Dart in HTML support now depends only on the Dart Analysis Server from the Dart SDK. You can watch/comment the issues I filed:
https://github.com/dart-lang/sdk/issues/24408
https://github.com/dart-lang/sdk/issues/24407
https://github.com/dart-lang/sdk/issues/24405
https://github.com/dart-lang/sdk/issues/24404
https://github.com/dart-lang/sdk/issues/24403
https://github.com/dart-lang/sdk/issues/24402
https://github.com/dart-lang/sdk/issues/24401
Kasper says:
October 2, 2015I think these issues are for dart support in .html files. In angular2, you can write inline html in a .dart file. See:
http://imgur.com/pLK8mYq
I would love to see support for this in WS11. Would really help with writing angular2 in dart.
Alexander Doroshko says:
October 2, 2015Got it. This is on Dart Analysis Server side as well. Please file a feature request to integrate Angular 2 plugin for the Dart Analysis server.
Alexander Doroshko says:
October 2, 2015Sorry, looks like I took you wrong again. This seems to be a correct link to the issue, together with the one that you mentioned: https://youtrack.jetbrains.com/issue/WEB-8322
James Parsons says:
September 30, 2015Awesome! I was really about to open a feature request for TSX, but I not. Jetbrains is an exceptional company.
Ekaterina Prigara says:
September 30, 2015Thanks! We already had one: https://youtrack.jetbrains.com/issue/WEB-14441 🙂
Please let us know if you find any issues.
Strajk says:
September 30, 2015Updating 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, 2015Comments formatting broke code example, trying again
“`
.post(\`${a}/a/b\`)
“`
Strajk says:
September 30, 2015I give up, here’s the screenshot http://take.ms/eaDdL
Ekaterina Prigara says:
September 30, 2015Thanks 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, 2015Thanks Ekaterina, have a nice day!
Strajk says:
October 5, 2015Fixed with today patch, thanks so much!!
Aaron Trent says:
October 1, 2015Any 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, 2015WebStorm 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.
Torsten Rüter says:
October 1, 2015Thank you for bringing flow to the community!
David Brockman Smoliansky says:
October 1, 2015Will 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!
Ekaterina Prigara says:
October 1, 2015All there features are available in IJ 15 public preview published today: https://www.jetbrains.com/idea/nextversion/
Sergey says:
October 5, 2015Hi Ekaterina, do you know if zero-latency typing (https://blog.jetbrains.com/idea/2015/08/experimental-zero-latency-typing-in-intellij-idea-15-eap/) is supported in WebStorm as well? Thank you.
Ekaterina Prigara says:
October 5, 2015Yes, it is supported, but please note that it’s an experimental feature. Please let us know that it’s (or any other registry flag) enable, if you report any editor issues on YouTrack. Thanks!
Andrew Koroluk says:
October 1, 2015This 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, 2015Great 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.
Alex says:
October 3, 2015I’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, 2015That’s a known issue, the fix will be available in a new EAP build that we are going to publish today.
Umed says:
October 11, 2015Do 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, 2015There’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.
Hristo says:
October 31, 2015Super 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, 2015Thank 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
lucas says:
January 14, 2016I 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 .
lucas says:
January 14, 2016Sorry 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 .
Ekaterina Prigara says:
January 15, 2016Is that Meteor warning? I’m sorry, but we are not Meteor experts, I think it’s better to ask this question on StackOverflow. May be it’s related to the quote marks you’re using: http://stackoverflow.com/questions/29334893/unexpected-token-illegal-javascript-meteor
Jack Allan says:
February 18, 2016Does the flow support work on Windows?