Show Comment VsCode
🚀 一个在 VS Code 资源管理器中展示文件和文件夹注释的扩展。
中文文档 · English Docs
项目概述
📢 Show Comment VsCode 会在资源管理器中提供一个“注释树”视图,自动收集工作区里的文件说明、目录说明和外部注释配置,并以树状结构展示出来。
它适合用于维护文档驱动的代码仓库,让目录结构、文件说明和注释信息在编辑器里更直观地同步呈现。
✨ 特性
- 🧭 支持三种注释来源,并按配置顺序依次解析
- 🗂️ 支持工作区根目录下的
.show-comment.tree.tsv
- 📝 支持读取文件头部注释
- 📘 支持读取目录下的
README.md 作为目录说明
- 🔎 支持按文件类型控制树中显示哪些文件
- 🙈 自动隐藏没有可见内容的目录
- ✂️ 树节点标题会截断显示,悬停可查看完整注释
- 🔄 提供刷新命令和打开设置入口
📦 安装
方法一:VS Code 扩展市场安装(✔️推荐)
方法二:离线安装
- 在 GitHub Releases 下载
.vsix 文件
- 在 VS Code 中按
Ctrl+Shift+P 打开命令面板
- 输入
Extensions: Install from VSIX...
- 选择下载的
.vsix 文件进行安装
⚙️ 配置
在 VS Code 设置中搜索 Show Comment,可以找到以下配置项:
showComment.enabled
showComment.maxDisplayLength
showComment.commentSourceOrder
- 注释来源优先级
- 默认值:
["external-tsv", "header-comment", "readme"]
showComment.exclude
- 需要忽略的路径段或 glob 模式
- 默认值:
[".git", "node_modules", "dist", "out", "target"]
showComment.showTooltip
showComment.fileVisibility
- 控制哪些文件类型显示在树中,默认全选常见源码与配置文件后缀
- 默认值:全选(
java、kt、kts、groovy、scala、c、cpp、py、go、rs、rb、html、vue、js、ts、php、sql、yaml 等)
🧩 注释来源
扩展默认按以下顺序解析注释:
- 工作区根目录下的
.show-comment.tree.tsv
- 文件头部注释
- 目录下的
README.md
每行使用下面的格式:
相对路径<TAB>说明文字
示例:
src 源码目录
src/components 组件目录
src/components/Button.vue 按钮组件
规则如下:
- 使用相对工作区根目录的路径
- 支持
. 或 ./ 表示根目录
- 空行会被忽略
- 以
# 开头的行会被忽略
- 同一路径重复定义时,后面的内容会覆盖前面的内容
文件头部注释
扩展会读取文件前 50 行,并识别以下注释形式:
/* ... */
<!-- ... -->
// ...
# ...
-- ...
规则如下:
- 只读取第一段连续注释块
- 会跳过 shebang 行,例如
#!/usr/bin/env node
- 如果文件头部没有可识别的注释块,则不会显示注释
目录 README.md
如果目录下存在 README.md,扩展会尝试提取目录说明:
- 优先使用第一个标题
- 如果没有标题,则使用第一段正文作为摘要
- Markdown 标记会被清理后再显示
🔧 开发
常用命令
pnpm install
pnpm compile
pnpm test
pnpm run package:vsix
目录结构
src/:扩展源码
dist/:编译输出
test/:测试脚本
.vscode/:本地调试配置
运行测试
pnpm test
打包发布
pnpm run package:vsix
打包产物会生成在项目根目录。
🙌 支持
如果你在使用过程中发现问题,或者有更适合的注释展示方式,欢迎提交 Issue 或 PR。
🛠️ 许可证
MIT
| |