Question

"snippet with class binding":{
    "prefix": "row.${variable}",
    "body":[
        "<table class=\"row ${same_variable_here}\">",
        "\t<tr>",
        "\t\t<td>",
        "\t\t\t$0",
        "\t\t</td>",
        "\t</tr>",
        "</table>"
    ]
}

是否可以（以及如何创建）像 some_entity.classname 这样的变量扩展成这样的内容（例如，以html为例）：

<div class="classname"></div>

Answer 1

您似乎有两个问题。是的，emmet扩展会自动打开 div.myClass到<div class="myClass"></div>中。参见emmet in vscode。

您的另一个问题是关于全表扩展的emmet代码段。参见custom emmet snippets。在您的settings.json中，您将需要：

  "emmet.extensionsPath": "C:\\Users\\Mark\\.vscode\\extensions"

这应该指向一个包含要创建的名为snippets.json的新文件的文件夹。在该文件中：

{
  "html": {
    "snippets": {
        "tableR": 
          "table.row.$1>tr>td"
    }
  }
}

使用“ tableR”之外的前缀。然后，您必须重新加载 vscode。然后输入前缀和制表符进行扩展（假设您的设置中包含emmet制表符扩展设置。）

[EDIT]：根据您在下面的评论，也许您正在寻找的内容像带有键盘绑定的代码段一样简单：

{
    "key": "ctrl+alt+n",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
      "snippet": "${TM_SELECTED_TEXT/(.*)\\.(.*)/<$1 class=\"$2\"><\\/$1>/}"
    }
},

因此，如果您选择，anyTag.someClass会变成<anyTag class="someClass"></anyTag> 当您使用选择的任何键盘绑定时。这里没有涉及Emmet，这只是您的keybindings.json中的简单键绑定（如果需要，可以将其限制为某些语言）。 Emmet扩展不允许您以普通代码段可以抓取所选内容或当前单词并将其转换的方式来转换其前缀（上面的regexp）。

Vscode代码段变量

1 个答案: