Tree-sitter missing variable.language scope

[chbk]

Description

this, super, arguments and default used to be variable.language.js. There is no corresponding scope with tree-sitter.

Steps to Reproduce

1. Enable Settings > Core > Use Tree Sitter Parsers
2. Copy-paste:

arguments
this
super
import default

Expected behavior:

arguments, this, super and default should be variable.language.js.

Actual behavior:

arguments, this, super and default are source.js.

Versions

Atom : 1.32.1
Electron: 2.0.9
Chrome : 61.0.3163.100
Node : 8.9.3

[lee-dohm]

@maxbrunsfeld can you give some more information here?

[maxbrunsfeld]

Ok, #620 added back the scope for arguments and super. The default keyword is intentionally highlighted as keyword.control.

I'll leave this issue open because of the this variable. We're intentionally not highlighting this as language.variable because it causes this to be highlighted the same as object properties in most themes, and that was something we wanted to fix when updating from TextMate to Tree-sitter.

We have a PR open to figure out a different color for these kinds of special variables. When we finish that, we'll circle back here and update this to use that class.

[caleb531]

@chbk You might be pleased to know: I developed a hackish solution to inject highlighting for this and super into the built-in language-javascript grammar. This absolves you of any need to fork the language-javascript package, compile tree-sitter grammars, or rebuild Atom. Just place the following code in your init.coffee:

# Extend the JavaScript tree-sitter grammar with additional highlighting
extendJavaScriptTSGrammar = ->
  # All Atom grammars are loaded asynchronously, so use setImmediate() to
  # ensure that the JS grammar is only modified when it has fully loaded
  setImmediate ->
    jsGrammar = atom.grammars.treeSitterGrammarsById['source.js']
    if jsGrammar
      # Colorize `this`, `super`, and `arguments` in red (like other language keywords)
      jsGrammar.scopeMap.addSelector('this', 'variable.language.js')
      jsGrammar.scopeMap.addSelector('super', 'variable.language.js')
      jsGrammar.scopeMap.addSelector('super', 'variable.language.js')
      jsGrammar.scopeMap.addSelector('identifier', {
        match: /^arguments$/,
        scopes: 'variable.language.js'
      });
extendJavaScriptTSGrammar()