[]

If your code contains a comment, and you want to add a new comment to temporarily disable a block or portion of code, the built in commenting functionality does not actually place the comment tags in expected locations. If an existing comment is included in the content being commented out, the first instance of a --> or */ closing comment tag will end the entire comment.

This extension will convert pre-existing comments to safe characters, allowing a new block comment that includes the original comment. It also reverses the effect to uncomment the same block of code.

If you need to comment out a portion of your code that includes pre-existing comments, the native commenting functionality will not comment properly or preserve your existing comments. This extension will maintain your original comments and allow you to quickly toggle comments on sections of code.

<main>
  <div class="container">
    <h2>Hello World</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <!-- <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> -->
  </div>
</main>

Becomes:

<!-- <main>
  <div class="container">
    <h2>Hello World</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <!~~ <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> ~~>
  </div>
</main> -->

.example {
  /* display: flex; */
  transition: all 0.5s;
  /* user-select: none; */
  background: linear-gradient(to bottom, white, black);
}

Becomes:

/*.example {
  /~ display: flex; ~/
  transition: all 0.5s;
  /~ user-select: none; ~/
  background: linear-gradient(to bottom, white, black);
}*/

This commenting style will work for JSX content in .js and .ts files. Make sure to set the language mode of the file to javascriptreact/typescriptreact rather than using standard JavaScript for files using JSX.

<React.Fragment>
  <div className="footer" id="footer" ref={this.props.reference}>
    <footer role="contentinfo">
      <nav>
        {/* <FooterPrev prev={this.props.pageNav.prev} /> */}
        <FooterNext next={this.props.pageNav.next} />
      </nav>
    </footer>
  </div>
</React.Fragment>

Becomes:

<React.Fragment>
  {/*<div className="footer" id="footer" ref={this.props.reference}>
    <footer role="contentinfo">
      <nav>
        {/~ <FooterPrev prev={this.props.pageNav.prev} /> ~/}
        <FooterNext next={this.props.pageNav.next} />
      </nav>
    </footer>
  </div>*/}
</React.Fragment>

To trigger the extension, highlight the text that should be commented/uncommented.

• Mac: cmd + alt + /
• Windows: ctrl + alt + /

The following languages are supported:

• asp
• cfm
• css
• htm
• html
• jsx
• md
• njk
• php
• svelte
• svg
• tsx
• twig
• vue
• xml
• xsl

None at this time 😃

Full release notes are available in the CHANGELOG file.