How to customize emmet for dynamic java script code generation like html

Question

I have installed and customized emmet(zen coding) with support for java script snippets in snippets.json folder for sublime, so that i could expand abbreviations. it works and for expands properly from these definitions

"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|}"
      }
  }

So far so good Now what i wanted is when i use for>len/=N> in input panel to embed some code inside the for loop.
i expect

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

But what ever i type it gets embedded in HTML tag following the for loop .

how do i mix snippets and user defined variables after the loop not inside the loop. ** similarly i want similar syntax (text*5+=cars) that may expand to this kind of pattern

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

Hi Sergey, Thanks for answering. Actually i saw this doc page, but wanted something different, i have updated the question, please answer and share any examples that may help forming complex nested code instead of html tags for pure java script with no html — Jay ram

Sergey Chikuyonok Sergey Chikuyonok · Accepted Answer · 2014-08-22T14:18:16

So such things you have to write custom abbreviation postprocessor that can find abbreviation in parsed tree and replace it with custom snippet.

take a look at Lorem Ipsum generator. It takes a parsed abbreviation tree, traverses it finds nodes that matched some criteria. These nodes then replaced with custom snippets.

Your code might look something like this:

(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)
})();

You can put this file into your extensions dir.

PS: note that both / and = characters are illegal for Emmet abbreviations. Valid abbreviation name must conform this regexp.

How to customize emmet for dynamic java script code generation like html

1 Answers