Is there any emmet abbreviation for this

<div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
</div>

Is there any emmet abbreviation for this

<div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
</div>

• visual-studio-code
• emmet

• You have not shown any attempts in your question - so we have to assume you may not have been able to get close to what you need. If you specifically are looking for how to generate the sequence A, B, C... easily, then you need to state that explicitly in the question and show your best attempt. – andrewJames Commented Mar 22 at 19:44

3 Answers 3

I don't know of a way to get exactly what you show in the question - but you can get close with the two following approaches.

(And there is a third approach, which may also be acceptable, at the end.)

First Approach

div.container>div.item*3{$}

The above produces the following HTML:

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

It uses the values 1, 2 and 3 instead of A, B and C.

See item numbering for $.

See text for {}.

Second Approach

The following uses text instead of numbers:

div.container>div.item*3{A}

But this gives a hard-coded A in every sub-DIV:

<div class="container">
    <div class="item">A</div>
    <div class="item">A</div>
    <div class="item">A</div>
</div>

You can decide if either of these approaches are "close enough" - or not.

Third Approach

You can use XML/HTML character references to generate a list of A, B, C as follows:

Here is the Emmet:

div.container>div.item*3{&#$$$$@65;}

This generates the following HTML:

<div class="container">
    <div class="item">&#0065;</div>
    <div class="item">&#0066;</div>
    <div class="item">&#0067;</div>
</div>

The sequence A refers to the decimal ASCII code 65 which is the code for A (see ASCII table for reference).

When you render the above HTML in a web page, the browser will replace A with A. And because 0066 is B, you will get your alphabet sequence:

This may look odd in VS-Code, but it works fine in the browser.

@andrewJames's answer is very good, especially that using the A insertion. But if you don't want to leave it with the html letter symbols, you need a way to swap A to A, etc..

I wrote an extension, Find and Transform, that makes this pretty easy. You can make these keybindings (in your keybindings.json):

{
  "key": "alt+c",          / /whatever you want here
  "command": "findInCurrentFile",
  "args": {
     "find": "&#00(\\d\\d);",  // A
    "isRegex": true,          
    "replace": "$${ return String.fromCharCode($1) }$$",  // get capture group 1 from the regex above
    // "restrictFind": "selections"
  },
  // "when": "editor.hasSelection"
}

That would find all &#00nn in the document and replace them with their letter equivalent.

Or you could simply use an emmet call like div.container>div.item*3{REPLACE_UNIQUE} to create your html and then use this keybinding:

{
  "key": "alt+c",
  "command": "findInCurrentFile",
  "args": {

    "find": "REPLACE_UNIQUE",
    "isRegex": true, 
         
    "replace": "$${ return String.fromCharCode(${matchIndex}+65) }$$",  // get capture group 1 from the regex above

    // "restrictFind": "selections"
  },
  // "when": "editor.hasSelection"
}

This would replace all REPLACE_UNIQUE's with an ascending letter code for each match.

You can restrict the operation of these keybindings by selecting a block of text first and using the option "restrictFind": "selections" so only code withing selections are transformed instead of the entire document.

Finally, you can automated the whole process - inserting the emmet string, expanding it to the html and then transforming parts of it to the letter codes with a keybinding like this:

{
  "key": "alt+c",           // what keybinding you want
  "command": "runCommands",
  "args": {
    "commands": [
      {
        "command": "type",
        "args": {
          "text": "div.container>div.item*3{&#$$$$@65;}"
        }
      },
      "editor.emmet.action.expandAbbreviation",
      "cursorLeft",
      "editor.emmet.action.balanceIn",
      {
        "command": "findInCurrentFile",
        "args": {
          "find": "&#00(\\d\\d);",  // using A, etc.
          "isRegex": true,          
          "replace": "$${ return String.fromCharCode($1) }$$",  // get capture group 1 from the regex above
          "restrictFind": "selections"
        }
      }
    ]
  }
},

Using the answers from @andrewJames and @Mark you can get a similar result using the extension Regex Text Generator that I wrote.

Execute the command: Generate text based on Regular Expression

Original text Regex: (.*)

Generator Regex: <div class="container">(<div class="item">{{=String.fromCharCode(j[0]+65)}}</div>){3}</div>

Accept the preview text with Enter key.

Now apply a text formatter if you want the indentation.

You can save this as a predefined setting with:

  "regexTextGen.predefined": {
    "div.container>div.item*N" : {
      "originalTextRegex": "(.*)",
      "generatorRegex": "<div class=\"container\">(<div class=\"item\">{{=String.fromCharCode(j[0]+65)}}</div>){3}</div>"
    }
  }

This will be shown first if you execute the command, You can edit the strings and look at the preview.