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!