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.
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()@:%_\+.~#?&\/=]*)$/;
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"
}
},
]
},
},
// ...In VSCode, Ctrl+Shift+P > Developer: Inspect Editor Tokens and Scopes >
Inside the editor, click on a token/text.
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.