VS Code - highlight some variables with TextMate

Question

VS Code 1.15 added support for TextMate grammar rules. I want to highlight some variables in JavaScript with these rules: self, me. How can I do this?

Maybe soon you will be gain full control about how you highlight anything: This is WIP: https://github.com/microsoft/vscode/wiki/Semantic-Highlighting-Overview — rryter, Mar 06 '20 at 08:38

score 13 · Accepted Answer · answered Aug 11 '17 at 09:26

13

Short answer: you can't.

I'm assuming you're referring to the new editor.tokenColorCustomizations setting. This setting only allows you to change the colors associated with specific scopes that the TextMate grammar already defines. self and me are not treated specially by the JS gramar, they use the same variable.other.readwrite.js scope as any other variable:

Contrast this with the this keyword: It has its own unique variable.language.this.js scope, so we could use the setting to color this red:

"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": "variable.language.this.js",
            "settings": {
                "foreground": "#FF0000"
            }
        }
    ]
}

answered Aug 11 '17 at 09:26

Gama11

31,714
9
78
100

So, I did read docs right. I don't need highlighting this keyword, only specific variables. Thank you! – spyke Aug 11 '17 at 09:52
Yes, the `this` customization was just a counter-example to show what you _can_ do with `tokenColorCustomizations`. – Gama11 Aug 11 '17 at 09:59
4

@Gama11 -- How did you get that popup showing language, token type, etc.? – stacktracer Apr 30 '18 at 17:18
1

Ctrl+Shift+P; Developer: Inspect Editor Tokens and Scopes – Saiansh Singh Sep 26 '21 at 20:33
1

But is there a way to add new tokens to an existing syntax highlight scheme? – tolache Aug 04 '22 at 09:45

score 4 · Answer 2 · answered Aug 11 '17 at 20:52

As @Gama11 said, you can't do it with the editor.tokenColorCustomizations but you could do it with the extension TODO Highlight. It is not the intended use but it would easily work for what you want. The only problem being that 'self' and 'me' would be highlighted if they appeared within any text as well with a default implementation, but that could be fixed using a regexp with word boundaries. Here is a sample implementation:

"todohighlight.keywords": [
    "DEBUG:",
    "REVIEW:",
    {
        "text": "NOTE:",
        "color": "#ff0000",
        "backgroundColor": "yellow",
        "overviewRulerColor": "grey"
    },
    {
        "text": "HACK:",
        "color": "#000",
        "isWholeLine": false
    },
    {
        "text": "TODO:",
        "color": "red",
        "borderRadius":"0px",
        "backgroundColor": "rgba(0,0,0,.2)"
    }
],

You could just replace with your 'self' and 'me'. I use an interesting pattern:

  //  highlight `TODO:`,`FIXME:` and 'HACK:' and content between parentheses

  // "todohighlight.keywordsPattern": "((\\s\\sTODO\\s*:\\s{0,5})|(\\s\\sFIXME\\s*:\\s{0,5})|(\\s\\sHACK\\s*:\\s{0,5}))(\\(.*\\)\\s)*",

It highlights TODO:, FIXME: and HACK: if they are preceded by some spaces as well as any content that follows that is in parens.

But I don't see why this extension couldn't be used to highlight any particular text you want but you'll probably want to include a space before and maybe after 'me' and 'self' in case they may also appear embedded within other text such as 'varmetoo'.

Thank you for your answer. I aware of this extension and was interested if this can be done with TextMate in the new VSCode. — spyke, Aug 12 '17 at 11:52

VS Code - highlight some variables with TextMate

2 Answers2

Linked