markuplint HTML 检查器

解决什么问题

HTML 标记语言看似简单，实则暗藏多个隐性陷阱：不同项目可能混合使用 HTML、JSX、Vue 等模板语法，导致 lint 规则难以统一；手写或自动化生成的标记常出现可访问性缺失（如未关联 label 的表单控件）、标签嵌套错误（如 p 标签内嵌套 div）等问题，影响页面可用性与 SEO 表现；团队协作时若缺乏统一的规范检查机制，代码审查会反复纠结于基础格式问题，拖慢迭代节奏。

技能如何工作

核心能力

该技能基于 可插拔解析器架构 构建，核心能力包括：

• 支持解析多种标记语言：通过内置解析器覆盖 HTML、JSX、Vue、Svelte、Astro 等常见模板语法，同时支持扩展自定义解析器
• 规则体系分层设计：内置三类核心规则——可访问性规则（如 ARIA 属性完整性、屏幕阅读器兼容性）、规范遵从规则（如标签闭合、属性排序）、最佳实践规则（如语义化标签使用、性能优化建议）
• 跨语言一致性检查：同一规则可跨不同模板语法生效，例如img 标签的alt 属性检查在 HTML 和 JSX 中逻辑一致

关键步骤

1. 标记解析：将输入的标记文本解析为抽象语法树（AST），处理不同语言的语法差异（如 Vue 的模板指令、JSX 的标签属性）
2. 规则遍历：基于 AST 节点类型（如标签、属性、文本节点）匹配适用规则，支持按文件类型、路径等条件过滤规则
3. 问题定位：输出具体问题位置（如行号、列号）与修复建议，部分规则提供自动化修复功能

适用边界与注意点

• 依赖上游项目更新：解析器规则与语言支持依赖上游 markuplint 项目的迭代，自定义解析器需自行维护语法适配
• 非标准语法处理：对业务自定义标签（如<app-xxx>）或非规范语法结构，可能需要额外配置规则白名单
• 团队配置成本：建议结合项目需求裁剪规则集，避免因过度严格的规则导致开发效率下降

该技能适合需要在多语言模板环境中建立统一 HTML 规范的团队，尤其推荐用于前端组件库开发、跨端页面开发等场景，帮助开发者在编码阶段提前发现并解决标记问题。