Highlighting JavaScript's dictionary keys in Sublime text

Question

is it possible to get a specific syntax highlight of the keys of the associative arrays written in JavaScript with Sublime text?

The following screenshot will illustrate the problem (using Cobalt theme):

As you can see, the syntax highlighting of that piece of code is very poor. I would like to get a dedicated color of the object's keys. Is this possible?

Syntax highlighting of setting the fields of an object by dot notation is also unsatisfactory:

Even in that case the syntax highlighting is dramatically plain: the object, the member field and the rvalue all have the same color.

I tried to edit the XML of the theme, but could not find if the keys are actually identified. What about some regex-based syntax highlight? Is this available?

Answer 1

Check out the JavaScriptNext - ES6 Syntax language definition, available through Package Control. It has many more scopes than the JavaScript syntax that ships with Sublime, allowing for much finer-grained control of syntax highlighting. Below is your code snippet with JSN applied (the color scheme is Neon):

In the query array, the full scope for the key is constant.other.object.key.js string.unquoted.label.js, while the scope for the value is variable.other.readwrite.js (both are obviously source.js as well). As for the exports lines, exports is support.keyword.node.js, the .add and .get properties are meta.property.js variable.other.property.js, and the values are again variable.other.readwrite.js.

If you're going to be doing any color scheme customization, there are two tools I highly recommend. The first is ScopeAlways, which can be toggled to always show the current scope under the cursor in the status bar. The other is facelessuser's ColorSchemeEditor, which provides a GUI for editing .tmTheme files. You should be able to install it (the binary will be downloaded automatically) by going to your Packages folder on the command line (the folder opened by selecting Preferences -> Browse Packages...) and running the following:

git clone https://github.com/facelessuser/ColorSchemeEditor.git ColorSchemeEditor

Restart Sublime, and at some point it will prompt you to download the binary for your platform. If you want to build it from source, or if the other way doesn't work, I've written up a guide here.

Good luck!