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.
