vscode textmaterule to target react className string

Question

Found this awesome post on how to dim semicolons in vscode.

Thinking it could be useful for javascriptreact and typescriptreact files to do the same for the className string when working with class utilities like tailwind.

Anybody knows a way to tackle this?

It would be icing on the top bonus if the rule could be ignored when j/tsx element it focused.

find the TextMateScope of the element you want to change and modify your settings, there are enough posts here on SO to find out — rioV8, Dec 31 '21 at 17:04

Norfeldt · Accepted Answer · 2021-12-31T20:47:20.490

0

Continued to search SO after posting this (as suggested by @rioV8) and found this SO answer to lead me near the goal.

Installed the highlight extension and wrote this:

  "highlight.regexes": {
    "(.*\\sclassName=\")(.*?)\"": [
      {},
      {
        "color": "grey"
      }
    ]
  }

edited Dec 31 '21 at 20:47

answered Dec 31 '21 at 19:19

Norfeldt

8,272
23
96
152

had a couple of conflicting extensions that made it seem like it did not work at first, but it actually works quite well. – Norfeldt Dec 31 '21 at 19:29

score 0 · Answer 2 · answered Dec 31 '21 at 20:13

Alternative (no extension needed) solution would be

  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "string.quoted.double.tsx",
        "settings": {
          "foreground": "#ffffff77"
        }
      }
   ]

The problem is that it targets too wide and not just scoped to string.quoted.double.tsx within the className.