Better Box Comments

Generate ASCII box comments with "Better Comments" style coloring and persistence in VS Code.

Features

• ASCII Generation: Automatically wrap text into beautiful ASCII boxes.
• Color Variants: Color-coded boxes inspired by "Better Comments" (TODO, ALERT, INFO, WARNING).
• Visual Persistence: Colored decorations persist even after closing and reopening files.
• Border Style Presets: Quickly switch between standard, hash, equals, and double-line styles.
• Customizable Borders: Complete control over the characters used for ASCII borders.

Usage

1. Select the text you want to wrap in a box.
2. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P).
3. Search for:
   • Box: Create Standard Box
   • Box: Create TODO Box
   • Box: Create Alert Box
   • Box: Create INFO Box
   • Box: Create Warning Box

Configuration

Customizable via VS Code Settings (betterBoxComments.*):

How to Customize

You can tailor the look of your boxes in two ways:

1. Using Style Presets (Quickest)

1. Go to Settings (Ctrl+,).
2. Search for betterBoxComments.borderStyle.
3. Choose a preset from the dropdown:
   • Default: Rounded corners (┌ ─ ┐).
   • Hash: All-around hash (# # #).
   • Equals: Double-horizontal (= | =).
   • Double: Unicode double lines (╔ ═ ╗).

2. Using Custom Characters (Full Control)

1. Set betterBoxComments.borderStyle to Custom.
2. Customize individual characters by searching for betterBoxComments.chars.
3. You can set unique symbols for every corner and border:
   • tl, tm, tr (Top)
   • l, r (Sides)
   • bl, bm, br (Bottom)
   • dl, dm, dr (Dividers)

3. Customizing Colors

You can change the colors of any box variant:

1. Go to Settings (Ctrl+,).
2. Search for betterBoxComments.colors.
3. Use the hex color picker to set your preferred colors for TODO, Alert, Info, etc.
4. Changes take effect immediately!

Style Examples

Default Style

//  ┌────────────────────────────────────────────────────────────────────────┐
//  │ This is the default rounded border style.                              │
//  └────────────────────────────────────────────────────────────────────────┘

Hash Style

//  ##########################################################################
//  # This style uses hashes for all borders and corners.                    #
//  ##########################################################################

Equals Style

//  ==========================================================================
//  | This style uses equals for borders and pipes for sides.                |
//  ==========================================================================

Double Line Style

//  ╔════════════════════════════════════════════════════════════════════════╗
//  ║ This style uses unicode double lines for a premium look.               ║
//  ╚════════════════════════════════════════════════════════════════════════╝

Better Comments Tags

The extension recognizes the following tags in the top border of the box:

• [TODO] (Blue: #3498db)
• [ALERT] (Red: #e74c3c)
• [INFO] (Green: #2ecc71)
• [WARNING] (Orange: #f39c12)
• Standard (Grey: #dcdde1 - Default for boxes without tags)

Example:

//  ┌── [TODO] ──────────────────────────────────────────────────────────────┐
//  │ This is a colored box that will remain blue when you reopen the file.  │
//  └────────────────────────────────────────────────────────────────────────┘

Credits

Inspired by vscode-box-comment and Better Comments.