Issues with JavaScript Highlighting

Hi, a couple months ago my JavaScript syntax highlighting randomly changed. I assumed it happened due to some update with Atom. I really dislike the changes, and they have also broken a number of things.

Here are a few examples of what changed:

  • The this keyword is no longer recognized as a keyword. Now it is parsed as plain text with no highlighting.
  • The super keyword is also ignored
  • The Symbol constructor is now treated as a function, not a constructor. For example in const s = Symbol(); the Symbol will be highlighted blue for a function call, not yellow for a constructor.
  • The new nullish coalescing operator and the nullish assignment operator frequently break the grammar. For example with function Example(){ return this.fn ??= function(){}; } the function named Example gets highlighted as a class, not as a function. There are many other weird interactions with the nullish coalescing operator. I believe they happen because it is being mistaken for a ternary operator.

I suspect that these changes are actually bugs and the JS grammar wasn’t suppose to change. But regardless of whether they were intentional or not, does anyone have any suggestions for how I can get things back to how they used to be? I have tried:

  • Disabling all community packages I have installed
  • Disabling and re-enabling the language-javascript package
  • Making sure my Atom installation is up to date (currently it is 1.57.0)
  • Completely uninstalling and reinstalling Atom, including deleting all the files that remain after uninstallation (all the ones I am aware of)
  • Installing an old version of Atom (1.32.2) from a couple years ago (I have since returned to 1.57.0)

There’s probably something obvious, but I can’t think of anything else to try. Any suggestions or help is greatly appreciated. Thanks!

IMHO, language-babel is the go-to packagef for JavaScript syntax highlighting.

Hi, a couple months ago my JavaScript syntax highlighting randomly changed

Have you enabled the tree sitter parser or are you still using the ancient predecessor?

1 Like

Aha! Thanks for your input! That turned out to be the key, just in a slightly different way. I found that setting and turned it off and it went back to parsing JS correctly.

I think what happened is that with a recent update the tree sitter parser was changed from default off to default on, which caused the problems.

I did have a vague feeling that Atom had been performing better recently, and this is probably why. For now I will leave the new parser turned off, but I would still like to figure out what is going wrong so that I can actually use it and get the performance benefits.

With the tree sitter parser off, when I open the dev tools I can see that this gets parsed as <span class="syntax--variable syntax--language syntax--js">this</span>. If I turn it back on, this gets parsed as " this". In other words, it isn’t parsing it at all.

Also I will check out that language-babel package and see how I like it. Perhaps it won’t have these issues with the new parser turned on.