Let your AI model code comments into a readable, structured document — right inside VS Code.
CommentStyler.AI renders structured comments as visual headings, callouts, warnings, task checkboxes, and more. It works in every language — Python, JavaScript, TypeScript, C, Rust, Go, Ruby, SQL, and dozens more. No config needed to get started.
You write comments using a simple markdown-inspired syntax. CommentStyler.AI reads them and renders them with colors, icons, and styles inline in your editor — without touching your actual code.
Whenever you open a new project it will ask you to add .commentstyle.md add it and AI models like GitHub Copilot, Cursor, or Claude will automatically follow the same comment style when generating code for you.
# # My File Title → large bold heading (H1, one per file)
# ## Auth Module → section heading (H2, collapsible)
# ### decode_token → sub-label (H3)# This is *important* text → only the word "important" turns bold
# Works inside paragraphs, notes, and any other tag too# """ This is a longer explanation
# that spans multiple lines
# and renders as an italic block """# > Note: Returns null on empty input → blue info callout
# ! WARNING: Mutates the original array → orange warning
# !! DANGER: Bypasses authentication → red danger banner# [ ] TODO: Add input validation → open checkbox
# [x] DONE: Setup routing → checked & strikethrough# ~~ old_approach() ~~ → strikethrough in grey# --- Payment Logic --- → labeled horizontal rule# @param token str - JWT bearer token → parameter row
# @returns dict - decoded user payload → return value rowComments render with color, weight, and icons directly in the editor. No extra panels, no context switching. Your code and its documentation live together.
A Table of Contents panel appears in the Explorer sidebar, built from your #, ##, and ### headings. Click any entry to jump straight to that section. Fully collapsible hierarchy.
Every ## heading becomes a foldable region in the editor gutter — fold an entire logic section with one click, just like native code folding.
Switch the styling off any time to see raw comments. Back on with the same shortcut. Useful when sharing your screen or reviewing syntax closely.
Python, JavaScript, TypeScript, JSX, TSX, C, C++, C#, Java, Go, Rust, Swift, Kotlin, PHP, Ruby, Shell, YAML, R, Lua, Haskell, SQL, HTML, CSS, SCSS, Less — and any language using // or # comments.
Drop .commentstyle.md in your project root. AI coding assistants that read your project files will automatically write comments in the CommentStyler.AI format.
- Open VS Code
- Go to the Extensions sidebar (
Ctrl+Shift+X) - Click the
...menu (top-right of the Extensions panel) - Select Install from VSIX...
- Choose the
commentstyler-ai-1.0.0.vsixfile - Restart VS Code
Done — the extension is ready to use.
Only needed if you want to modify the extension.
npm install
npm run compile
npm install -g @vscode/vsce
vsce packageThen install the newly generated .vsix using the steps above.
All commands are available in the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):
| Command | Description |
|---|---|
CommentStyler.AI: Toggle Styling On/Off |
Show or hide all comment rendering |
CommentStyler.AI: Refresh Outline |
Manually refresh the sidebar outline |
CommentStyler.AI: Add .commentstyle.md to Project |
Copy the spec file to your workspace root |
The default shortcut for toggling styling on/off is:
| Platform | Default Shortcut |
|---|---|
| Windows / Linux | Ctrl+Shift+; |
| macOS | Cmd+Shift+; |
- Open Keyboard Shortcuts (
Ctrl+K Ctrl+S/Cmd+K Cmd+S) - Search for
CommentStyler.AI: Toggle - Click the pencil icon next to the binding
- Press your preferred key combination and hit
Enter
This works on Windows, Linux, and macOS. Your custom shortcut is saved to your VS Code profile and survives extension updates.
Open Settings (Ctrl+, / Cmd+,) and search CommentStyler to see all options.
"commentstyle.theme": "dark"| Value | Description |
|---|---|
dark |
Default — muted purples, cyans, and pastels |
minimal |
Low-contrast greyscale, easy on the eyes |
vibrant |
High-contrast Dracula-style colors |
"commentstyle.enabled": trueSet to false to turn off all rendering globally.
Every tag has its own color override. Add any of these to your settings.json to customize — you only need to set the ones you want to change, the rest fall back to the active theme:
"commentstyle.colors.h1": "#cba6f7",
"commentstyle.colors.h2": "#89dceb",
"commentstyle.colors.h3": "#89b4fa",
"commentstyle.colors.bold": "#f5c2e7",
"commentstyle.colors.para": "#bac2de",
"commentstyle.colors.noteBg": "#0d2137",
"commentstyle.colors.noteFg": "#74c7ec",
"commentstyle.colors.warnBg": "#2d1e00",
"commentstyle.colors.warnFg": "#f9e2af",
"commentstyle.colors.dangerBg": "#2d0000",
"commentstyle.colors.dangerFg": "#f38ba8",
"commentstyle.colors.todo": "#fab387",
"commentstyle.colors.done": "#a6e3a1",
"commentstyle.colors.depr": "#585b70",
"commentstyle.colors.divider": "#45475a",
"commentstyle.colors.param": "#94e2d5",
"commentstyle.colors.returns": "#a6e3a1"# # User Authentication Module
# ## Token Validation
# @param token str - JWT bearer token
# @returns dict - decoded user payload
# ! WARNING: Does not verify expiry — call check_expiry() first
def decode_token(token):
# """ Triple-decode handles legacy base64 padding issues
# introduced before the v2 token format migration """
return jwt.decode(token, SECRET)
# --- Refresh Logic ---
# [ ] TODO: Implement sliding window refresh
# ~~ old_refresh() ~~ — replaced by rolling token strategy
def refresh_token(token):
passcommentstyle-vscode/
├── src/ # TypeScript source
│ ├── extension.ts # Entry point, command wiring
│ ├── parser.ts # Comment syntax parsing
│ ├── decorator.ts # Color/styling engine
│ ├── treeProvider.ts # Sidebar outline
│ └── foldingProvider.ts # Collapsible sections
├── out/ # Compiled JavaScript (generated)
├── package.json # Extension metadata & config
├── tsconfig.json # TypeScript settings
├── .commentstyle.md # Spec file for AI models
└── README.md # User documentation
Error: tsc: not found
npm install
npm run compileExtension not showing in VS Code
- Make sure the
.vsixfile was created: check project root forcommentstyler-ai-1.0.0.vsix - Reinstall: uninstall the extension first, then run
code --install-extension commentstyler-ai-1.0.0.vsix - Restart VS Code completely
MIT