babel-sublime: Bad flow highlighting

I was looking through react-native’s source, and I found that ReactNativeMount.js was not being highlighted properly, and that in fact it was breaking highlighting for any code that follows.

Here’s a reduced example:

var object =  {
  getNode: function<T>(id: T): T {
    return id
  }
}
module.exports = object

Here’s what ReactNativeMount.js looks like when I open it:

image of incorrect syntax highlighting

Version information:

EDIT: I apologize in advance for the terrible issue title, I’m not sure how to refer to these type annotations.

About this issue

Original URL
State: closed
Created 9 years ago
Reactions: 7
Comments: 37 (12 by maintainers)

Most upvoted comments

@zertosh thanks a lot 😃 looking forward to see full flow support!

+11

dozoisch on Jul 12, 2016

I was having some trouble with the syntax so I wrote one that combines ES2015, FlowType and React’s JSX, it’s broken into multiple files so it should be easier to debug too. The package is available in here or here. The color choice might not be best (it looks like fruit salad but I am used to it already…) so any help creating color schemes is highly appreciated.

candyman-1

borela on Oct 5, 2016

@borela your FJSX15 syntax highlighting worked really well for me! Thanks!

doeg on Oct 13, 2016

I’d also be happy to see full flow support.

mephju on Aug 3, 2016

I’m killing flow-2. Its got too many bugs. I apologize for my recent absenteeism. I’ll be getting the syntax up-to-part very soon. https://github.com/babel/babel-sublime/issues/263#issuecomment-216743819

zertosh on May 9, 2016

Oh, I see. Would it be feasible to check for @flow in a comment block and use that to decide when to apply flow syntax highlighting to these keywords? I just spent a few hours playing around with the syntax definitions but I wasn’t able to figure out how to make that work unfortunately.

cesarandreu on Aug 27, 2015

Another issue I’ve found is inconsistent object property type highlighting when using optional properties.

Code snippet:

type Foo = {
  fooId: string;
  barId?: string;
  bazId?: ?string;
}
export function FooBar (foo: Foo): Foo {
  return foo
}

Screenshot:

cesarandreu on Aug 27, 2015