Highlighting breaks if no semicolon after type expressions

[StreetStrider]

When using something from Flow syntax, highlighting may break if no semicolons used.
For sample, put something like:

export type A = string
type B = number

The second one would not be properly highlighted if the first one losses semicolon at the end. However, the syntax is correct.

My linting rules encourages to evade semicolons where possible, so I can't use semicolon at the end of the line.

import type statements works good.
This would be highlighted properly:

import type { A } from './A'

[bdefore]

I've also encountered this. Interesting that the type declaration would have any impact on semicolons.

[bdefore]

See also #298

[mareksuscak]

Not sure if it's related but same for static class properties:

class Component extends React.Component {
  static propTypes = {
    config: PropTypes.object
  }

  static defaultProps = {
    config: {}
  }
}

[StreetStrider]

@mareksuscak seemes related

[JemarJones]

Same issues as @mareksuscak

[miyabi]

Same as @mareksuscak.
It is fixed by inserting semicolon after closing brace, but it is unwanted.

[Xazzzi]

You are welcome to test if it works for you.

[michaelcarter]

@Xazzzi I've googled around but am struggling, how can I install this fixed version in Sublime 3?

[mareksuscak]

@michaelcarter It hasn't been released yet. So you have to go the ~/Library/Application Support/Sublime Text 3/Packages/Babel and edit the file JavaScript (Babel).sublime-syntax accordingly:

[michaelcarter]

@mareksuscak This is all I have in ~/Library/Application Support/Sublime Text 3/Packages/:

[Xazzzi]

Unfortunately i don't own any apple pc, so i can't really tell how to fix it on Mac.
What i suggest though is to try modifying JavaScript (Babel).tmLanguage in a similar way.

[JemarJones]

@Xazzzi It does not work for me. Instead the issue happens for all declarations in the class (after the constructor) instead of just the one.

[mareksuscak]

@michaelcarter that's odd, here's mine:

How did you install babel package? Via Package Control, right? I use Babel package v8.6.3. Make sure you use the latest version.

[michaelcarter]

@mareksuscak @Xazzzi Ok, I've got the file there now but editing it does nothing to improve my syntax highlighting. I'm left with code like this:

Drop in a ; at the end of the type declaration and I get this (much better!):

Thanks for all your help so far.

[mareksuscak]

@michaelcarter Have you got it working yet? I did not have much time to dig in. I'm currently not very familiar with this project and there doesn't seem to be a whole lot of documentation (i.e. what's the preferred way to convert *.tmLanguage to *.sublime-syntax).

One thing I can say for sure is that it doesn't work for you because @Xazzzi's solution only fixes missing semicolon for class properties. Your code is breaking on flowtype-declaration so a similar patch is necessary for those.

[michaelcarter]

@mareksuscak No. I'm afraid not. I've tried modifying the flowtype-declaration section of my sublime-syntax document but have had no success in getting something working (I have no idea what I'm doing, so that's unsurprising).

I don't usually work with flow, so I'll probably just hop over to Atom for this project so I have something that works and then check back periodically on whether this is working in newer versions.

Thanks for all your help! 🙏

[sankarravi]

I got this working using @Xazzzi's rough change in the flowtype-declaration section. Notably, I had to the change the sublime-syntax file, not the tmLanguage file:
~/Library/Application Support/Sublime Text 3/Packages/Babel/JavaScript (Babel).sublime-syntax

My final flowtype-declaration looks like:

flowtype-declaration:
  - match: (?<!\.)\b(declare)\b
    scope: support.type.declare.flowtype.js

  - match: (?<!\.)\b(type)\b(?=\s*[_$a-zA-Z])
    scope: support.type.type.flowtype.js
    push:
      - meta_scope: meta.type.flowtype.js
      - match: (?=\s*(;|from))
        pop: true
      - include: flowtype-tokens
      - match: $
        pop: true

  - match: (?<!\.)\b(type)\b(?=\s*{)
    scope: support.type.type.flowtype.js
    push:
      - meta_scope: meta.type.flowtype.js
      - match: (?<=})
        pop: true
      - include: flowtype-brackets
      - include: flowtype-polymorph
      - match: ([_$a-zA-Z][$\w]*)
        scope: entity.name.type.js
      - match: $
        pop: true

starting at L207

Screenshot:

[Mottoweb]

Thanks @Xazzzi @sankarravi, this has to be a PR.
I almost switched to atom, but then found this.

[amsul]

@Xazzzi @sankarravi you two are legends! Saved me the effort of switching to vscode 😅

[StreetStrider]

Can someone help on converting to tmLanguage? I'd found analogous definition in tmLanguage file and I'm trying to port changes.
Looks like the key is:

- match: $
    pop: true

However, I can't find analogue in tmLanguage. Maybe it's encoded in some combination of beginCaptures/begin indirectly?
I haven't got any experience in theese DSLs, so I would glad to get any help.

[breadadams]

NICE @sankarravi @Xazzzi 👏

Any word on getting this merged into a release?

[Xazzzi]

I wonder if it could be merged. I dont have any experience in language defs DSL's either and found this fix by trying different things (and failing a lot).
This repo seems pretty much abandoned, as last update was 9 month ago.
We can ask @zertosh maybe ?

[StreetStrider]

It would be awesome if someone ports this change to tmLanguage as well. I use babel-sublime tmLanguage with my own fixes in conjunction with my own theme. I tried to do port myself, but have not enough experience with theese themes, failed to do it in simple manner. It's much to ask, but it would be cool to see this happen.

[borela]

For sublime, try https://github.com/borela/naomi

[emwalker]

Curious what the status of this is. In an earlier PR by @Xazzzi, the fix was placed in the tmLanguage file, and that seems to have caused problems. In @sankarravi's comment above, by contrast, the fix was placed in the sublime-syntax file, and this worked for me and at least one other person without causing any obvious issues.

This bug makes it hard to want to use flow if your repo doesn't use semicolons, and the fix seems to be an easy one. @zertosh, are there further considerations we should be aware of, or would you be open to a PR?

[webbuyrich]

After installing Babel in sublime packages I followed the readme instructions in the package control webpage
https://packagecontrol.io/packages/Babel

Setting as the default syntax
To set it as the default syntax for a particular extension:

1. Open a file with that extension
2. Select View from the menu
3. Then Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel).
4. Repeat this for each extension (e.g.: .js and .jsx)

[mcissel]

To get the static keyword highlighting again, I modified the JavaScript (Babel).sublime-syntax (like in
@sankarravi's comment). But instead I only added this at the top of the flowtype-declaration (line 207)

- match: (?<!\.)\b(static)\b
  scope: storage.modifier.js

Oddly, it didn't work if I put that down by the other scope.storage.modifier tagger

[emwalker]

Does anyone know of a fork of this repo that is up to date and being maintained?

[Thom1729]

JS Custom provides JSX highlighting and more. It's based directly on the core JavaScript syntax, so it will never be left behind as the core syntax continues to improve.

[StreetStrider]

@emwalker use Naomi (above in thread).

[Thom1729]

This should be fixed in v10.0.0-beta.1. See #379 for more information on the new release. Please report any problems with v10 in a new issue.