Welcome to Jonic Developer Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

visual studio code - How to hide or collapse all javascript console.log lines in VSC

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.

enter image description here

How could I accomplish my goal?

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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:

enter image description here


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Jonic Developer Community for programmer and developer-Open, Learning and Share
...