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