Sync highlighting for RegEx in VSCode

syntax-highlighting-for-regex-vscode.md

Syntax highlighting for RegEx in VSCode

VSCode allows us to customize a theme with the setting editor.tokenColorCustomizations. Some theme like Dark Modern VSCode theme or Github Dark Default have already syntax highlighting for RegEx.

Knowing that, we have the possibilities to have a more advanced highlighting closer to regex101, regexr or regextester.

Examples

Below are examples of regex that use the common cases (classes, groups, ranges, ...):

const regex1 = /^((group)4564)*[acls]+.?(?!abc)|123\w$/;

const regex2 = /\d|\p{L}+(?:['-]?\p{L}+)*/;

const regex3 = /^https?:\/\/(?=www\.)?[^-a-zA-Z0-9@:1%.\w\n_\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/;

Before (Dark Modern VSCode theme)

After (Dark Modern VSCode theme)

Settings

In editor.tokenColorCustomizations, add the following properties inside the object of your theme.

Below is an example that extends the Dark Modern VSCode theme for Javascript:

// ...
"editor.tokenColorCustomizations": {
    "[Default Dark Modern]": {
      "textMateRules": [
        {
          "name": "Regex classes",
          "scope": [
            "string.regexp.character-class",
            "constant.other.character-class.set.regexp"
          ],
          "settings": {
            "foreground": "#9CDCFE"
          }
        },
        {
          "name": "Regex classes range",
          "scope": ["constant.other.character-class.range.regexp"],
          "settings": {
            "foreground": "#CE9178"
          }
        },
        {
          "name": "Regexp classes brackets",
          "scope": [
            "punctuation.definition.character-class",
            "punctuation.definition.character-class.regexp"
          ],
          "settings": {
            "foreground": "#FF79C6"
          }
        },
        {
          "name": "Regexp groups",
          "scope": [
            "punctuation.definition.group",
            "punctuation.definition.group.regexp",
            "punctuation.definition.group.regexp",
            "punctuation.definition.group.assertion.regexp"
          ],
          "settings": {
            "foreground": "#29C750"
          }
        },
        {
          "name": "Regex metacharacters",
          "scope": ["constant.other.character-class.regexp"],
          "settings": {
            "foreground": "#FF8C18"
          }
        },
        {
          "name": "Regex escape characters",
          "scope": [
            "constant.character.escape.elixir",
            "constant.character.escape.backslash.regexp"
          ],
          "settings": {
            "foreground": "#C586C0"
          }
        },
        {
          "name": "Regex quantifiers",
          "scope": ["keyword.operator.quantifier.regexp"],
          "settings": {
            "foreground": "#569CD6"
          }
        },
        {
          "name": "Regexp anchors",
          "scope": ["keyword.control.anchor.regexp"],
          "settings": {
            "foreground": "#DCDCAA"
          }
        },
        {
          "name": "Regexp operators",
          "scope": [
            "keyword.operator.or.regexp",
            "keyword.operator.negation.regexp"
          ],
          "settings": {
            "foreground": "#DCDCAA"
          }
        },
      ]
    },
  },
// ...

FAQ (Frequently Asked Questions)

• How can I test / debug colors?
• How do I know which token to use?

How can I test or debug colors?

In VSCode, Ctrl+Shift+P > Developer: Inspect Editor Tokens and Scopes > Inside the editor, click on a token/text.

How do I know which token to use?

You have to check the source code of VSCode or your VSCode extension where you can find patterns and tokens. For example, you can have a look here.

More information

• VSCode Syntax Highlight guide
• Regular Expression in TextMate