Vscode 片段变量

Question

"snippet with class binding":{
    "prefix": "row.${variable}",
    "body":[
        "<table class=\"row ${same_variable_here}\">",
        "\t<tr>",
        "\t\t<td>",
        "\t\t\t[=11=]",
        "\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。

您的另一个问题是关于完整 table 扩展的 emmet 片段。参见 custom emmet snippets。在您的 settings.json 中，您将需要：

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

它应该指向一个文件夹，其中包含您将创建的名为 snippets.json 的新文件。在该文件中放入：

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

使用除“tableR”之外的任何前缀。那么你必须重新加载 vscode。然后键入要展开的前缀和制表符（假设您的设置中有 emmet 制表符扩展设置。]

[编辑]：根据您在下面的评论，也许您正在寻找像带有键绑定的片段这样简单的东西：

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

所以如果你 select anyTag.someClass 变成 <anyTag class="someClass"></anyTag> 当您使用您选择的任何键绑定时。这里不涉及 Emmet，这只是您 keybindings.json 中的一个简单的键绑定（如果您愿意，可以将其限制为某些语言）。 Emmet 扩展不允许您转换其前缀（上面的正则表达式），就像普通代码片段可以获取 selection 或当前词并转换它的方式。

Vscode 片段变量

Vscode snippet variable

code-snippets

template-variables

visual-studio-code