如何配置 UnoCSS autocomplete 为自定义规则提供类名提示【免费下载链接】unocssThe instant on-demand atomic CSS engine.项目地址: https://gitcode.com/GitHub_Trending/un/unocss在 UnoCSS 中写自定义规则时编辑器里的智能提示不会自动覆盖你新写的类名静态规则不需要额外配置但基于正则的动态规则必须显式声明 autocomplete 模板提示功能才会在 VS Code 扩展 和官方 playground 中生效。本文按“声明规则 → 写提示模板 → 验证候选列表”的顺序给出完整的配置路径参考 autocomplete 工具文档 与 autocomplete 配置文档。静态规则无需配置即可获得提示如果你的自定义规则是静态规则提示开箱即用不需要任何 autocomplete 配置rules: [ [flex, { display: flex }] ]只有动态规则matcher 是RegExp、body 是函数的规则需要下一步的显式模板。给动态规则添加 autocomplete 模板动态规则需要向规则传入一个额外的meta对象在其中指定autocomplete模板。以 工具文档 中的示例为准rules: [ [ /^m-(\d)$/, ([, d]) ({ margin: ${d / 4}rem }), { autocomplete: m-num }, // -- this ], ]配置完成后输入m-时提示系统会按模板展开候选。文档给出的示例结果是输入m-建议列表为m-1、m-2、m-3…文档示例。理解模板的三种 DSL 语法模板使用一套简单的 DSL文档 中定义了三种写法语法含义(...\|...)逻辑 OR 组用\|分隔。某组匹配时组内值作为候选项...内置 shorthand目前支持num、percent、directions$...theme 推断例如$colors会列出主题colors对象的所有属性对应的文档示例示例结果模板(border|b)-(solid|dashed|dotted|double|hidden|none)输入b-do建议b-dotted、b-double模板text-$colors输入text-r建议text-red、text-rose…一条规则可以配多个模板数组形式如[(border|b)-num, (border|b)-directions-num]输入b-时建议b-x、b-y、b-1、b-2…输入b-x-时建议b-x-1、b-x-2…。写模板时的选择依据候选值是有限的固定集合如边框样式就用 OR 组候选是数字就用num候选来自 theme 中的某个对象如颜色就用$colors这类 theme 推断。在配置中全局自定义 templates 与 shorthands除了逐条规则声明还可以在全局配置中统一提供 autocomplete 模板、自定义 shorthand 以及 extractor。配置文档 给出的完整形态autocomplete: { templates: [ // theme inferring bg-$color/opacity, // short hands text-font-size, // logic OR groups (b|border)-(solid|dashed|dotted|double|hidden|none), // constants w-half, ], shorthands: { // equal to opacity: (0|10|20|30|40|50|60|70|90|100) opacity: Array.from({ length: 11 }, (_, i) i * 10), font-size: (xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl), // override built-in short hands num: (0|1|2|3|4|5|6|7|8|9), }, extractors: [ // ...extractors ], }三个字段的作用均出自该文档templates用同一套 DSL 声明的 autocomplete 建议模板shorthandsshorthand 名到模板的映射。值为Array时会被视为逻辑 OR 组同名 key如num会覆盖内置 shorthandextractors拾取可能的类名并把类名风格的建议转换为正确格式。文档指向 attributify autocomplete extractor 的实现 作为参考实现。如果你的模板里使用了font-size这类自定义 shorthand必须在shorthands中先定义它模板才能解析出候选值。验证在 VS Code 扩展或 playground 中查看提示autocomplete 功能内嵌于 playground 和 VS Code 扩展验证方式就是在这两处输入类名前缀观察建议列表确认项目根目录存在独立的uno.config.ts配置文件配置文档 推荐该做法UnoCSS 默认查找根目录下的uno.config.{js,ts,mjs,mts}或unocss.config.{js,ts,mjs,mts}。VS Code 扩展会自动查找项目中的 UnoCSS 配置找不到配置时扩展会被禁用所以没有提示时先确认配置文件能被找到在编辑器中输入你动态规则的前缀如m-或b-do核对建议列表是否符合模板展开的候选对照上一节文档示例可选扩展提供三个与 autocomplete 相关的设置项默认值来自 VS Code 扩展文档unocss.autocomplete.matchType匹配类型默认prefix、unocss.autocomplete.strict是否严格限制提示出现的位置默认false、unocss.autocomplete.maxItems提示列表最大条目数默认1000。提示完全不出现或位置不对时可检查这三项。限制内置 shorthand 目前只有num、percent、directions三种其他值域必须通过shorthands自定义或用 OR 组显式列出只有动态规则需要声明autocomplete静态规则无需配置写多了模板也不会出错但属于冗余extractors属于进阶配置用于把类名风格的建议转换到目标格式如 attributify 场景普通 class 字符串场景可以不配置。相关文档Rules、autocomplete 配置、autocomplete 工具。【免费下载链接】unocssThe instant on-demand atomic CSS engine.项目地址: https://gitcode.com/GitHub_Trending/un/unocss创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考