List of missing scopes in comparison to language-babel

[atomiks]

Prerequisites

• Put an X between the brackets on this line if you have done all of the following:
  • Reproduced the problem in Safe Mode: http://flight-manual.atom.io/hacking-atom/sections/debugging/#using-safe-mode
  • Followed all applicable steps in the debugging guide: http://flight-manual.atom.io/hacking-atom/sections/debugging/
  • Checked the FAQs on the message board for common solutions: https://discuss.atom.io/c/faq
  • Checked that your issue isn't already filed: https://github.com/issues?utf8=✓&q=is%3Aissue+user%3Aatom
  • Checked that there is not already an Atom package that provides the described functionality: https://atom.io/packages

Description

Comparing the new language-javascript using tree-sitter grammar and language-babel using the old system, I'm noticing many missing features, to the point where I can't use it yet but would like to. I hope that this list will help you improve the current highlighting.

• ✅ Missing function parameters scope. However in language-babel arrow functions whose parameters spread multiple lines don't get highlighted (nor the function name)

• ✅ Object property access obj.property is not differentiated from declaration, i.e. obj = { property: '' } . In language-babel, it seems to use syntax--unquoted for the object property.

• ✅ Missing jsx.component to style components differently from classes

• ✅ Add a spread-syntax scope. I like to enbolden and add a shadow to that specific operator

• ✅ Missing a dom syntax scope, i.e. for window, document, navigator, etc, and a console scope for console

• const func = () => {} - the function name is not scoped as a function.

• The class properties proposal (arrow functions in classes) are not scoped as functions, e.g.

class Example {
  notScopedAsFunction = () => {}
  scopedAsFunction() {}
}

• Missing a method scope if a function was called on an object like this.func() instead of simply func()

• I think the - in negative numbers should be part of the number scope, as in language-babel (doesn't really matter)

• this is missing a scope: (tracked in Tree-sitter missing variable.language scope #618)

• Bracket matcher doesn't match JSX tags, but it does in language-babel (tracked in separate repo)

Versions

1.32.2

[Ben3eeE]

this is missing a scope

This is tracked in #618

Bracket matcher doesn't match JSX tags, but it does in language-babel

This is tracked in atom/bracket-matcher#355

---

Opened a PR for some of the others. Arrow functions and - in negative constant literals I am not sure about.

[atomiks]

I've updated the OP in accordance with the PR merge and separately tracked issues.

The two that need addressing is the arrow function styling for classes and standalone functions. I'll update the issue if I find anything else missing

[savetheclocktower]

The two cases that are not yet addressed are not possible without feature additions to Atom. The arrow function and its name are considered siblings in the parsed tree-sitter hierarchy, and there's no way to isolate (e.g.) "identifier with arrow-function as its next sibling" in a grammar, as @maxbrunsfeld described here. This would also be useful for highlighting foo as a function in the code let obj = { foo: () => {} } and its equivalents.

This is less of a need with modern JS syntactic niceties; hell, I remember when IE would leak memory if you used named function expressions. But arrow functions in class property bodies will remain popular as a way of binding this to the class instance, so I don't think it's something we can avoid altogether.

So the underlying request here is to "extend[] our AST-based highlighting system to support non-local relationships," in @maxbrunsfeld's words. I'd like to create a ticket for this, but I'm not sure which repo it belongs in. Can someone point me in the right direction?