Emmet 如何使用多个标签进行包装答案

【问题标题】：Emmet How To Wrap Usig Multiple TagsEmmet 如何使用多个标签进行包装
【发布时间】：2020-05-19 16:31:43
【问题描述】：

我正在尝试用以下标签包装一堆数据。

举个例子：

link1
link2
link3
link4
link5

我希望它们中的每一个都用以下标签包装。

<url>
<loc>link1</loc>
<lastmod>2020-01-16T22:59:45+00:00</lastmod>
<priority>0.80</priority>
</url>

<url>
<loc>link2</loc>
<lastmod>2020-01-16T22:59:45+00:00</lastmod>
<priority>0.80</priority>
</url>
....

我想知道这是否可以使用 Emmet 代码来实现。任何帮助将不胜感激。

【问题讨论】：

制作一个 vscode sn-p 可能更容易。时间是固定的还是更改为更新链接的时间？

标签： visual-studio-code phpstorm sublimetext3 atom-editor emmet

【解决方案1】：

您应该使用 Emmet 语法中的两件事：

隐式重复器：用*（不带数字）标记元素到 Emmet 以重复元素与您要换行的行数一样多。例如，ul>li*
输出占位符：告诉 Emmet 将您使用 $# 包装的内容放在哪里。您可以在文本 (li{Put here: $#}) 和/或属性 (li[title=$#]) 中使用它。

所以，最后你的包装缩写将如下所示：

url*>loc{$#}+lastmod{2020-01-16T22:59:45+00:00}+priority{0.8}

请注意，出于某种原因，在 VSCode 中，您应该使用 Emmet: Wrap Individual Lines with Abbreviation 命令来换行，而在其他编辑器中，默认的 Wrap With Abbreviation应该可以。

阅读有关缩写语法的更多信息：https://docs.emmet.io/abbreviations/syntax/

【讨论】：

【解决方案2】：

在 PHPStorm 中，我建议为此定义一个 live template：

<url>
<loc>$SELECTION$</loc>
<lastmod>$date$</lastmod>
<priority>0.80</priority>
</url>

其中 $date$ 将date("yyyy-MM-dd'T'HH:mm:ss.SSSZ") 用作表达式：

现在启用列选择模式（编辑|列选择模式），选择你想用标签包围的行，选择代码>包围实时模板...

【讨论】：

【解决方案3】：

另一种选择是使用常规的 sn-ps。这是针对 vscode 的：

"link snippet": {
  "prefix": "link",
  "body": [
    "<url>"
    "<loc>$TM_SELECTED_TEXT</loc>",

    "<lastmod>2020-01-16T22:59:45+00:00</lastmod>",  // if date is fixed ahead of time

       // use below if date is dynamic at creation time
     "<lastmod>${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}T${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}+00:00</lastmod>"

    "<priority>0.80</priority>",
    "</url>",
    ""
  ],
  "description": "Wrap link with url, etc."
},

然后，因为您需要将 3 个命令链接在一起以简化操作，所以请使用像 multi-command 这样的宏扩展。把它放到你的 settings.json 中：

  "multiCommand.commands": [

    {
      "command": "multiCommand.expandLink",
      "sequence": [
        "editor.action.insertCursorAtEndOfEachLineSelected",
        "cursorHomeSelect",
        {
          "command": "editor.action.insertSnippet",
          "args": {
            "name": "link snippet",
          }
        },
      ]
    }
  ]

这将在 sn-p 分别选择您的每一行后触发。要触发宏本身，您需要一个键绑定（在 keybindings.json 中）：

{ 
  "key": "shift+alt+l",
  "command": "extension.multiCommand.execute",
  "args": { "command": "multiCommand.expandLink" },
},

相当多的设置，但它只是触发所有设置的一个键绑定。演示：

【讨论】：