Is there a way to enable regex syntax highlighting for `new RegExp` in JavaScript within Visual Studio Code (VSCode)?

Question

Is there a way to enable regex syntax highlighting for `new RegExp` in JavaScript within Visual Studio Code (VSCode)?

Looking to achieve
syntax highlighting for "new RegExp" using regex syntax, similar to the regex literal.
Any suggestions on how to accomplish this?

https://i.sstatic.net/eIArX.png

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

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

Update:

Realized that it might not be a good idea after all:
-- The escape character \ behaves differently in Strings than in Regex Literals
-- String should not be highlighted as Regex Literal (unless there's a solution for the \ escape dilemma)

javascript regex visual-studio-code syntax-highlighting

Answer 1

Answer №1

Update:

After realizing the inherent flaws in this approach, it became evident that highlighting String as Regex Literal is problematic due to the differing meanings of the escape character \ in each context.

preface

While I lack expertise in this area, certain steps may be redundant or imperfect - particularly concerning overwriting the default TextMate rule.
If this method fails, alternative solutions should be explored.
It's important to note that this technique has its shortcomings, such as incorrect syntax highlighting for brackets.

shorter path

If setting up the vscode extension project seems daunting, consider downloading an existing project from this repository. Make necessary adjustments to the package.json &
```
JavaScript.tmLanguage.json (js_new_regex_syntax_hlt.tmLanguage.json)
```
and place the folder in your Vscode Extension directory.

detailed procedure

Begin by creating a new folder and following the specified setup process.
Research a suitable TextMate rule for JavaScript and integrate it into your project.

Add a custom regex matching rule under the existing rules to account for instances of new RegExp.

// New Regex 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"
    }
  ]
}

Make any required edits to the package.json file to ensure proper integration of the new rules.

Upon completing the project setup, copy the folder to the designated Vscode Extensions directory.
Reload Vscode to activate the changes and witness the new regex syntax highlighting for new RegExp.

more info

_{^{For further details and additional resources on this topic, refer to the provided Stack Overflow links and documentation sources.}}

Answer 2

Update:

After realizing the inherent flaws in this approach, it became evident that highlighting String as Regex Literal is problematic due to the differing meanings of the escape character \ in each context.

preface

While I lack expertise in this area, certain steps may be redundant or imperfect - particularly concerning overwriting the default TextMate rule.
If this method fails, alternative solutions should be explored.
It's important to note that this technique has its shortcomings, such as incorrect syntax highlighting for brackets.

shorter path

If setting up the vscode extension project seems daunting, consider downloading an existing project from this repository. Make necessary adjustments to the package.json &
```
JavaScript.tmLanguage.json (js_new_regex_syntax_hlt.tmLanguage.json)
```
and place the folder in your Vscode Extension directory.

detailed procedure

Begin by creating a new folder and following the specified setup process.
Research a suitable TextMate rule for JavaScript and integrate it into your project.

Add a custom regex matching rule under the existing rules to account for instances of new RegExp.

// New Regex 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"
    }
  ]
}

Make any required edits to the package.json file to ensure proper integration of the new rules.

Upon completing the project setup, copy the folder to the designated Vscode Extensions directory.
Reload Vscode to activate the changes and witness the new regex syntax highlighting for new RegExp.

more info

_{^{For further details and additional resources on this topic, refer to the provided Stack Overflow links and documentation sources.}}

Is there a way to enable regex syntax highlighting for `new RegExp` in JavaScript within Visual Studio Code (VSCode)?

Answer №1

preface

shorter path

detailed procedure

more info

Similar questions

Error encountered in React due to a syntax issue with parsing JSON from the response received

What is the best way to incorporate a Thymeleaf message stored in message.properties into my JavaScript file?

Refresh Jira Gadget AJAX while Viewing Configuration Screen

encountering a problem when attempting to transfer data from JavaScript to a scriptlet in a JSP

Which is more powerful: Angular's change detection or directly editing HTML?

Conceal the navigation bar when scrolling to the top of the

Troubleshooting issues with jQuery and the UpdatePanel

Unable to retrieve all AJAX responses during page loading in Puppeteer

Failed Attempt to Execute React Native Application using Command Prompt (iOS)

To link the information within the angularJS controller

Encountering an issue in Typescript where utilizing ref in ShaderMaterial triggers an error stating: "The anticipated type is originating from the property 'ref' declared within the 'PolygonMat' type definition."

Having trouble implementing button functionality in a web app using JS, jQuery, HTML, and CSS along with an API integration

Improving code structure for a unique date feature

Surprising outcome caused by introducing a service dependency within another service in Angular 6

An error occurred in Node.js while parsing data: Headers cannot be set after they have already been sent to the client

Methods for decoding a JSON object and iterating through its contents

steps to extract routing into its own component

Utilizing React to customize JVectorMap markers

Tips for writing an async function using TypeScript

Is there a way to compare data before and after revalidation using useSWR?