Nested Comments

[]

About

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. Additionally, this extension will work with multiple cursor selections.

Features

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.

Examples

HTML Syntax

<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> -->

CSS Syntax

.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);
}*/

JSX Syntax

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>

Usage

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

Default Keybindings

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

Extension Settings

The following languages are supported:

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

Known Issues

None at this time 😃

Release Notes

Full release notes are available in the CHANGELOG file.