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

Idiomatic CSS Comments

Demartini

|
918 installs
| (1) | Free
VS Code snippets for Nicolas Gallagher's Idiomatic CSS comments principles.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Logo
VS Code - Idiomatic CSS Comments

Visual Studio Marketplace Version Visual Studio Marketplace Installs Visual Studio Marketplace Rating license MIT

Table of Contents

  • Features
  • Installation
  • Supported Languages
  • Usage
  • Snippets
  • Examples
    • Basic Comment
    • Section Comment
    • Sub-Section Comment
    • Long Comment
  • Contributing
  • Changelog
  • License

Features

This extension adds snippets for Nicolas Gallagher's Idiomatic CSS comments principles in VS Code.

Installation

  1. Launch VS Code.
  2. Press Ctrl + P or Control + P (for macOS).
  3. Paste command ext install demartini.vscode-idiomatic-css-comments-snippets and press Enter.
  4. Reload VS Code.

Supported Languages

  • CSS (.css)
  • HTML (.html)
  • Less (.less)
  • PostCSS (.postcss)
  • SCSS (.scss)

Usage

In Visual Studio Code, snippets appear in IntelliSense (Ctrl + Space or Control + Space (for macOS)) mixed with other suggestions, as well as in a dedicated snippet picker (Insert Snippet in the Command Palette). There is also support for tab-completion: Enable it with "editor.tabCompletion": "on", type a snippet prefix (trigger text), and press Tab to insert a snippet.

Snippets

Below is a list of all available snippets and the triggers for each one.

Trigger Content
com-css-basic ⇥ CSS Basic Comment
com-css-section ⇥ CSS Section Comment
com-css-sub ⇥ CSS Sub-Section Comment
com-css-long ⇥ CSS Long Comment
com-scss-basic ⇥ SCSS Basic Comment
com-scss-section ⇥ SCSS Section Comment
com-scss-sub ⇥ SCSS Sub-Section Comment
com-scss-long ⇥ SCSS Long Comment

The ⇥ means the Tab key.

Examples

Basic Comment

  • CSS
/* Basic Comment */
  • SCSS
// Basic Comment

Section Comment

  • CSS
/* ==========================================================================
  Section Comment Block
  ========================================================================== */
  • SCSS
// ==========================================================================
// Section Comment Block
// ==========================================================================

Sub-Section Comment

  • CSS
/* Sub-section Comment Block
  ========================================================================== */
  • SCSS
//
// Sub-section Comment Block
//==========================================================================

Long Comment

  • CSS
/**
 * 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.
 */
  • SCSS
//
// 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.
//

Contributing

If you are interested in helping contribute, please take a look at our contribution guidelines and open an issue or pull request.

Changelog

See CHANGELOG for a human-readable history of changes.

License

Distributed under the MIT License. See LICENSE for more information.

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