JavaScript项目中按组件查看代码覆盖率需配置工具识别组件边界并聚合统计：Jest/Vitest/nyc通过路径模式匹配组件目录或命名约定，HTML报告支持目录树导航与正则过滤；自定义reporter可跨目录按业务域归类；VS Code插件、Vitest UI和Chrome DevTools支持单组件实时聚焦分析。
JavaScript 项目中分类查看各组件的代码覆盖率，关键在于让覆盖率工具识别“组件”边界，并按文件路径、模块名或目录结构聚合统计，而非只看全局总值。这能快速定位哪些组件覆盖充分、哪些长期被忽略。
按源码目录结构分组查看
多数前端项目（React/Vue）组件集中在 src/components/、src/views/ 或 packages/ui/ 等目录。只需在覆盖率配置中明确指定路径模式，报告就会自动按目录层级归类：
- Jest：在 jest.config.js 中设置
collectCoverageFrom，例如：['src/components/**/*.{js,jsx,ts,tsx}', 'src/views/**/*.{js,jsx,ts,tsx}'] - Vitest：在 vite.config.ts 的
coverage.include中写：include: ['src/components/**', 'src/views/**'] - 生成 HTML 报告后，左侧导航栏会以文件夹树形式展示组件目录，点击 components/Button 即可单独查看该组件及其子组件的覆盖率明细
按组件命名约定过滤统计
若项目统一使用 Button.vue、Modal.jsx、Header.tsx 等命名，可用正则或 glob 精确提取组件文件：
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
- nyc（istanbul）配置中加：
"nyc": { "include": ["src/**/*.{vue,jsx,tsx}"], "exclude": ["**/*.test.*", "**/index.*"] } - 运行
npx nyc --reporter=html npm test后，HTML 报告首页表格默认按文件路径排序，组件文件集中排布，一眼可识别 Avatar 覆盖率 42%、DataTable 覆盖率 91% - 终端文本报告中也可用
grep components快速筛选：npx jest --coverage --coverageReporters=text | grep components
用自定义 reporter 按业务域聚合
当组件分散在多个包或目录（如 Monorepo 中 packages/core-ui、packages/legacy-forms），需跨路径归类。此时可编写轻量 reporter，按前缀分组：
- 创建 coverage-reporter.js，读取
coverage/coverage-final.json - 遍历所有文件路径，按
/components/、/hooks/、/utils/等关键词打标签 - 汇总计算每类的平均语句/分支覆盖率，输出 Markdown 表格或 JSON
- 配合脚本一键执行：
node coverage-reporter.js && cat coverage/by-category.md
在开发工具中直接聚焦单个组件
无需切换报告页面，编辑器和浏览器内即可锁定当前组件：
- VS Code 安装 Coverage Gutters 插件，打开
Button.jsx时，行号旁实时显示 ✔️（已覆盖）或 ❌（未覆盖），保存即刷新 - Vitest UI（
http://localhost:5173/__vitest__/）中点击 “Coverage” 标签页，顶部搜索框输入button，列表仅保留匹配组件，支持排序和展开子依赖 - Chrome DevTools Coverage 面板中录制用户操作后，筛选 JS 文件名含
modal或dialog，直接查看该组件在真实交互中的字节级执行率
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
