VSCode的Better Comments：编写更具可读性的注释_网络技术

Better Comments 扩展通过颜色、图标和样式区分注释语义，提升可读性：一、安装扩展；二、启用默认规则（TODO蓝、FIXME红等）；三、自定义关键字与颜色；四、添加图标及整行高亮；五、禁用冲突扩展。

如果您在使用 VSCode 编写代码时发现注释缺乏视觉层次、难以快速识别优先级或意图，则可能是由于注释样式统一、缺少语义区分。Better Comments 扩展通过为不同类型的注释赋予颜色和图标，显著提升注释的可读性与信息密度。以下是配置与使用该扩展的具体步骤：

本文运行环境：MacBook Air，macOS Sequoia。

一、安装 Better Comments 扩展

该步骤使 VSCode 获得语法高亮支持，能识别并渲染特定前缀的注释为对应颜色。安装后无需重启即可生效，但部分主题可能需重载窗口以正确显示样式。

1、打开 VSCode，点击左侧活动栏的扩展图标（四个方块组成的图标）。

2、在扩展市场搜索框中输入 Better Comments。

3、在搜索结果中找到作者为 aaron-bond 的扩展，点击“安装”按钮。

4、安装完成后，右下角会出现“Extension installed successfully”提示。

二、启用默认注释规则

扩展自带预设规则，可直接识别常见注释标记（如 TODO、FIXME、NOTE 等），无需额外配置即可获得基础高亮效果。

1、新建或打开任意支持语法高亮的文件（如 .js、.py 或 .ts）。

2、在代码中输入 // TODO: 重构用户登录逻辑，观察其自动变为蓝色高亮。

3、输入 // FIXME: 时间格式化存在时区错误，确认其显示为红色高亮。

4、输入 // NOTE: 此函数不处理空数组边界情况，验证其呈现为青色高亮。

三、自定义注释关键字与颜色

当项目需要标识内部特有标记（如 REVIEW、HACK、IDEA）时，可通过修改 settings.json 添加专属规则，实现语义扩展与团队协作对齐。

1、按下 Cmd + ,（macOS）打开设置界面，点击右上角“打开设置（JSON）”图标。

2、在 settings.json 文件中添加 better-comments.tags 配置项。

3、插入如下 JSON 片段：

"better-comments.tags": [ { "tag": "REVIEW", "color": "#FF8C00", "strikethrough": false }, { "tag": "HACK", "color": "#CC0066", "strikethrough": true } ]

4、保存文件，重新打开代码文件，确认 // REVIEW: 需交叉验证接口响应 显示为橙色，// HACK: 临时绕过签名校验 显示为紫红色且带删除线。

四、调整注释图标与字体样式

通过修改扩展配置，可为注释前缀添加 Unicode 图标（如 ✅、⚠️）并控制是否加粗，进一步强化视觉引导效果。

1、在 settings.json 中定位到 better-comments.highlightWholeLine 配置项。

2、将其值设为 true，使整行注释背景高亮而非仅文字。

3、添加 better-comments.useCustomIcon 并设为 true。

4、在 better-comments.tags 数组中为某项新增 "icon": "⚠️" 字段，例如为 FIXME 添加警告图标。

五、禁用冲突的其他注释扩展

若已安装其他注释类扩展（如 Comment Anchors、Todo Tree），可能因样式覆盖导致 Better Comments 高亮失效或图标错位。

1、点击扩展视图，依次检查已启用的扩展列表中是否存在同类功能插件。

2、对名称含 Todo、Comment、Anchor 的扩展逐一右键选择“禁用”。

3、关闭并重新打开当前工作区，确保 Better Comments 的颜色与图标正常渲染。

4、在命令面板（Cmd + Shift + P）中执行 Developer: Toggle Developer Tools，查看 Console 是否报出与 better-comments 相关的样式加载错误。

# vscode # js # json # idea # macbook # mac # ai # macos # cos # 接口

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】