Visual Studio Code: Effective technique for clear dollar sign separation in variable names

Question

I just switched from Atom to Visual Studio Code and I'm looking for a way to visually separate the dollar signs from variable names. Something like this is possible in Atom by editing a personal CSS stylesheet. After applying some CSS rules, this can be achieved:

There is no space character between the dollar sign and the variable name, and the editing cursor jumps from the dollar sign to the identifier.

I tried to find a way to implement similar functionality in Visual Studio Code but failed. I know VSC has development tools like Atom, and I looked into the HTML/CSS it generates, but what I see is that VSC parses the PHP code differently and treats dollars as part of the variable name - unlike Atom, Atom handles the dollar sign as a separate entity, a punctuation mark.

If visual separation by adding space is not possible, I would like to know if it is possible to change the color of the dollar (or dollar in the case of a variable).

Answer 1

It is possible to change the color of a php variable of $ or $$ since they both have textmate scope

punctuation.definition.variable.php

You can check this using Tools Developer: Check Editor Token and Scope from the Command Palette. After activating the tool, select $ or $$ and it will display their ranges.

You can then use this information in the following settings (in settings.json) to change the color or font style of these ranges:

"editor.tokenColorCustomizations": {
 
  "textMateRules": [
    {
      "scope": "punctuation.definition.variable.php",
      "settings": {
        "foreground": "#F3873F",   // whatever hex color you want

        "fontStyle": "italic"      // or bold, underline etc. for example
        // intellisense in the `""` (CTRL+Space) will tell what properities are supported
      }
    }
  ]
}

You cannot change the spacing of these characters this way, and you will have to look for an extension that can do this.