Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>VS Code Idiomatic CSS CommentsNew to Visual Studio Code? Get it now.
VS Code Idiomatic CSS Comments

VS Code Idiomatic CSS Comments

Ryan Belisle

|
6,480 installs
| (1) | Free
CSS and Sass style comments for Visual Studio Code based on Nicolas Gallagher's Idiomatic CSS principles
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

VS Code Idiomatic CSS Comments

Features

Idiomatic CSS/SCSS comments made easy and consistent with these VS Code Snippets.

Instructions

Start typing one of the below commands and then hit enter

Basic Comment

Trigger: com-idio-css-basic + enter

/* Comment */

Section Comment

Trigger: com-idio-css-section + enter

/* ==========================================================================
   This is a Section Comment
   ========================================================================== */

Sub-Section Comment

Trigger: com-idio-css-sub + enter

/*
   This is a sub-section comment
   ========================================================================== */

Long Comment

Trigger: com-idio-css-long + enter

/**
 * Short description using Doxygen-style comment format
 *
 * The first sentence of the long description starts here and continues on this
 * line for a while finally concluding here at the end of this paragraph.
 *
 * The long description is ideal for more detailed explanations and
 * documentation. It can include example HTML, URLs, or any other information
 * that is deemed necessary or useful.
 *
 * @tag This is a tag named 'tag'
 *
 * TODO: This is a todo statement that describes an atomic task to be completed
 *   at a later date. It wraps after 80 characters and following lines are
 *   indented by 2 spaces.
 */

TODO List Comment

Trigger: comm-idio-css-todo + enter

/**
 * TODO:
 *
 * => Write some code
 * => Make some lists
 *
 */

SCSS-style Comments

Each of the comment-types listed above can be rendered in the form of a SCSS-style comment using the shortcuts listed below.

  • Basic Comment (SCSS) - com-idio-scss-basic
  • Section Comment (SCSS) - com-idio-scss-section
  • Sub-Section Comment (SCSS) - com-idio-scss-sub
  • Long Comment (SCSS) - com-idio-scss-long
  • Todo List Comment (SCSS) - com-idio-scss-todo

As before, each shortcut should be followed by the tab key.

Bugs

Please report any bugs on the GitHub repo

Author

Ryan Belisle

Release Notes

Moved to Changelog

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft