讲师中心 微信公众号
AI工具推荐 视频效率加速

VSCode的Better Comments:编写更具可读性的注释

阿宇小哥_8469

阿宇小哥_8469

发布时间:2025-12-29 13:26:03

|

630人浏览过

|

来源于php中文网

原创

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

vscode的better comments:编写更具可读性的注释

如果您在使用 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)”图标。

jm-jsjkxyjs02-zlm-405
jm-jsjkxyjs02-zlm-405

使用约定式提交(Conventional Commits)生成标准化的 Git 提交信息。适用于以下场景: (1) 暂存更改时需要提交信息; (2) 审查 diff 时希望获得结构化摘要; (3) 编写 PR 描述或变更日志(changelog)条目; (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff,并生成按类型(type)划分范围的提交信息。

下载

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 相关的样式加载错误。

热门AI工具

更多
Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

花生AI
花生AI Hot

一款AI视频创作工具,主要用于B站推出的AI视频创作工具,适合需要提升相关任务效率的用户。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2275

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3662

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1216

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

4239

2025.09.10

硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

3228

2023.10.19

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

5309

2025.10.17

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

3869

2025.12.29

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

486

2026.01.19

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

20

2026.11.05

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn