能否制作展开前需输入变量的自定义Emmet缩写？（基于Sublime Text 3）

你已经掌握了基础的自定义片段和缩写，那进阶的交互式变量输入对你来说也很容易——Emmet本身就内置了这种“触发时请求输入”的语法，不用额外折腾插件。

核心用法：${prompt:提示文本} 语法 #

在自定义缩写的代码模板里，把原本的固定值或占位符替换成 ${prompt:你的提示文字} 即可。当你触发这个缩写时，Emmet会弹出输入框，让你填写变量值，确认后就会把值自动插入到代码对应的位置。

举个实际的例子，把你之前的sym缩写改成交互式版本：

"sym": "svg[width=${prompt:请输入图标尺寸（如24）}]>symbol[id='${prompt:请输入symbol的ID}' viewBox='0 0 ${1} ${1}']${child}"

触发sym缩写后，会先弹出输入框让你填尺寸，回车后再让你填ID，完成后生成的SVG代码里，width、height和viewBox的尺寸会自动同步你输入的值，不用手动修改。

如果想让同一个变量复用（避免重复输入），可以给prompt加标识索引：

"sym": "svg[width=${prompt:请输入图标尺寸（如24）|1}] height=${1}]>symbol[id='${prompt:请输入symbol的ID}|2' viewBox='0 0 ${1} ${1}']${child}"

这里的|1和|2是给输入框做的标记，${1}会自动复用第一个输入框的值，效率更高。

进阶：下拉选择式变量 #

如果不想让用户手动输入（怕输错），还可以用${select:选项1,选项2,选项3}语法做下拉选择，比如给你的jQuery片段加版本选择：

"jq": "<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/${select:3.3.1,3.6.0,4.0.0}/jquery.min.js' integrity='${select:sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=,sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=,sha256-TXf+kuFZJlbW2pxoVJVJUD9HIWYpG0Wmv+dX2lg9GqI=}' crossorigin='anonymous' ></script>${child}"

触发jq后会弹出下拉菜单，选好版本后，对应的CDN链接和integrity值会自动匹配，完全不用手动查。

在Sublime Text 3里的配置方式 #

和你之前做自定义缩写的流程一样：

• 打开Emmet用户配置：Preferences > Package Settings > Emmet > Settings - User
• 在snippets对象里添加你的交互式缩写，语法和上面的例子一致即可。

内容的提问来源于stack exchange，提问作者jadraptor