wj100 前端质量与安全
前端质量保障的四大支柱：安全防护、错误监控、自动化流水线、无障碍合规。
快速健康检查
对任意前端项目执行质量快速扫描：
# 1. 依赖安全审计
pnpm audit --production
# 2. 代码规范检查
npx eslint . --ext .ts,.tsx,.vue,.js
# 3. 无障碍检查（需安装 axe-core CLI）
npx @axe-core/cli http://localhost:3000
# 4. Lighthouse 综合审计
npx lighthouse http://localhost:3000 --output html --output-path report.html
场景路由
根据具体需求选择对应参考文档：
| 场景 | 参考文档 | 典型触发 |
|---|---|---|
| XSS 防御、CSP 配置、依赖漏洞 | security.md | "加固安全"、"配置 CSP"、"审计依赖" |
| Sentry 接入、自研监控、Error Boundary | error-monitoring.md | "接入 Sentry"、"错误上报"、"监控" |
| CI/CD 搭建、Preview Deploy、Lighthouse CI | cicd-pipeline.md | "搭建流水线"、"自动部署"、"CI" |
| WCAG 合规、ARIA 标注、键盘导航 | accessibility.md | "无障碍"、"a11y"、"屏幕阅读器" |
优先级建议
按风险等级排序处理：
- P0 安全漏洞 → 立即修复（XSS、依赖高危漏洞）
- P1 错误监控 → 上线前必须具备（生产环境可观测性）
- P2 CI/CD → 提升团队效率（自动化构建、测试、部署）
- P3 无障碍 → 持续改进（合规要求、用户体验）
组合使用
- 安全 + CI/CD：在流水线中集成
pnpm audit、依赖检查 - 监控 + 安全：Sentry 中配置安全相关告警规则
- a11y + CI/CD：在 PR 检查中集成 axe-core 自动化测试