🎯 The Problem
When working on modern single-page applications, micro-frontends, or monolithic architectures where React JSX is embedded inside an HTML document (e.g., <script type="text/babel">), standard IDE comment shortcuts (Ctrl+/) consistently fail:
- HTML comments (
<!-- ... -->) crash Babel with SyntaxError: Unexpected token '<'.
- JS line comments (
//) inside JSX render as literal text nodes in the DOM.
- JS block comments (
/* ... */) inside JSX children render as literal text without actually disabling the elements.
- Existing extensions check only the file extension (
.html) and insert the wrong comment syntax.
Smart Comment eliminates this friction by inspecting the exact syntactic context of your cursor or selection and applying the correct commenting syntax dynamically.
💡 How It Compares
| Code Context |
Default IDE (Ctrl+/) |
Generic Comment Extensions |
Smart Comment |
JSX Child Element
<div><button /></div> |
❌ Inserts bare /* ... */
(Renders text literals to DOM) |
⚠️ Inserts <!-- --> in HTML
(Babel compiler crashes) |
✅ {/* <button /> */}
(Cleanly removed from render tree) |
JSX Tag Attribute
<button onClick={fn}> |
❌ Inserts line comments //
(Breaks opening tag syntax) |
❌ Inserts {/* ... */}
(Invalid syntax inside tag) |
✅ <button /* onClick={fn} */>
(Clean attribute block comment) |
React in <script> block |
❌ File-extension bound (<!-- -->) |
❌ Requires manual configuration |
✅ Auto-detects Babel blocks |
| Pure JavaScript in Script |
⚠️ Inconsistent line vs block comments |
⚠️ Inconsistent line vs block comments |
✅ Clean // line or block comments |
| Pure HTML Markup |
✅ Inserts <!-- ... --> |
✅ Inserts <!-- ... --> |
✅ <!-- ... --> outside script tags |
| CSS Styles |
⚠️ Often conflicts with HTML comments |
Requires manual switching |
✅ /* ... */ inside <style> or .css |
| Uncommenting (2-Way Toggle) |
❌ Often leaves orphan braces { } |
⚠️ Often strips indentation |
✅ Lossless toggle: restores original code |
| Package Weight |
Built-in |
⚠️ Heavy dependencies & LSP processes |
✅ Zero dependencies, under 120 KB |
✨ Features
- React JSX Children: Automatically wraps elements with
{/* ... */} while preserving all base indentation.
- React JSX Tag Attributes: Comments attributes inside opening tags with
/* ... */.
- Pure JavaScript: Comments functions, hooks, and variables with
// or block comments.
- Pure HTML: Comments markup outside script blocks with
<!-- ... -->.
- CSS / Stylesheets: Comments styles inside
<style> tags or .css files with /* ... */.
- Seamless 2-Way Toggle: Pressing the shortcut on already-commented code uncomments it cleanly, restoring the exact original markup and indentation.
- Zero Dependencies: Pure vanilla JavaScript runtime for maximum performance and zero overhead.
🚀 Installation
Option 1: Official Marketplace (Recommended)
In VS Code or Antigravity IDE:
- Press
Ctrl+P (or Cmd+P), paste the following command, and press Enter:
ext install yusufalhelou.vscode-smart-comment
- Or open the Extensions view (
Ctrl+Shift+X), search for Smart Comment (by Yusuf Alhelou), and click Install.
👉 View on Visual Studio Marketplace
Option 2: Manual VSIX Installation
In VS Code or Antigravity IDE:
- Download the latest
.vsix package from the Releases tab.
- In VS Code or Antigravity IDE, press
Ctrl+Shift+P (or Cmd+Shift+P).
- Choose Extensions: Install from VSIX... and select the downloaded file.
⌨️ Controls & Shortcuts
| Action |
Shortcut (Windows/Linux) |
Shortcut (macOS) |
Alternate |
| Toggle Smart Comment |
Ctrl + Alt + / |
Cmd + Alt + / |
Alt + / |
Also Available Via:
- Right-Click Context Menu: Highlight any code ➔ Right-Click ➔ Smart Comment / Uncomment (Context-Aware).
- Editor Header Button: Click the comment icon
💬 at the top-right of your editor tab.
- Status Bar: Click
$(comment) Smart Comment on the bottom right status bar.
- Code Action (Lightbulb): Click the
💡 lightbulb on any selection ➔ Toggle Smart Comment.
If you want Smart Comment to replace VS Code's default comment shortcut entirely:
- Open Keyboard Shortcuts (
Ctrl + K, Ctrl + S or Cmd + K, Cmd + S on macOS).
- Search for:
Smart Comment / Uncomment.
- Double-click it and press
Ctrl + / (or Cmd + /).
📊 Syntax Matrix
| File Type / Context |
Comment Syntax |
Example Output |
| JSX Child Element |
{/* ... */} |
{/* <button className="btn">Click</button> */} |
| JSX Tag Attribute |
/* ... */ |
<button /* onClick={handleClick} */ className="btn"> |
| JavaScript Logic |
// ... |
// const [state, setState] = useState(null); |
| HTML Markup |
<!-- ... --> |
<!-- <div id="root"></div> --> |
| CSS Styles |
/* ... */ |
/* .card { border-radius: 1rem; } */ |
🧪 Testing
Run the included automated unit test suite:
node test/run_tests.js
👤 Author
Yusuf Alhelou
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
