CODEWITHSUNDEEP
syntaxvisual-studio-codesyntax-highlightinghighlight
CalamityAdam
CalamityAdam

Reputation: 404

Visual Studio Code - meaning of syntax highlight colors

I'm looking for a reference as to what each color of syntax highlighting in Visual Studio Code actually means. I'm currently using the dark default theme Dark+. I've gotten used to recognizing a few of the highlight colors and I get the gist of what I'm looking at, but I'm looking for a more detailed reference of what each color means. I've searched for a while for this and can not find any reference guide or glossary/index listing the colors and meanings. Not sure if it matters, but I am solely writing in JavaScript. Thank you in advance.

edit: I have included a screenshot of the type of syntax highlighting I am referring to.

syntax highlighting

Upvotes: 11

Views: 19165

Answers (2)

Convexity
Convexity

Reputation: 115

The following roughly applies to Python, at least.

Orange = string
yellow = function/method
brownish green = comment
very light green = number, "+-*/=><"
bright green = class, module
white = modules unknown to VS code? Functions from modules (e.g., the ".sort" in "np.sort")
light blue = variable
dark blue = "class", "def", "False", "not", "None", "in", ... (= "other reserved words"?)
purple = command (while, for, if, try, except, return, ...)

I have some variables in white, for no obvious reason. Please, improve this answer.

Upvotes: 1

Scott McPeak
Scott McPeak

Reputation: 12739

The meaning of the syntax highlight colors comes in two parts:

  1. How are the characters in the file organized into meaningful tokens?
  2. How are those tokens assigned a particular color and font style?

Partitioning text to tokens

The first part is determined by a grammar description built in to VSCode. VSCode uses a system based on TextMate grammars. The grammars are defined in the VSCode sources (e.g., JavaScript.tmLanguage.json), but in that form have gone through a couple stages of postprocessing, making them nearly unreadable. There is no documentation of the intent of these grammar files. They tend to at least roughly follow the relevant language specification, but with plenty of ad-hoc deviations.

The most practical way to understand what tokens are defined is to use the "Developer: Inspect TM Scopes" tool available in the Command Palette (Ctrl+Shift+P). When you put your cursor on a token, it will show you the "scope labels" that describe that token. These labels are more or less human-readable.

Edit 2020-07-24: As of VSCode 1.47 (and possibly a little earlier) the command is called "Developer: Inspect Editor Tokens and Scopes".

Example:

Screenshot of the TM Scope Inspector

Above, we can see that the return keyword is most specifically classified as keyword.control.flow.js. It is within a brace-enclosed code block (meta.block.js), within a function definition (meta.function.js), within Javascript source code (source.js).

That sequence of scope labels is the closest thing there is to a "meaning" for a token in VSCode.

Assigning colors to tokens

Next, there is the process of mapping that sequence of scope labels to a color and font style. That is done by the theme. In my case I am using Visual Studio Light, defined in the VSCode sources in light_vs.json. In the case of the return keyword, this is the applicable fragment:

        {
            "scope": "keyword.control",
            "settings": {
                "foreground": "#0000ff"
            }
        },

This says, basically, that anything with a scope label beginning with "keyword.control" shall have a blue color. But other fragments may override this one; the rules are somewhat complex. Why blue? It's an arbitrary aesthetic choice.

Why do function and NaN have the same color? The grammar assigns them different scope labels (storage.type.function.js versus constant.language.nan.js), but it just happens that the theme you are using (Dark+) assigns them the same color (as does mine). I find that an odd choice, but can only speculate about the reason.

Customizing the colors

You didn't ask, but an obvious follow-on question would be how to customize these colors, for example giving function and NaN different colors. See this answer.

Upvotes: 6

Related Questions