终端日志还在手抄 ANSI 颜色码么？这个 VS Code 插件让你像选主题一样配颜色

插件名称：ANSI Color Hint 适用于：VS Code / Cursor / Qoder 等一切基于 VS Code 的编辑器，搜索安装即可

一、痛点：手写 ANSI 颜色码有多痛苦

学习 Agent 开发时，终端会打印大量日志，默认全是白色不好分辨，所以需要给关键标识加上颜色。

但加了标识依然难区分------特别是启动流程、关键节点打印时，满屏都是 error、warning，普通前端开发又不常泡在终端里，没法像运维和后台同学那样快速定位。而终端文本没有 CSS 那样的样式系统，所以给不同日志加不同 ANSI 颜色区分，是一个很方便很实用的功能。

ANSI 转义序列的写法，懂的都懂：

javascript 复制代码

// 我只是想要一句红色的错误提示......
console.log('\x1b[31mERROR: something went wrong\x1b[0m');

问题随之而来：

31 是红、32 是绿、33 是黄......没人记得住这些数字，查表查得头皮发麻；
不同语言转义写法还不一样：JS 是 \x1b[，Python 是 \033[，Lua 是 \27[，PowerShell 是 ```e[``，手写极易出错；
写错了没有反馈，运行时才输出一堆 [31m 乱码；
调试完想清掉颜色，得手动逐个删除，还可能删错；
想用 256 色、真彩色（RGB）？光算 38;2;255;128;0 这种参数串就能劝退。

ANSI Color Hint 就是为解决这些问题而生的：在 VS Code 里写 ANSI 颜色，像用调色盘选色一样直观。

二、核心功能速览

1. 智能补全：输入前缀，颜色带色块列出来

在受支持的语言里，输入转义前缀（\x、\0、\e、\u 等）就会弹出补全列表：

每一项左侧是真实色块（不是文字描述），右侧是颜色名称；
支持继续输入按名称过滤：\xred 可以，开了中文界面后 \x红 也可以；
确认后自动插入 \x1b[35m█光标█\x1b[0m，光标停在中间，直接继续打字；
转义写法按文件语言自动适配，覆盖 20+ 种语言：

语言	自动适配的写法
JavaScript / TypeScript	`\x1b[`、`\u001b[`
Python	`\x1b[`、`\033[`
Shell	`\e[`、`\033[`
Java / Kotlin	`\u001b[`
Lua	`\27[`
Rust / Swift	`\u{1b}[`
PowerShell	```e[``

常用颜色自动置顶：按「使用频次 + 最近使用加权」排序，用得越多排得越靠前，越用越顺手；
列表底部还有 256-color... / true-color... 两个入口，可以进入扩展色选择器（详见第 5 节）。

2. 行内色块预览：代码里直接看到颜色

代码中已有的 ANSI 颜色码前，会渲染一个对应颜色的 ■ 色块，一眼就能看出每段输出是什么颜色，不用再脑补。

3. 悬浮预览：看最终效果，逐码拆解

鼠标悬停在 ANSI 序列（如 \x1b[1;4;31m）上，会弹出最终渲染效果的预览------粗体 + 下划线 + 红色一目了然，同时给出逐项样式说明。

4. 一键包裹选中文字：选完文字选颜色

选中文字 → 右键 → ANSI Color: Wrap Selection with Color ，选一个颜色，文字就被自动包上颜色码，支持多光标。

快捷键：macOS 是 Ctrl+Cmd+W，Windows/Linux 是 Ctrl+Alt+W。

选色面板按「前景色 / 背景色 / 样式 / 组合」分组，每一项都带色块和对应代码，扩展色也在这里。

5. 扩展色：256 色与真彩色（RGB）可视化选择

基础 16 色不够用？补全列表里的 256-color... 和 true-color... 入口打开扩展色选择器：

常用颜色名列表（红、橙、粉、天蓝......每一项都是真实色块），按「前景色 / 背景色」分组；
也可以直接输入 #RRGGBB 或 r,g,b 自定义；256 色还支持直接输 0-255 色号；
扩展色色块可点击 ：代码里的 256 色 / 真彩色代码前会渲染一个可点击色块，点一下弹出系统调色盘，可视化调色，选完自动把代码改写为「精确的真彩色形式」或「最近的 256 色号」，两个选项都有。基础 16 色仍是只读 ■。

6. 颜色语义别名：不用记颜色，用语义

不用记 31 是红，直接用语义名。输入转义前缀后，你的别名会置顶显示：error、warn、info......选中即插入完整包裹序列，光标停在中间。

开箱预置五个别名，对应主流终端/日志库配色：

jsonc 复制代码

"ansiColorHint.aliases": {
  "error":   "31",   // 红色（默认）
  "warn":    "33",   // 黄色（默认）
  "info":    "36",   // 青色（默认）
  "success": "32",   // 绿色（默认）
  "debug":   "90"    // 灰色（默认）
}

完全可覆盖、可扩展，映射到任意 SGR 码（如 "1;31" = 粗体红）。选色面板里别名也以 红色 (error) 的形式置顶出现，被别名占用的颜色码自动去重。

7. 一键清除 ANSI 颜色：调试完，说删就删

调试时加了一堆颜色，提交/发布时想全部清掉？两个命令：

ANSI Color: Strip ANSI Colors in File ------ 清除当前文件所有转义序列，保留被包裹的文字；
ANSI Color: Strip ANSI Colors in Workspace ------ 扫描整个项目（自动跳过 node_modules、.git、out、dist、build、coverage、压缩与 map 文件），弹出带影响数量的确认框 ，以一次可撤销的操作提交所有修改，改完还能一键保存全部。

8. 语言防错：写错之前先提醒

对两类会静默破坏颜色的常见写法给出 Problems 面板警告：

双反斜杠 \\x1b[ ------ 输出的是字面文本而不是转义符，颜色不会生效；
Python 原始字符串 r"\x1b[" ------ 原始串不解释转义序列，颜色同样不生效。

（Shell/Makefile/Dockerfile 这类「多层解释」场景会自动豁免，不误报。）

三、支持的颜色与样式

前景色：标准 8 色（30--37）+ 高亮 8 色（90--97）
背景色：标准 8 色（40--47）+ 高亮 8 色（100--107）
样式：重置、粗体、暗淡、斜体、下划线、闪烁、反色、隐藏、删除线、上划线，以及对应的「关闭」码（22--29、39、49）
组合：粗体 × 8 色、下划线 + 红/蓝等常用组合开箱即用
扩展：256 色（38;5;n）与真彩色（38;2;r;g;b），通过选择器可视化插入

四、配置项一览

配置	默认值	说明
`ansiColorHint.language`	`en`	界面语言：`en` 或 `zh`
`ansiColorHint.showColorBlocks`	`true`	是否显示行内色块预览
`ansiColorHint.aliases`	`{error:31, warn:33, info:36, success:32, debug:90}`	语义名 → SGR 码映射

五、安装与使用

方式一：Marketplace 搜索安装

在 VS Code 扩展市场搜索 ANSI Color Hint 即可安装。

方式二：命令行安装 VSIX

bash 复制代码

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

安装后无需任何配置，输入转义前缀即可体验；想要中文界面，把 ansiColorHint.language 设为 zh。

六、结语

ANSI Color Hint 把「查表、手写、脑补颜色」三个环节全部可视化：补全带色块、代码里有色块、悬停看效果、点色块改颜色，还有语义别名和一键清除兜底。适合所有写 CLI、日志库、脚手架、终端工具的同学。

如果你也经常和终端颜色打交道，不妨装上试试。欢迎 Star ⭐ 和提 Issue：github.com/Bluestar123...

有任何使用问题随时反馈，我会及时修复处理