VSCode configure syntax highlighting to match a style guide

Question

How do I change the syntax highlighting in VSCode so that it adheres to a particular style guide? For example, I want to adhere to the Google C++ style guide where member variables are written as some_member_variable_. When I use this convention, VSCode does not color that name differently from standard text. But I have some code that uses the mSomeMemberVariable convention, and that does get colored differently than other text. Is there a way to configure this better?

Climatology

Answer 1

TL;DR >There is no easy way to apply Google style syntax highlighting unless you find an existing cpp Textmate grammar file for it (I could not find one). However the following is how you would implement it yourself.

Looking at the CPP syntax file (cpp.tmLanguage.json), we see that there is no scope pattern capturing the Google-style member variables. You can add one:

{ // this is the existing scope that matches mSomeMemberVariable
    "match": "\\b(f|m)[A-Z]\\w*\\b",
    "name": "variable.other.readwrite.member.cpp"
},
{ // you can add this scope to match some_member_variable_
    "match": "\\b([a-z][a-z\\d]*_)+\\b",
    "name": "variable.other.readwrite.member.google.cpp"
}

Now you can make sure it is styled by making sure its scope (or any of the outer scopes like variable.other.readwrite.member), has a theme rule in your theme's .json file.

---

The following is a more detailed explanation. From here we see:

There are two components to syntax highlighting:

• Breaking text into a list of tokens and scopes using a grammar
• Then using a theme to map these scopes to specific colors and styles

First we need to figure out which "scope" is styling the member variable:

• Command palette > ctrl+shift+p > Developer: Inspect TM Scopes
• Click on the member variable name (mSomeMemberVariable)
• The most specific scope is the top-most entry. As of this posting it is called variable.other.readwrite.member.cpp

The .cpp part of the name tells us that the scope is defined in the C++ grammar (syntax). As of now the file used for the cpp syntax can be found under [applications_folder]/code/resources/app/extensions/cpp/syntaxes/cpp.tmLanguage.json (see the file in the github repo).

Searching for the scope name in the syntax definition file, we find the following pattern:

{
    "match": "\\b(f|m)[A-Z]\\w*\\b",
    "name": "variable.other.readwrite.member.cpp"
}

And to see what style is applied to the above scope, we look at the active theme's *.json file. For example, if you are using the Dark+ (default dark) theme, you can find the theme json file at extensions/theme-defaults/themes/dark_plus.json. In this file we find the following text mate theme rule:

{
    "name": "Variable and parameter name",
    "scope": [
        "variable",
        "meta.definition.variable.name",
        "support.variable",
        "entity.name.variable"
    ],
    "settings": {
        "foreground": "#9CDCFE"
    }
}

From this rule we see that the highlighting is applied by the variable scope. (note that all outer scope styles are applied to inner ones unless you specifically specify the inner scope style to override it)
Now one option for you would be to add your own scope to the existing file. Another would be to edit the existing scope to also match the Google style member variable regex pattern. Yet another option would be to define your own grammar based on the CPP extension style file and create your very own Google CPP VSCode Extension. For example, taking the first approach you can edit cpp.tmLanguage.json as follows:

{
    "match": "\\b([a-z][a-z\\d]*_)+\\b",
    "name": "variable.other.readwrite.member.google.cpp"
}

P.S. After editing the json files restart VSCode for the changes to take effect.

Pareto