Svelte用户看过来shadcn/lint配置指南与模板Lint踩坑全解【免费下载链接】lintAn agent-first linter for Tailwind design systems. Write design system rules that agents can verify.项目地址: https://gitcode.com/gh_mirrors/lint3/lintshadcn/lint是一款专为 Tailwind 设计系统打造的面向 AI 代理的 Lint 工具支持 React、Svelte 和 Vue。对 Svelte 用户来说它可以检查.svelte模板里的class、style、class:name指令等写法并在报错时直接给出基于你组件变体和主题的修复建议。下面这份指南带你从零配置并避开模板检查中最常见的几个坑。先认识一下shadcn/lint 能帮你抓什么与普通 Lint 不同它的错误信息自带设计系统语境。比如你给Button写了classp-4它不会只说不允许而是告诉代理Button 自己管间距应该用size变体或者用 margin 控制外围空间。它内置 6 条核心规则全部支持 Svelte 模板规则检查内容no-restyle用 className 给设计系统组件换皮肤no-raw-colors裸调色板颜色如bg-pink-500no-arbitrary-values任意值如p-[13px]no-inline-styles内联样式和style元素no-unknown-classesTailwind 生成不了的类名require-static-classesLint 读不懂的动态 class 值规则细节见 docs/rules.md工作原理见 docs/how-it-works.md。Svelte 项目最快配置方法ESLint前置要求Node.js 20.19ESLint 9.30。 第一步安装依赖npm install -D shadcn/lint eslint typescript-eslint/parser svelte-eslint-parser 第二步创建eslint.config.mjs。如果你的项目已用eslint-plugin-svelte保留它的 parser 配置把下面的 plugin 和 rules 加到同一个 block 即可import { plugin as shadcn } from shadcn/lint import tsParser from typescript-eslint/parser import { defineConfig } from eslint/config import svelteParser from svelte-eslint-parser export default defineConfig([ { files: [**/*.svelte], languageOptions: { parser: svelteParser, parserOptions: { parser: tsParser }, }, plugins: { shadcn }, rules: { shadcn/no-restyle: [error, { allow: [layout] }], }, }, ])运行npx eslint .就生效了。Svelte 模板由svelte-eslint-parser解析官方文档见 docs/svelte.md。 小贴士给.ts文件再加一个单独用tsParser的 block组件外的tv、cn调用也能被检查到。踩坑全解Svelte 模板 Lint 的 5 个高频问题坑一用 Oxlint 检查模板里却什么都查不到这是最典型的坑。Oxlint 的 JS 插件 API 目前只给到script块不解析 Svelte 模板标记所以模板里的class...它根本看不到这是 Oxlint 的能力限制官方会在运行时打印一次警告说明。✅ 正确姿势模板检查走 ESLintOxlint 可以继续负责其他文件。如果只想让 Oxlint 跳过.svelte避免告警在配置里加{ ignorePatterns: [**/*.svelte] }坑二组件名按文件名算不按导入别名算card-title.svelte就是CardTitle不管你在模板里写成Card.Title还是Title。这意味着你在 React 项目里写好的 contract 可以原样搬过来contracts: [{ pattern: ^CardTitle$, allow: [layout, typography] }]变体tv、cva从组件自己的script和script module里读取$props()接收的class会被当作组件自身输入不误报。坑三$lib别名解析依赖 tsconfig$lib别名通过 SvelteKit 生成的tsconfig.json解析。注意在第一次运行svelte-kit sync之前会回退到src/lib。如果新项目的组件识别异常先跑一次 sync。坑四改了组件/主题Lint 结果纹丝不动ESLint 的--cache会跳过未改动文件但那些文件用了你改过的组件/主题。排查时先不带缓存跑一遍见 docs/troubleshooting.mdnpx eslint .编辑器集成场景下直接重启 lint 进程。另外components.json指向的主题文件路径错误时主题无法加载no-unknown-classes会退化为弱化检查——看到警告先修它别依赖看似干净的结果。坑五style块不在检查范围.svelte里的style块是纯 CSSshadcn/lint 不读它请交给 CSS 类 Lint 工具svelte:element这类动态元素也没有已知组件身份no-restyle不适用但颜色令牌规则仍会检查其 class。Svelte 模板里哪些写法能被读到模板覆盖面很全基本不用绕开完整表格见 docs/svelte.md静态串classp-4、文本表达式混合classp-4 {active ? a : b}数组 / 对象 /cn()辅助函数调用指令写法class:bg-primary{active}、style:color{tone}展开{...{ class: p-4 }}模板变量会跨一跳回溯到script里的值跨文件的 wrapper 组件把class或{...rest}转发给设计系统组件也会继承目标组件的契约。仓库里的完整 Svelte 示例可直接参考 packages/lint/test/fixtures/svelte-project/例如其中button.svelte用tv定义了variant/size变体报错时就会提示可用尺寸。没有 components.json也能用不装 shadcn/ui 也没关系。没有components.json时主题自动取导入 Tailwind 的那份样式表组件则通过正则配置识别settings: { shadcn: { componentImports: [^\\$lib/components/], }, }最后一步让 AI 代理替你修配置完成后把 lint 命令加进package.json脚本再在AGENTS.md里写上一句After making changes, runnpm run lintand fix all errors代理改完代码就会自动跑检查并修掉设计系统违规。整套自动化思路可参考 SETUP.md。延伸阅读Svelte 完整文档docs/svelte.md规则与配置选项docs/rules.md常见问题排查docs/troubleshooting.md工作原理主题、变体、wrapper 追踪docs/how-it-works.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），仅供参考