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

Question

我正在尝试用以下标签包装大量数据。

举个例子：

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 代码来完成。任何帮助将不胜感激。

Answer 1

在 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") 用作 表达式 :

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

Answer 2

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

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

因此，最后您的环绕缩写将如下所示：

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

请注意，出于某种原因，在 VSCode 中您应该使用 Emmet：用缩写换行 命令来换行多行，而在其他编辑器中默认 用缩写换行 应该可以。

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

Answer 3

另一种选择是使用常规片段。这是 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",
          }
        },
      ]
    }
  ]

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

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

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

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

Emmet How To Wrap Usig Multiple Tags

visual-studio-code

phpstorm

sublimetext3

atom-editor

emmet