javascript - 如何自定义 emmet 以生成像 html 这样的动态 javascript 代码

Question

我已经在 snippets.json 文件夹中为 sublime 安装和定制了支持 java 脚本片段的 emmet(zen 编码)，这样我就可以扩展缩写。它有效并且可以从这些定义中正确扩展

"js": 
  {
      "abbreviations": {
        "em":  "emmet"
      },
      "snippets": {
      "forn": "for(i=0;i<${id};i++)\n{\n\t\n}",
      "for": "for (var ${class} = 0; i < ${id}; ${class}++) {\n\t|}"
      }
  }   

到目前为止一切顺利现在我想要的是当我使用 for>len/=N> in input panel 在for循环中嵌入一些代码。
我期待

for(var i=0; i<N; i++){
  len/=N
}

但是无论我输入什么，它都会嵌入到 HTML 标签中 在 for 循环之后。

我如何在循环后混合片段和用户定义的变量 不在循环内。 ** 同样，我想要类似的语法 (text*5+=cars) 可以扩展到这种模式

text += cars[0] + "<br>"; 
text += cars[1] + "<br>"; 
text += cars[2] + "<br>"; 
text += cars[3] + "<br>"; 
text += cars[4] + "<br>"; 
text += cars[5] + "<br>";

Answer 1

所以这样的事情你必须编写自定义缩写后处理器，它可以在解析树中找到缩写并将其替换为自定义片段。

看看Lorem Ipsum generator .它采用经过解析的缩写树，遍历它以找到符合某些条件的节点。然后将这些节点替换为自定义片段。

您的代码可能如下所示:

(function() {
    function resolve(tree) {
        tree.children.forEach(function(node) {
            if (/^my-prefix/.test(node.name())) {
                // do something
                node._name = ''; // empty name
                node.content = 'add some cusom content';
            }

            // walk recursively
            resolve(node);
        });
    }

    // register post-processor
    emmet.require('parser/abbreviation').addPostprocessor(resolve)
})();

您可以将此文件放入您的扩展目录。

PS:请注意，/ 和 = 字符对于 Emmet 缩写都是非法的。有效缩写名称必须符合 this regexp .