将值列表传递给 emmet 生成器表达式答案

【问题标题】：Pass a list of values into an emmet generator expression将值列表传递给 emmet 生成器表达式
【发布时间】：2016-08-14 15:30:39
【问题描述】：

我在 emmet 工具包的帮助下编写 HTML 代码，想知道是否有办法将唯一的文本值（预定义为某种列表）传递给 emmet html 元素生成器表达式。

<!-- Example:  -->

  span.myClass{textValue$}*4

 <!--Will yield:  -->
  <span class="myClass">textValue1</span>
  <span class="myClass">textValue2</span>
  <span class="myClass">textValue3</span>
  <span class="myClass">textValue4</span>

<!--Desired: -->

  textValues = ["as","gh","xc"];

  <!-- Some generator expression, G(textValues), that yields this -->
    <span class="myClass">as</span>
    <span class="myClass">gh</span>
    <span class="myClass">xc</span>

我想知道是否有内置方法或聪明的生成器表达式可以实现这一点。

【问题讨论】：

docs.emmet.io/actions/wrap-with-abbreviation

标签： html emmet

【解决方案1】：

当你有现有的文本并且你想用 HTML 标签包装它时

仅供参考，我的示例我使用 CodePen 作为现有文本正文的包装缩写，下面有一些示例，对于一些示例，我只是使用乘数生成它们。

textValue
textValue
textValue
textValue

熟悉 Emmet 命令

突出显示文本
然后按（macOS 上为⇧+⌘+A，Windows 上为⇧+CTRL+A）
您会在模式中看到带有“输入缩写”的输入字段弹出窗口

无序和列表示例：

在“输入缩写”中输入：

ul>li*

或者，如果您想将自定义文本 {} 或数字 $ 或您在无序列表的自定义文本的前面或后面放置什么。有序列表ol 将给出默认编号列表。您可以根据需要自定义文本，然后运行查找和替换。

ul>li{textValue $}*

这个例子会是这样的

<ul>
    <li>textValue 1</li>
    <li>textValue 2</li>
    <li>textValue 3</li>
    <li>textValue 4</li>
</ul>

您想要的解决方案

在“输入缩写”中输入您想要的解决方案以环绕现有文本：

span.myClass>li*

为您想要的解决方案生成带有有序数字的自定义文本

span.myClass{textValue $}*4

<span class="myClass">textValue 1</span>
<span class="myClass">textValue 2</span>
<span class="myClass">textValue 3</span>
<span class="myClass">textValue 4</span>

据我所知，您可以为自己的文本编辑器创建自己的 Emmet sn-ps。您还可以在 CodePen 中创建自己的自定义选项卡触发器（查看链接）https://blog.codepen.io/documentation/tab-triggers/

这是 Emmet 备忘单，可用于收藏 https://docs.emmet.io/cheat-sheet/

【讨论】：