ANSI Color Hint

English · 中文

A VS Code extension that makes writing terminal colors (ANSI escape sequences) in your code effortless.

Features

1. Smart completion

Type an escape prefix (\x, \0, \e, \u, etc.) in a supported language to pop up a color completion list:

• Each item shows a real color swatch on the left and the color name on the right
• Navigate with ↑↓, or keep typing to filter by name (\xred, and \x红 when Chinese is enabled)
• On accept it inserts \x1b[35m█cursor█\x1b[0m, leaving the cursor in the middle
• Escape syntax is picked automatically per file language:
  • JS/TS: \x1b[, \u001b[
  • Python: \x1b[, \033[
  • Shell: \e[, \033[
  • Java/Kotlin: \u001b[
  • Lua: \27[
  • Rust/Swift: \u{1b}[
  • PowerShell: `e[
  • …and more
• Frequently used colors are pinned to the top (frequency-based score with recency weighting)
• Two entries 256-color… / true-color… open a searchable picker of common named colors (each with a real swatch), grouped into Foreground and Background — or type a #RRGGBB / r,g,b value (or a 0-255 index for 256-color) for a custom color

2. Inline swatch preview

Existing ANSI color codes in your code (e.g. \x1b[31m) are preceded by a ■ swatch of the matching color. Toggle via ansiColorHint.showColorBlocks.

For extended colors — 256-color (38;5;n) and true-color (38;2;r;g;b) — the swatch is clickable: click it to open the native color picker and adjust the color visually. Picking a color rewrites the code (an exact true-color form, or the nearest 256-color index). Basic 16-color codes keep the read-only ■.

3. Hover preview

Hover over an ANSI sequence (e.g. \x1b[1;4;31m) to see the final rendered style (bold + underline + red) plus a per-code breakdown.

4. Wrap selection with color

Select text → right-click → "ANSI Color: Wrap Selection with Color" (or press Ctrl+Cmd+W on macOS / Ctrl+Alt+W on Windows/Linux) → pick a color. Codes are inserted on both sides using the language's preferred syntax. Multi-cursor supported.

5. Semantic color aliases

Instead of remembering colors, use names. Type an escape prefix (\x1b[) and your aliases appear pinned at the top of the list — e.g. error, warn, info. Accepting one wraps the selection point with a full sequence (cursor in the middle).

Five aliases ship as defaults out of the box. Override or extend them in settings (ansiColorHint.aliases), mapping a name to an SGR code (the parameter between [ and m):

"ansiColorHint.aliases": {
  "error":   "31",   // red      (default)
  "warn":    "33",   // yellow   (default)
  "info":    "36",   // cyan     (default)
  "success": "32",   // green    (default)
  "debug":   "90"    // gray     (default)
}

Common SGR codes: foreground 30–37 / bright 90–97, background 40–47, styles 1 bold, 3 italic, 4 underline; combine with ; (e.g. 1;31 = bold red). Full table: ANSI escape code — SGR parameters (Wikipedia); interactive tool: ansi.gabebanks.net.

6. Strip ANSI colors

Added colors while debugging but don't want them in the committed/shipped output? Two commands (Command Palette):

• ANSI Color: Strip ANSI Colors in File — removes every escape sequence in the current file, keeping the wrapped text
• ANSI Color: Strip ANSI Colors in Workspace — scans the whole project (skips node_modules, .git, out, dist, build, coverage, minified & map files), shows a confirmation with the affected count, and applies all edits as a single undoable operation

7. Mistake guard

Warns about common mistakes that silently break colors:

• Double backslash \\x1b[ — outputs literal text instead of the escape character
• Python raw strings r"\x1b[" — escapes are not interpreted

Colors & styles

• Foreground: standard 8 (30–37) + bright 8 (90–97)
• Background: standard 8 (40–47) + bright 8 (100–107)
• Styles: reset, bold, dim, italic, underline, blink, reverse, hidden, strikethrough, overline, and the matching "off" codes (22–29, 39, 49)
• Combined: bold × 8 colors, underline + red/blue
• Extended: 256-color (38;5;n) and true color (38;2;r;g;b) via picker

Configuration

Development

npm install
npm run compile

Press F5 to launch the Extension Development Host.

Packaging & install

npx @vscode/vsce package
code --install-extension ansi-color-hint-0.1.0.vsix

License

MIT © 测不准