How to set syntax highlighting for Dart variable in Visual Studio Code

问题

I am using Visual Studio Code for coding Dart with Flutter. I installed Dart and Flutter plugins as well as the Material theme from Matta Astorino. The problem is I can't specifically set the syntax highlight of my variables with Dart language using the Material Theme Ocean High Contrast color theme.

The settings i used:

  "editor.tokenColorCustomizations": {
    "[Material Theme Ocean High Contrast]": {
    "comments": "#229977",
    "variables": "#ffffff"
    }
  },

-Dart

From the picture above, the comments syntax highlighting seems to work fine but the syntax highlighting for variables is still showing in grey (which supposed to be white).

-JavaScript

In JavaScript, it seems to work fine.

Please help on these Dart syntax highlighting for VSCode Thanks.

回答1:

I don't use Dart, but i can say that, sometimes you have to be more specific with setting syntax scope colors.

First of all - you need to know what the scope is. To do this, please run Inspect TM Scopes.

Here you have described how to do it:

• https://code.visualstudio.com/blogs/2017/02/08/syntax-highlighting-optimizations#_new-textmate-scope-inspector-widget

To understand better, it is good to read:

• https://macromates.com/manual/en/language_grammars 12.4 Naming Conventions
• https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide

Sublime Text have a good explanation too:

• https://www.sublimetext.com/docs/3/scope_naming.html

Ok, and now:

When you find out what the scope is, then you have to create or overwrite it. Example:

    "editor.tokenColorCustomizations": {
        "[My Theme Name]": {
            "textMateRules": [
                {
                    "name": "Entity",
                    "scope": "entity.name",
                    "settings": {
                        "foreground": "#FFC66D"
                    }
                },
            ]
        }
    },

If you will create more and more new scopes, remember that:

• being too specific will result in a color scheme that often only looks good for one or two syntaxes.

来源：https://stackoverflow.com/questions/56132498/how-to-set-syntax-highlighting-for-dart-variable-in-visual-studio-code