javascript - How to not highlight object keys such as 'do'/'package' as keywords in Sublime?

Question

I'm using Sublime Text 2/3 to code in Typescript and Javascript.

But when the key of an object is also a valid keyword name, it gets highlighted like a keyword even though it is only a key in that case.

Example:

var test = { do: 'hello world' };

Is there a way to not highlight this kind of key as a keyword would?

Answer 1

The syntax highlighting is controlled by the tmLanguage file. In ST3 these are held in .cache files.

So follow these steps.

• Open Tools -> Command Pallet and Using Package Manager install PackageResourceViewer
• In Command Pallet select PackageResourceViewer: Open Resource
• In the presented panel choose JavaScript
• In the presented panel choose JavaScript.tmLanguage

Now you have the language definition file displayed for you.

For your case do a search for do until you find it sitting in the list of keywords named keyword.control.js

    <dict>
        <key>match</key>
        <string>(break|case|catch|continue|default|do|else|finally|for|goto|if|import|package|return|switch|throw|try|while)</string>
        <key>name</key>
        <string>keyword.control.js</string>
    </dict>

Having tagged the string do as a JavaScript Control Keyword that instruction will be respected in the .tmTheme file you have chosen for your colour scheme.

If we use PackageResourceViewer in the same pattern as above to open the Amy.tmTheme.cache file and the search for control I find this instruction:

    <dict>
        <key>name</key>
        <string>Control keyword</string>
        <key>scope</key>
        <string>keyword.control</string>
        <key>settings</key>
        <dict>
            <key>foreground</key>
            <string>#80A0FF</string>
        </dict>
    </dict>

That says that if I chose to use the Amy theme then when a .tmLanguage file identifies a string as a keyword.control (a Control Keyword) the theme should apply the provided syntax highlighting.

So what does all that tell us? If you want the string do to not always be treated as a Control Keyword you need to build a new set of regular expression (regex) tests than the ones currently in JavaScript.tmLanguage. If you can come up with a new regex that applies the rules you would like to have applied then you can add it to the .tmLanguage file and get the syntax highlighting you want.

I would strongly suggest that you start by saving the JavaScript.tmLanguage file into your User folder so you are working on a copy and your changes will not be discarded the next time ST3 upgrades.

Now work on editing the .tmLanguage file until you get the behaviour you want. It seems to me your new regex should look for a trailing : immediately after the keyword and not tag such a string as keyword.control.js. Knock yourself out playing with the ideas. If you have saved a copy into your User folder and it all goes to custard the worst that can happen is you delete your .tmLanguage file and restart ST and you will revert to the default .tmLanguage file in the Package folder. The worst that can happen is you waste a couple of hours. But if you 'crack' the right regex pattern you have your own .tmLanguage file holding your preferred language definition that will be respected in every colour scheme and joy and happiness will abound in your world with an annoyance removed from your daily coding experience. Always a 'good thing (TM)'.

Hope this all makes sense. Yell out if it doesn't and I'll try and do better.