WebStorm本身不生成代码质量报告，真正起作用的是ESLint、Prettier、TypeScript或Vitest等集成工具；IDE仅负责调用、高亮并可视化结果，需通过npx命令配合对应参数（如--format=html、--coverage）生成HTML等结构化报告，并确保工作目录为项目根目录。
WebStorm 本身不生成代码质量报告，真正起作用的是项目中集成的 ESLint、Prettier、TypeScript 或 Vitest 等工具；WebStorm 只负责调用它们、高亮问题、并把结果可视化。想看到可读性强、带交互和统计的报告，关键不是改 IDE 设置，而是让底层工具正确输出结构化数据，并让 WebStorm “看懂”它。
ESLint 报告：用 --format=html 生成可打开的页面
默认 eslint src/ 只在终端输出文本，不利于团队共享或历史比对。加参数就能导出 HTML 报告：
- 安装时确保是
--save-dev：npm install eslint --save-dev - 运行命令：
npx eslint src/ --ext .js,.ts,.vue --format=html --output-file=eslint-report.html -
--ext必须显式包含.vue，否则单文件组件里的 <script> 块不会被检查</script> - 生成的
eslint-report.html可直接双击用浏览器打开，支持折叠/搜索/跳转到源码行 - 如果报告里 Vue 模板语法（如
v-if）报错，说明没配eslint-plugin-vue或 parser 未设为vue-eslint-parser
TypeScript 类型检查报告：靠 tsc --noEmit --pretty + WebStorm 集成
WebStorm 内置 TypeScript 服务能实时提示类型错误，但“生成报告”需手动触发一次全量检查：
- 确保项目有
tsconfig.json，且"include"包含src/**/*和types/**/* - 在终端运行：
npx tsc --noEmit --pretty --declaration --skipLibCheck - WebStorm 默认会监听
tsc输出，错误会同步到编辑器左侧行号旁（红波浪线）和Problems工具窗口 - 若没反应，检查 Settings → Languages & Frameworks → TypeScript → TypeScript Service → “Use path mappings from tsconfig.json” 是否勾选
- 注意：不要加
--watch，它会阻塞命令，导致 WebStorm 无法捕获完整输出
Vitest 覆盖率报告：必须启用 coverage.enabled 并指定 reportsDirectory
WebStorm 的 Coverage 视图只显示“行是否执行过”，不提供函数/分支覆盖率或 HTML 报告——那得靠 Vitest 自己生成：
立即学习“前端免费学习笔记（深入）”；
- 在
vitest.config.ts中配置：export default defineConfig({ test: { coverage: { enabled: true, provider: 'v8', reportsDirectory: './coverage', reporter: ['html', 'lcov', 'text-summary'] } } }) - 运行
npx vitest run --coverage后，./coverage/index.html即为完整可视化报告 - WebStorm 的 Coverage 工具窗口（Ctrl+Alt+F6）和这个 HTML 报告是两套系统：前者用于快速定位未覆盖行，后者用于归档、CI 或评审
- 常见坑：
reportsDirectory路径必须是相对路径，不能以/开头，否则 Vitest 会静默失败
最易被忽略的一点：所有报告生成命令（ESLint、TSC、Vitest）都依赖当前工作目录是项目根目录。在 WebStorm 终端里如果误进了 src/ 子目录再执行，路径解析就会错，报告内容为空或缺失文件。每次敲命令前，先 pwd 确认一下。
