How can I get regex syntax highlight for `new RegExp` in js in Vscode?

Question

As the following shows,
I want "regex syntax highlight for new RegExp", just as the regex literal.
How can I do that?

/^this\b(.*?)\bis(:{0,1})/g; 

new RegExp(/*regex*/ `^this\b(.*?)\bis(:{0,1})`, 'g'); // << syntax higlight?

Update:

it was so obvious that this is a bad idea, and I didnt notice it:
-- the escape character \ in String has different meaning than in Regex Literal
-- and so String should not be highlighted as Regex Literal (unless you really mean to & has a way to solve the \ escape problem)

The answer might be: by submitting a feature request, and then waiting for (or possibly helping with) its approval and implementation... — Peter B, Feb 16 '23 at 12:27
I just thought there could be some extensions out there, something like es6-string-html — Nor.Z, Feb 16 '23 at 12:33
find the TextMate grammar for JavaScript, find the part that recognizes and colors a regex literal, find/add grammar to detect `new Regexp`, apply the same syntax coloring on the first argument if it is a string. Why is it a template string in your example? — rioV8, Feb 16 '23 at 13:22
@rioV8 Thanks for the comment, I searched & tried with TextMate https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide#injection-grammars , no idea why it just doesnt work at all. — Nor.Z, Feb 17 '23 at 04:25
@rioV8 I retried, and it works now, but the side effects of my way may be bad... — Nor.Z, Feb 17 '23 at 07:28

Nor.Z · Answer 1 · 2023-02-18T07:25:06.837

Update:

it was so obvious that this is a bad idea, and I didnt notice it:
-- the escape character \ in String has different meaning than in Regex Literal
-- and so String should not be highlighted as Regex Literal (unless you really mean to & has a way to solve the \ escape problem)

preface

again, Im not professional on this,
some of the steps are imperfect/redundant -- especially for source.js overwrite :
I have no idea what is the side effect of overwriting the default TextMate rule!!!!!
I have no idea what is the side effect of overwriting the default TextMate rule!!!!!
I have no idea what is the side effect of overwriting the default TextMate rule!!!!!
(if this doesnt work, Idk. )
(Update)
- this approach is buggy, the brackets {} syntax highlight seems not paired,
  seems its due to something wrong with the TextMate regex match rule of RegExp\((`|'|")
- so, this post serves more of the purpose of: just giving an idea of how things works

shorter path

if you dont want to bother too much of setting up the vscode extension project by yo code below,
just
1. download the code from https://github.com/kirksl/so60384141 (so60384141-master)
  this is an already setup vscode extension project
  (Im not the owner)
2. modify the package.json & JavaScript.tmLanguage.json (js_new_regex_syntax_hlt.tmLanguage.json) described below.
  (be aware, the project name (or such) are different in this package.json vs the package.json described below)
3. put that folder to your Vscode Extension folder C:\Users\XXXX\.vscode\extensions

detailed procedure

open a folder
run npm install -g yo generator-code
run yo code
select build new Language Support
... (setup details omitted) finish setup, obtain a project -- a Vscode extension project, in a newly created folder, say jsnr

eg: (folder name may not match)
search online for TextMate rule for Javascript find https://github.com/microsoft/vscode/blob/main/extensions/javascript/syntaxes/JavaScript.tmLanguage.json
get file \syntaxes\JavaScript.tmLanguage.json
create a new folder syntaxes in your extension project jsnr
put the file JavaScript.tmLanguage.json in jsnr/syntaxes
rename the file to js_new_regex_syntax_hlt.tmLanguage.json

your folder structure should look like this:

open file js_new_regex_syntax_hlt.tmLanguage.json (JavaScript.tmLanguage.json)
locate the place where has the regex syntax for matching regex literal in js (omitted some lines)

        {
          "name": "string.regexp.js",
          "begin": "((?<![_$[:alnum:])\\]]|\\+\\+|--|}|\\*\\/)|((?<=^return|[^\\._$[:alnum:]]return|^case|[^\\._$[:alnum:]]case))\\s*)\\/(?![\\/*])(?=(?:[^\\/\\\\\\[]|\\\\.|\\[([^\\]\\\\]|\\\\.)*\\])+\\/([dgimsuy]+|(?![\\/\\*])|(?=\\/\\*))(?!\\s*[a-zA-Z0-9_$]))",
          "beginCaptures": {
            "0": {
              "name": "punctuation.definition.string.begin.js"
            }
          },

add your own regex matching rule that matches for new RegExp, below the above regex matching rule

        {
          "name": "string.regexp.js",
          "begin": "RegExp\\((`|'|\")",
          "beginCaptures": {
            "0": {
              "name": "punctuation.definition.string.begin.js"
            }
          },
          "end": "(`|'|\")",
          "endCaptures": {
            "1": {
              "name": "punctuation.definition.string.end.js"
            }
          },
          "patterns": [
            {
              "include": "#regexp"
            }
          ]
        }

image for part of the file

(somehow a regex lookbehind doesnt work... )

open package.json

modify to

        "grammars": 
        [
            {
              "scopeName": "source.js",
              "path": "./syntaxes/js_new_regex_syntax_hlt.tmLanguage.json",
              "injectTo": ["source"]
            }
        ]

(full file):

{
  "name": "jsnrsh",
  "displayName": "js_new_regex_synhlt",
  "description": "syntax highlight for new RegExp in js",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.75.0"
  },
  "categories": [
    "Programming Languages"
  ],
  "contributes": {
        "grammars": 
        [
            {
              "scopeName": "source.js",
              "path": "./syntaxes/js_new_regex_syntax_hlt.tmLanguage.json",
              "injectTo": ["source"]
            }
        ]
  }
}

this injects(/overwrites) your TextMate rule into Vscode's default rule
- TextMate rule defines what text segment is under what TextMate scope
- TextMate scope is used for determine which word use what color of syntax higlight
- (by default, Vscode knows how to automatically highlight the code,, base on the TextMate rule,
  but you can still create your own syntax highlight color, by changing the textMateRules.
  
  eg:
```
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "keyword.todo",
        "settings": {
            "foreground": "#9a9c2b"
        }
      }
    ]
  },
```
again, Im not professional on this,
I have no idea what is the side effect of overwriting the default TextMate rule!!!!!

now, the extension project is done -- with package.json & js_new_regex_syntax_hlt.tmLanguage.json (JavaScript.tmLanguage.json) properly set.

copy the jsnr to where the Vscode extension folder is --eg: C:\Users\XXXX\.vscode\extensions
reload your Vscode, open any js file
-- now new RegExp has regex syntax highlight too
- (this makes the syntax highlight lag on vscode start up -- the RegExp class appears to be red, then turns back into green later. idk why.)

more info

_{^{javascript - How can I get regex syntax highlight for new RegExp in js in Vscode? - Stack Overflow

How can I get regex syntax highlight for `new RegExp` in js in Vscode?

javascript - VS Code - highlight some variables with TextMate - Stack Overflow

VS Code - highlight some variables with TextMate

Can one VS Code syntax scope reference another for theme purposes? - Stack Overflow

Can one VS Code syntax scope reference another for theme purposes?

design patterns - VSCode: TextMate Regex in User Settings - Stack Overflow

VSCode: TextMate Regex in User Settings

Syntax Highlight Guide | Visual Studio Code Extension API

https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide

Contribution Points | Visual Studio Code Extension API

https://code.visualstudio.com/api/references/contribution-points#contributes.languages

Visual Studio Code Themes

https://code.visualstudio.com/docs/getstarted/themes#_editor-syntax-highlighting

VSCode/TextMate syntax highlighting grammar -- matching code until end of line - Stack Overflow

VSCode/TextMate syntax highlighting grammar -- matching code until end of line

How to make your own VS Code theme! - YouTube

https://www.youtube.com/watch?v=pGzssFNtWXw

//

How can I find the folder of the theme I'm using in VS Code - Stack Overflow

How can I find the folder of the theme I'm using in VS Code

How to edit default dark theme for Visual Studio Code? - Stack Overflow

How to edit default dark theme for Visual Studio Code?

vscode-textmate/javascript-regex.json at main · microsoft/vscode-textmate

https://github.com/microsoft/vscode-textmate/blob/main/test-cases/first-mate/fixtures/javascript-regex.json

vscode/Regular Expressions (JavaScript).tmLanguage at main · microsoft/vscode

https://github.com/microsoft/vscode/blob/main/extensions/javascript/syntaxes/Regular%20Expressions%20(JavaScript).tmLanguage

VS Code: Injection grammar scope for custom keyword is overriden in C++ - Stack Overflow

VS Code: Injection grammar scope for custom keyword is overriden in C++

Create Custom Syntax Highlighting in VS Code | Programming Language | Software Coding Tutorials - YouTube

https://www.youtube.com/watch?v=5msZv-nKebI

How to inject a TextMate grammar to a Markdown heading in VS Code? - Stack Overflow

How to inject a TextMate grammar to a Markdown heading in VS Code?

vscode extensions - Create Custom Language in Visual Studio Code - Stack Overflow

Create Custom Language in Visual Studio Code

visual studio code - How to reference an injected grammar within a custom VSCode language - Stack Overflow

How to reference an injected grammar within a custom VSCode language

kirksl/so60384141: How to reference an injected grammar within a custom VSCode language

https://github.com/kirksl/so60384141

//

~~// themes - VSCode color customisation, Include regexp check in textMateRules - Stack Overflow

~~// VSCode color customisation, Include regexp check in textMateRules

~~//

~~// Highlight - Visual Studio Marketplace

~~// https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-highlight

~~//

~~// Semantic Highlight Guide | Visual Studio Code Extension API

~~// https://code.visualstudio.com/api/language-extensions/semantic-highlight-guide

~~//

~~// vscode extensions - What is the VS Code TextMate syntax for JSON inside an HTML attribute - Stack Overflow

~~// What is the VS Code TextMate syntax for JSON inside an HTML attribute

~~//

~~// filmgirl/TextMate-Themes: A Collection of TextMate Themes I've gathered over the years

~~// https://github.com/filmgirl/TextMate-Themes

~~//

~~// json-in-html/script-json.embedded.json at baseline · bahrus/json-in-html

~~// https://github.com/bahrus/json-in-html/blob/baseline/syntax/script-json.embedded.json

~~//

~~// MagicPython/MagicRegExp.tmLanguage at master · MagicStack/MagicPython

~~// https://github.com/MagicStack/MagicPython/blob/master/grammars/MagicRegExp.tmLanguage}}

you have it working now, why don't you create a pull request on the VSC repo so we all benefit of this feature — rioV8, Feb 17 '23 at 08:38
@rioV8 - The issue is stated in the post. -- > Im not professional on this, ***I have no idea what is the side effect of overwriting the default `TextMate rule`!!!!!*** - It will be helpful if someone knows what Im doing and can do better. \ - If you know a place where people knows how to do these things, you can link this post to it. — Nor.Z, Feb 17 '23 at 08:50
fork the VSC repo on github, create a branch `feature-js-regexp-string`, use `.` to start VSC web, edit the file `extensions/javascript/syntaxes/JavaScript.tmLanguage.json`, create a commit with the update, create a pull request for this commit — rioV8, Feb 17 '23 at 09:07

How can I get regex syntax highlight for `new RegExp` in js in Vscode?

1 Answers1

preface

shorter path

detailed procedure

more info