How to hide or collapse all javascript console.log lines in VSC

Question

Lots of logging is very helpful to me.

However, sometimes I would like to temporarily reduce the clutter of code that I'm editing in VSC by hiding, collapsing, or reducing the opacity of the font of console.log, console.warn, and console.error lines in javascript, Vue, React, etc.

How could I accomplish my goal?

I'd love if there were some way to easily toggle the feature on/off.

Answer 1

Thank you so much to @rioV8, who pointed me to the answer.

This seems to work for me when using extension Highlight:

"highlight.regexes": {
    "(console\\.(log|warn|error)\\(.+\\)[;]?)": {
        "regexFlags": "g",
        "decorations": [
          { "opacity": "0.1" }
        ]
      }
}

To determine what regular expression I wanted to use, I wrote these test cases in https://www.regexpal.com:

console.log('asdfdsf')
console.log({some})
console.log({some});
console.error('error', msg);
console.warn('careful', thing)

And (console\.(log|warn|error)\(.+\)[;]?) worked. Then I needed to add an extra \ before each \ to satisfy the VSC settings JSON file.

Now my VSC looks like this: