Vue项目3步接入@shadcn/lint：让AI Agent乖乖遵守你的设计规范

Vue项目3步接入shadcn/lint让AI Agent乖乖遵守你的设计规范【免费下载链接】lintAn agent-first linter for Tailwind design systems. Write design system rules that agents can verify.项目地址: https://gitcode.com/gh_mirrors/lint3/lint如果你的 Vue 项目由 AI Agent 参与开发它写出来的 UI 代码往往能跑但难看p-[13px]、bg-pink-500、rounded-huge随便往组件上贴设计规范全靠自觉。shadcn/lint就是为了解决这个问题而生的 agent-first linter你用配置文件声明 Tailwind 设计系统里允许什么、替代方案是什么当 Agent 违反规则时它报出的错误不仅说明哪里错了还会基于你项目里真实的组件、变体和主题告诉 Agent 该怎么改。本文用 3 步带你完成 Vue 项目接入无需重写任何现有组件也无需使用 shadcn/uiTailwind v4 即可。第一步安装 shadcn/lint 和 Vue 解析器要求 Node.js 20.19、ESLint 9.30。Vue 模板template里的class、:class、:style需要在 ESLint 下配合vue-eslint-parser才能被读取所以依赖一共 4 个npm install -D shadcn/lint eslint typescript-eslint/parser vue-eslint-parser 如果你的项目已经在用eslint-plugin-vue保留它的 parser 配置即可只需在后面追加本插件。第二步在 eslint.config.mjs 注册插件在项目根目录创建或编辑eslint.config.mjs为**/*.vue添加一个配置块import { plugin as shadcn } from shadcn/lint import tsParser from typescript-eslint/parser import { defineConfig } from eslint/config import vueParser from vue-eslint-parser export default defineConfig([ { files: [**/*.vue], languageOptions: { parser: vueParser, parserOptions: { parser: tsParser }, }, plugins: { shadcn }, rules: { shadcn/no-arbitrary-values: error, }, }, ])运行npx eslint .看到规则生效即说明配置成功。完整的 Vue 配置示例见 docs/vue.md官方还准备了 SETUP.md 供 Agent 自行读取并帮你完成安装。第三步启用规则让 AI Agent 自动遵守3.1 选择你的规则。shadcn/lint 内置 6 条针对设计规范打造的规则按需开启规则拦截什么典型违规no-restyle用 className 篡改设计组件外观p-4直接贴在 Button 上no-raw-colors绕过主题的原始色值bg-pink-500no-arbitrary-values任意值写法p-[13px]no-inline-styles内联样式和stylestylecolor: redno-unknown-classesTailwind 生成不了的神秘类rounded-hugerequire-static-classeslinter 读不懂的动态类bg-${color}各规则的详细说明在 docs/rules/ 目录下都有专门文档。3.2 把 lint 交给 Agent。在package.json中加一个lint脚本然后在项目的AGENTS.md里写上一句话After making changes, run npm run lint and fix all errors.从此 Agent 每次改完代码都会自己跑 lint、自己读错误、按提示修复——错误信息本身就是设计规范说明书。为什么 Agent 一听就懂诊断示例普通工具报错只会说padding 不允许而 shadcn/lint 的错误会基于你的设计系统给出完整指引。比如某个 Button 拥有sm、lg两个尺寸Agent 写出classp-4后看到的是p-4 is not allowed on Button: Button owns its spacing. Use a variant (sm, lg) for size. Use margin for layout or a gap on the parent for space around it. Add a size in components/ui/button.vue only if the design explicitly calls for one.它不仅指出违规还告诉 Agent该用哪个变体、间距应该放到哪里、什么情况下才允许改组件源码。官方评测显示150 次任务运行中几乎所有任务在一轮纠错后就达到零违规修复成本比纯文字规则降低 10%~48%。方法论文档见 docs/evals.md。在 Vue 项目中classp-4、:class{ bg-primary: active }、:classcn(base, props.class)、v-bind{ class }甚至 SVG 的fill属性都能被识别模板变量还会自动追踪到script setup解析——覆盖范围详见 docs/vue.md 的 What is read 表格。进阶给不同组件定不同规矩Contracts规则支持contracts为每个组件单独定策略。例如CardTitle 允许改字体大小但保留字重CardContent 允许改内边距但保留排版shadcn/no-restyle: [error, { allow: [layout], contracts: [ { pattern: ^CardTitle$, allow: [layout, typography], deny: [font-*] }, { pattern: ^CardContent$, allow: [layout, spacing] }, ], }]你还可以用message把错误文案改写成团队自己的设计语言支持{{component}}、{{sizes}}等占位符。更多玩法见 docs/design-systems.md。常见疑问速答 没有 components.json 能用吗可以。linter 会自动查找导入 Tailwind 的样式表作为主题通过settings.shadcn.ui或componentImports告诉它你的组件在哪参考 docs/how-it-works.md。 存量代码违规太多怎么办先用warn级别起步修掉高频违规后升级为error还能用--max-warnings设上限防止反弹。渐进式落地方案见 docs/adoption.md。 Oxlint 可以用吗可以但 Oxlint 只能读.vue文件的script块读不到模板里的 class。想检查模板用 ESLint 跑 Vue 文件即可两者可共存。 规则实现源码在哪看所有规则都位于 packages/lint/src/rules/分类器判断text-sm是排版还是颜色在 packages/lint/src/grammar/categories.ts。小结步骤你做了什么得到什么1️⃣ 安装4 个依赖包可用的 lint 插件2️⃣ 注册一段 eslint.config.mjs 配置能读懂 Vue 模板的检查能力3️⃣ 启用挑规则 AGENTS.md 一句话每次自动修复都守住设计规范的 Agentshadcn/lint 的核心价值在于它不改你的组件 API只是把设计系统怎么用变成机器可执行、Agent 可理解的规则。配置一次之后无论哪个 Agent、哪次会话写出的 UI 都长一个样。完整规则选项查阅 docs/rules.md项目总览见 README.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），仅供参考