Nest Comments

A developer plugin/extention that expands the default commenting functionality in some popular text editors.

Details

The problem: 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 --> closing comment tag will end the entire comment.

example HTML code with comment issues
Sublime Text sample of HTML comment issue.

The solution: The plugin very simply finds all comments within the highlighted block of code and converts dashes to tildes, and then places the comment tags in the expected locations. The plugin also then reverses the effect to uncomment the same code.

example HTML code with comment issue solution
Sublime Text nested comments solution.

This plugin/package/extension is available for:

Version 2.2 for VSCode Released

VSCode Nest HTML icon

Visual Studio Marketplace Visual Studio Marketplace license

The package has been renamed to Nest Comments, and now supports both the HTML syntax of commenting <!-- --> and the CSS syntax /* */.

The VSCode extension hass been updated to support the HTML, CSS and JSX commenting syntax.

HTML Example

<main role="main">
  <!-- A comment that's very important -->
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</main>

Becomes:

<!-- <main role="main">
<!~~ A comment that's very important ~~>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</main> -->

CSS Example

body {
  /* margin: 0; */
}

Becomes:

/* body {
  /~ margin: 0; ~/
} */

JSX Example

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