CODEWITHSUNDEEP
sublimetext3syntax-highlighting
Throttlehead
Throttlehead

Reputation: 1945

Sublime Text 3 strange javascript highlighting issue after update

So this is really throwing me off after updating and installing a few things in Sublime Text 3 this morning. Couldn't figure out the right Google keywords for the issue either. Basically the highlighting is now treating object keys that are not encapsulated in quotes as if they're strings anyways. I'm not sure if this is something I did or something that changed? Is there a quick way I can fix this in the JavaScript.sublime-package? Also, I've tried installing some of the ES6 packages and it doesn't fix this either.

enter image description here

Upvotes: 2

Views: 700

Answers (1)

MattDMo
MattDMo

Reputation: 102892

There have been a number of changes to the language definitions that ship with Sublime, as they are now officially open-sourced and hosted on Github. In particular, the JavaScript syntax (which was badly in need of maintenance) has been supplemented with a number of changes from the JavaScriptNext ES6 project, as well as other individual contributions, and is actually changing quite quickly.

What this means is that many of the scopes on the old JavaScript syntax have changed, so a program or keyword that looked one way before might look different now with the same color scheme. BTW, here's a quick explanation of how syntax highlighting works in Sublime: the .sublime-syntax or .tmLanguage syntax definition files contain a series of regular expressions defining scopes in the view. So, for JavaScript, everything starts out being source.js, the keyword var is storage.type.js, this is variable.language.this.js, etc. Now, the color scheme (.tmTheme file) contains a list of scope selectors (somewhat similar to CSS selectors, but simpler) and assigns color and text effects to any scope that matches.

Monokai, the default color scheme for Sublime, and the one you appear to be using, is a very simple theme. It has very broad scope selectors, and only uses about seven colors. Because of this, many different types of syntax can be colored the same, and some of the changes to JavaScript have affected how your code is displayed using this color scheme.

On the other hand, when using a much more complex color scheme like Neon (full disclosure: I'm its maintainer), your code looks like this using Build 3103:

JavaScript 3103 with Neon

I designed Neon to differentiate between as many different scopes as possible, and it currently has in the neighborhood of ~260 scopes and color definitions, one of the highest in Aziz's excellent TmTheme Editor. It is a great tool for browsing through different color schemes and seeing what you might like. Unfortunately, due to the differences between Sublime's syntax highlighting regex engine and the one in TmTheme Editor, the code previews on the website don't always look exactly they would in Sublime, but you can get a general idea.

Interestingly, two more dev builds have been released in the last two days, and JavaScript has changed even more! With 3105, the code now looks like so:

JavaScript 3105 with Neon

The scope for object keys has changed to something that's not currently in Neon, so they now display white.

So, as far as your problem is concerned, I'd definitely browse around for a more complex color scheme so you can differentiate between various language constructs. There is a way to go back to the old syntax definition from Build 3083, but it's pretty complex, and I wouldn't recommend it, mainly because JavaScript is currently going through some pretty rapid changes with more widespread adoption of ES6, and some parts of ES7 already being supported in some browsers, so as you modernize your code it makes sense to use a modernized syntax highlighting system.

Upvotes: 2

Related Questions