VS Code - Idiomatic CSS Comments

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.