Re-rewrite babel-sublime

[zertosh]

This issue tracks all of the TODOS, issues and progress of rewriting the grammar.

---

The tmLanguage format has a lot of limitations (e.g. a single regex can't match across lines, no backtracking, etc) - a "perfect" grammar for flow-typed JS is impossible. "Perfect" means (1) every token has a correct hierarchy of scopes (or none as appropriate) and (2) non-standard formatting doesn't interfere (e.g. comments in weird places class /*cmt*/ Bar {}) – all the while not doing too many expensive regex look-arounds.

Some things can't be supported at all, like scoping arrow functions params when the opening ( is not on the same line as the =>. Others can be supported if you forgo certain scope hierarchy correctness. I'm willing to make this trade-off since the benefit is usually better theme syntax highlighting at the expense of correct (aka expected) "expand selection to scope". Another trade-off is the extent to which something is included in Symbols (for "Goto definition" and "Goto Symbols"). These are some examples of what should be included: (1) any class or class method, (2) named functions, (3) short-methods on objects. Others like object keys that have functions will not be included. I'll do my best to document these behaviors.

Goals

• The grammar should be in tmLanguage format (not sublime-syntax) so it can be reused in Atom and VSCode.
  • In future, add support for sublime-syntax to Atom (Additional support for sublime-syntax grammar atom/first-mate#50).
• This package should only be the grammar - so no transpiling support, snippets or additional themes.
• Support flow, jsx, and anything else that's parsable by babel.

TODO

• Remove cruft from repo. (114724b...8168983)
• Create tests for the current grammar. (14d9f43)
• Sync scope names with https://github.com/sublimehq/Packages/blob/master/JavaScript/JavaScript.sublime-syntax.
  • Document notable exceptions.
• Screenshots, README for users and contributors.
• Wiki explaining the difference between the grammar and the theme. (Will save time with issues).
• Fix indentation JSX Indentation is not useful #261.
• New grammar.

[max-mykhailenko]

@zertosh Waiting for any progress in this. Do you plan to continue developing or I should switch to atom for regular updates?

[mykyta-shulipa]

Maybe, #301 also should be added to list?

[AriaMinaei]

I imported VSCode's tmLanguage files and they work perfectly now.

Download the syntax from here and convert them from JSON to PList using PackageDev.

[faiwer]

@AriaMinaei, how did you connect it to ST3? I converted that JSON into Plist, also downloaded tmLanguage file. I put them into ~/.config/sublime-text-3/Packages/jscode. I saw in st3-console generating syntax summary without errors. But in menu I saw only 1 new item: Set syntax: Regular Expressions Javascript.

[caesarsol]

@faiwer It's working for me, did you rename the file extension from .tmLanguage.plist to .tmLanguage? If you don't, Sublime won't recognize it.

[faiwer]

@caesarsol, thank you! All right, now.
I did it wrong way before. I've copied .tmLanguage from vscode repository, converted json-file to plist, and put both files in one directory in packages.

[zertosh]

@caesarsol @faiwer, the issues you're going to run into by using an unmodified TS grammar are (1) Jump to definition and symbols are going to be very incomplete because Sublime depends entirely on the grammar scopes to determine this - VSCode doesn't, so their grammar isn't built for that, (2) some JS-only constructs like labels do not always work correctly

[AriaMinaei]

@zertosh Actually I'm using the JS grammar from VSCode. I'd have to say that it's not absolutely 'perfect', but it works in more cases than babel-sublime last time that I checked. I'd still love to switch back to babel-sublime once the issues are fixed, of course.

[faiwer]

Unfortunately VSCode grammar-syntax has a lot of problems too :( I'm starting to think about using WebStorm.
@zertosh Do you plan to continue developing the plugin?

[franciscolourenco]

Have you considered forking javascript-ultimate and adding JSX?

javascript-ultimate follows the ES6 spec exactly, has pretty advanced regular expression comprehension, and claims to be the only javascript syntax which highlights invalid code as you type.

Are there any other features that babel-sublime providers over javascript-ultimate besides JSX support?

[max-mykhailenko]

Also we can add jsx support to native sublime javascript syntax and forget about babel syntax sublimehq/Packages#860

[andreidmt]

@AriaMinaei, got vscode syntax and converted it with PackageDev and works (wanted it for Flow syntax), but the SublimeLinter errors stop showing, I see the errors in the console but they're not highlighted.
Any pointers?

[AriaMinaei]

@andreidcm The "syntax_map" config for SublimeLinter should fix that.

[andreidmt]

@AriaMinaei, Thx, the lint errors that I see in the console are from ESLint Formatter not SublimeLinter.
Already set syntax_map in SublimeLinter settings:

"syntax_map": {
    ...
    "JavaScript (VSCode)": "javascript",
    ...
}

Double checked the name inside JavaScript (VSCode).tmLanguage but still no go.

[andreidmt]

@AriaMinaei, Pff, just read the SublimeLinter Docs.

The syntax names in the map should be lowercase

Changed to "javascript (vscode)": "javascript" and all's well.

Thx :)

Finaly, Flow syntax support

[rattrayalex-stripe]

@zertosh What's the status? Do you need help with this?

[Diokuz]

Any chance to have simple flow support in near future?

[max-mykhailenko]

@Diokuz Add a semicolon after type definition

type Abc  = {|
  name: string,
|};

[reimertz]

@max-mykhailenko That works but it breaks if you run flow together with prettier and run semi: false.

Edit: I turned on semi and cringe everytime I look at my code now. 😢

[kylebebak]

@zertosh

It might be time to tell folks this project is no longer actively developed. If there were any progress being made it seems like this issue would be the one to follow, and no one has even commented in the past 9 months.

[max-mykhailenko]

I'm happy user of https://github.com/borela/naomi now

[kylebebak]

Interesting, I'll check it out. I'm currently trying https://github.com/Thom1729/Sublime-JS-Custom.

[Thom1729]

I'm closing this issue in favor of #379.