Sublime Text 3, JavaScript, change color of word after keyword var

[t-gottschalk]

Hey y’all noob coder just starting a bootcamp. I’m working with JS files in Sublime Text 3 and all I want to do is change or highlight the color of the word/variable after the keyword “var” for current and future files. I would prefer a permanent or user mod of the json file but I’m not sure the location of the hex color (although I do assume the color to change is #F8F8F0) or specific location for JavaScript. I’m using the default Monokai.tmTheme and am Ok with everything else about it. Any help would be appreciated! Thank you!!

Cheers,
Tony

[ThomSmith]

There are two ‘moving parts’ involved. First, there’s the syntax definition, which tells Sublime how to mark each part of a JavaScript file with a label called a “scope”. Then, there’s the color scheme, which tells Sublime how to color things based on their scope.

It sounds like you want to highlight the name of a variable in a variable declaration: e.g. foo in var foo = 42;. The JavaScript syntax definition currently marks foo with the same scope as it would a variable in any other context, such as using foo in an expression. This means that it isn’t currently possible to highlight it specially in a variable declaration. However, it would be possible to modify the syntax definition in a way that would make it possible, and by coincidence we’ve been discussing just such a change. My best guess is that it would go into effect two dev builds from now.

Once that is done, it may be that declared variable names are highlighted differently by default, or it may be that you’d need to add a line to your color scheme to do it. Which one depends on how we think that users would react to the change. Your request here certainly constitutes valuable input in that regard.

[t-gottschalk]

Hello @ThomSmith. Thank you so much for your response as it is greatly appreciated. To recap, yes what I would like to see in Sublime Text 3 moving forward is for declared variables to simply be highlighted. My two cents would be for this change to be global in scope. I think this makes sense right? Especially when you’re declaring global variables that may be many lines away from private variables inside functions and objects. It’s just nice to see a highlighted declared variable verses thinking it’s declared but heck you may have just fat-fingered it! So basically I’m asking for Sublime Text to make me aware if what I’m typing is a declared variable or not. Thanks again. Tony.

[FichteFoll]

Sublime Text’s syntax definition only have limited context awareness that needs to be factored into how the definition is structured and can get complex really quickly. Furthermore, it cannot preserve state of arbitrary text it parsed, i.e. it cannot know whether a variable has been defined in the global or local scope (or at all).

You might want to look into running a linter on your code, which is context-aware and highlights usages of undeclared variables, for example. Common ones for JavaScript are jshint and jslint. You can integrate these into Sublime Text via either:

• SublimeLinter and a plugin for it tailored for the specific linter you want to run, e.g. SublimeLinter-jshint
• A self-contained package that interfaces with the external binary directly, e.g. one of these
• The LSP package, which implements the Language Server Protocol as it used to communicate with a language-specific language server, such as this one for JavaScript (index)