捕捉rounded-huge拼写错误：@shadcn/lint的no-unknown-classes规则实战指南

捕捉rounded-huge拼写错误shadcn/lint的no-unknown-classes规则实战指南【免费下载链接】lintAn agent-first linter for Tailwind design systems. Write design system rules that agents can verify.项目地址: https://gitcode.com/gh_mirrors/lint3/lintTailwind 类名写错时不会报任何错误——rounded-huge、flex-cols、hovr:flex会静默失效页面样式悄悄丢失而你完全不知道发生了什么。shadcn/lint 的no-unknown-classes规则专为解决这个痛点而生它是 shadcn/lint 这个面向 Tailwind 设计系统的智能 linter 中最实用的规则之一能直接对照你项目里安装的 Tailwind v4、主题、自定义工具和插件判断每个类名是否真的能生成 CSS。发现拼写错误时它还会给出「Did you mean…?」式的纠正建议。为什么 Tailwind 类名拼写错误如此危险 ️在 CSS 的世界里拼错一个类名是「无声失败」没有报错浏览器和 Tailwind 都不会提醒你rounded-huge不存在没有样式该元素上不会生成任何 CSS视觉效果直接丢失排查困难往往要等到设计稿和页面比对时才意识到某个圆角、某条间距「凭空消失」了。对于手写代码的开发者这多是一个小坑对于 AI 编码智能体这更是灾难——智能体生成的类名拼写错误如果不被拦截错误会一路流进生产代码。这正是 shadcn/lint 的设计哲学让规则成为智能体可以验证的指令。当 no-unknown-classes 检测到未知类名时报错信息不止于「这里错了」而是直接告诉修复方向例如flex-cols is not a class this projects Tailwind knows, so no CSS is generated for it. Did you mean flex-col?并且这个纠正建议可以直接作为编辑器的一键替换建议应用智能体看到报错后一轮修正即可通过无需人工介入。rounded-huge 实战规则如何工作 来看一个典型的失败场景。假设你写了下面这样的代码div classNamehovr:flex tablet:flex rounded-huge /一行代码里有三个问题no-unknown-classes 会逐一指出类名诊断结果规则依据hovr:flex拼写错误建议改为hover:flex模糊匹配到相近的合法变体tablet:flex未知变体提示用custom-variant声明项目主题中没有该变体rounded-huge未知类名无任何 CSS 生成不存在相近候选如实报告规则的工作方式可以概括为三步加载你的主题规则读取components.json指向的主题 CSS连同其中的import、自定义utility、custom-variant和插件一起加载逐个提问 Tailwind对每个类名询问「你能生成 CSS 吗」——Tailwind 在独立 worker 线程中回答结果按主题缓存不拖慢检查速度给出可执行的建议找到相近的合法类名时建议替换拼写纠正用了编辑距离算法相邻字母颠倒只算一次改动所以itms-center能精准指向items-center没有相近候选时则引导你在主题中用utility声明它。关于「相近」的判定算法源码在 similar.ts其中「短词最多容错 1 个字符、长词最多 2 个」的预算设计让建议始终精准而不会乱指。规则完整实现见 no-unknown-classes.ts。三个常用选项allow、contracts、message ⚙️规则文档给出了清晰的选项说明见 no-unknown-classes.md上手时只需要记住三个allow放行来自主题之外样式表的类名比如编辑器组件引入的外部类editor-root。注意豁免不等于生成 CSS只放行应用真实加载的类contracts把外部类名限制在特定组件上。例如约定editor-root只能出现在Editor组件上用在普通div上仍会被报告message用你自己的话写报错{{suggestions}}、{{file}}等占位符可插入建议类名和主题文件路径让智能体拿到你的设计系统专属指令。官方建议的启用方式是先以warn级别开启把外部样式表产生的误报逐一加入allow再提升为error。这样既不会一上来就被大量警告淹没又能渐进式建立干净的类名白名单。主题加载失败时的兜底机制 如果你的主题 CSS 无法被加载比如import了不存在的文件规则会自动降级改用内置的 Tailwind 类名语法表加上项目中发现的utility名称和 CSS 类选择器继续检查同时输出一条警告。需要留意的是兜底模式检查得更宽松——它接受任意变体前缀也不会给出拼写建议比如hovr:flex可能悄悄通过。看到主题加载警告后先修复它再信任检查结果这是文档中明确给出的提醒。多项目中某个主题损坏时其他项目不受影响会各自使用自己的主题继续检查。与其他规则的黄金搭档 no-unknown-classes 很少单打独斗它和 rules.md 中列出的其他规则形成互补搭配no-raw-colorshovr:bg-primary变体拼错由本规则报告bg-primry色板 token 拼错则交给no-raw-colors后者能基于你的主题 token 给出更聪明的建议两者各管一段、互不越位搭配no-restyle本规则管「类名是否存在」no-restyle管「组件允不允许被这样改样式」rounded-huge在组件上未分类的类名甚至可能同时触发两者搭配require-static-classes像bg-${color}这类 linter 读不懂的动态类名需要后者先把它们暴露出来。总结给你的 Tailwind 项目装上拼写雷达 ✅回到标题的问题——rounded-huge这类拼写错误为什么必须被捕捉因为它静默、无声、且越到后期发现成本越高。no-unknown-classes 规则的价值在于三点零误杀以你项目里真实安装的 Tailwind 为准新语法、插件类名如 typography 插件的prose、自定义utility全部天然识别可执行的建议报错即修复方案对新手是学习路径对 AI 智能体是一轮修正确的闭环可定制的边界allow、contracts、自定义message让你精确划定「哪些类名合法」而不必改动组件代码。启用只需要一条配置把它加入 ESLint 或 Oxlint 的规则列表即可完整规则一览与共享选项说明见 rules.md各框架React / Vue / Svelte的接入细节参考 react.md、vue.md、svelte.md。给项目装上这个拼写雷达让每一个「无声失效」的类名都现出原形。【免费下载链接】lintAn agent-first linter for Tailwind design systems. Write design system rules that agents can verify.项目地址: https://gitcode.com/gh_mirrors/lint3/lint创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考