Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Comment Divider ExtensionNew to Visual Studio Code? Get it now.
Comment Divider Extension

Comment Divider Extension

sujenp

|
138 installs
| (1) | Free
Divide your code by sections with styled separators.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Comment Divider

Comment Divider Extension

This extension provides commands for separating line content with comments for readability. This is an extension of the original Comment Divider extension, where the filler symbols are fully customisable.

Supports all common languages.

Install

https://marketplace.visualstudio.com/items?itemName=sujenp.comment-divider-ext

Demo

Quick Demo

Customizations

Unlike the existing fillers in the original Comment Divider extension, the fillers are not limited to one character. Moreover, there are extensive customisation to all the filler symbols.

Main header

  // "Set symbol for main header line filling.
  "comment-divider.mainHeaderFiller": "-",

  // "Set symbol for main header top line.
  "comment-divider.mainHeaderFillerTop": "-",

  // "Set symbol for main header bottom line.
  "comment-divider.mainHeaderFillerBottom": "-",

Subheader

  // "Set symbol for subheader line filling.
  "comment-divider.subheaderFiller": "-",

Commands

Make main header

  • Default Shortcut: Shift + Alt + X

  • Default Style:

    /* -------------------------------------------------------------------------- */
    /*                                Example text                                */
    /* -------------------------------------------------------------------------- */
    

Make subheader

  • Default Shortcut:

    Alt + X

  • Default Style:

    /* ------------------------------ Example text ------------------------------ */
    

Insert solid line

  • Default Shortcut:

    Alt + Y

  • Default Style:

    /* -------------------------------------------------------------------------- */
    

Language Support

Extension uses relevant comment characters for all common languages.

For example, in python files subheader looks like

# ------------------------------ python example ------------------------------ #

or in html files

<!-- ---------------------------- html example ----------------------------- -->

Also, you can easily add support for any missing language or override the default preset.

Default Configuration

Common

  // Set line length for all dividers.
  "comment-divider.length": 80,
  // Set whether the divider will be shrink consider indent size, or will be always fixed length.
  "comment-divider.shouldLengthIncludeIndent": false,
  • if shouldLengthIncludeIndent: false

    /* --------------------------------- indent0 -------------------------------- */
    
    /* --------------------------------- indent1 -------------------------------- */
    
    /* --------------------------------- indent2 -------------------------------- */
    
  • if shouldLengthIncludeIndent: true

    /* --------------------------------- indent0 -------------------------------- */
    
    /* ------------------------------- indent1 ------------------------------ */
    
    /* ----------------------------- indent2 ---------------------------- */
    

Main Header

  // "Set symbol for main header line filling.
  "comment-divider.mainHeaderFiller": "-",

  // "Set symbol for main header top line.
  "comment-divider.mainHeaderFillerTop": "-",

  // "Set symbol for main header bottom line.
  "comment-divider.mainHeaderFillerBottom": "-",

  // Set main header vertical style.
  "comment-divider.mainHeaderHeight": "block",

  // Set main header text align.
  "comment-divider.mainHeaderAlign": "center",

  // Set main header text transform style.
  "comment-divider.mainHeaderTransform": "none",

Subheader

  // "Set symbol for subheader line filling.
  "comment-divider.subheaderFiller": "-",

  // Set subheader vertical style.
  "comment-divider.subheaderHeight": "line",

  // Set subheader text align.
  "comment-divider.subheaderAlign": "center",

  // Set subheader text transform style.
  "comment-divider.subheaderTransform": "none",

Solid Line

  // Set symbol for solid line filling.
  "comment-divider.lineFiller": "-",

Languages Configuration

If some language is not supported out of the box, or you want to change default comment characters for an already supported language, it is possible to do it in the settings.

"comment-divider.languagesMap": {
      "toml": ["#", "#"],
      "scss": ["//"]
}

The item name is the language mode name and is associated with an array of 1 or 2 elements. The first element is the start of the line. The second, if defined, is the end.

The example above defines the right characters for toml and overrides scss defaults. As a result, the subheaders for these languages look like this:

# ------------------------------ toml subheader ------------------------------ #
// ----------------------------- scss subheader --------------------------------

Issues

Request features and report bugs using GitHub.

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