VSCode原生不支持代码质量大屏，所有“大屏”均为第三方插件+外部服务或本地脚本模拟；可借助eslint+终端轮播、SonarLint问题面板、Live Server+node脚本生成HTML指标页实现轻量级实时展示。
VSCode 里根本没法直接开“代码质量大屏”
VSCode 本身不提供类似 Dashboard 的实时可视化大屏功能，所有所谓“大屏”都是靠第三方插件 + 外部服务（如 SonarQube、自建指标聚合服务）或本地脚本渲染图表拼凑出来的。你看到的“实时展示”，实际是：终端日志轮播、状态栏数字跳动、侧边栏树状列表刷新，或者用 Live Server 打开一个本地 HTML 页面来模拟大屏效果。
用 eslint + terminal 模拟轻量级实时指标流
适合中小型项目快速感知趋势，不依赖外部服务：
- 在项目根目录添加
.eslintrc.js，确保启用no-console、no-unused-vars等可量化规则 - 写一个简单脚本
watch-lint.sh（macOS/Linux）或watch-lint.bat（Windows），每 5 秒执行：npx eslint . --quiet --format json | jq '.length'（需装jq）统计错误总数 - 在 VSCode 内置终端中运行该脚本，配合
clear和date实现滚动刷新效果 - 注意：
--quiet会忽略 warning，如需统计 warning，改用--format compact并 grep 匹配Warning
SonarLint 插件能显示哪些“实时指标”？
它只在编辑器内标出问题位置和类型，不输出聚合数值。但你可以间接获取部分指标：
- 打开命令面板（
Ctrl+Shift+P），运行SonarLint: Show Issues，它会在“问题”面板列出全部 issue，按严重性分组（Blocker、Critical、Major） - 右键点击某类问题 → “Copy as Markdown”，粘贴到临时文档中可手动统计数量
- 若已连接 SonarQube 服务器，可在浏览器中访问
http://your-sonarqube-url/dashboard?id=your-project-key查看真正的仪表盘（圈复杂度、重复率、覆盖率等） - VSCode 中无法直接看到“可维护性指数”或“技术债务估算”，这些字段只存在于 SonarQube Web UI
真正接近“大屏”的方案：用 Live Server + node 脚本生成 HTML 指标页
这是目前最可控、可定制、且不依赖云服务的做法：
- 安装 VSCode 扩展
Live Server - 写一个
generate-metrics.js：调用eslint --format json和jscpd --reporter html（检测重复代码）生成数据，再用fs.writeFileSync输出带<canvas>的 HTML - 把生成的 HTML 放进项目
dist/目录，右键 → “Open with Live Server” - 关键限制：
vscode.workspace.rootPathAPI 已废弃，脚本必须运行在 Node 环境而非 VSCode 插件上下文；不能直接读取“代码指标窗口”里的数据（那是 Visual Studio 功能，VSCode 没有该窗口）
别指望 VSCode 原生支持拖拽式大屏配置——它的定位是编辑器，不是监控平台。所有“实时”都受限于文件系统监听延迟、linter 执行耗时和 VSCode 自身扩展 API 的能力边界。最常被忽略的一点是：指标采集和展示必须解耦，否则编辑器卡顿、崩溃风险陡增。
