How to modify Emmet's tab expansion content

Question

How do I modify Emmet's tab expansion content?

Default:

input div.header and then pressing tab will generate <div className = "header"> </ div>

input div.header and then pressing tab will generate <div className = {cx ("header")}> </ div>

However，not only div, it maybe span or h1 or img and so on, still it maybe nested.

example:

div.header>div.title>span.icon ===>

<div className = {cx ("header")}>
  <div className = {cx ("title")}>
    <span className = {cx ("icon")}> </ span>
  </ div>
</ div>```

you can edit the emmet code file where all the macros are defined but you need to modify this file every time you update VSC, just a copy would suffice because emmet is not updated frequently, much easier it is to write a snippet for this alternative syntax — rioV8, Apr 14 '20 at 01:13

score 0 · Answer 1 · answered Apr 14 '20 at 04:41

As @rioV8 said to change the behaviour of div.header, a built-in emmet expansion might require re-doing it on vscode updates.

But you can make your own emmet abbreviation, like div:cx that would expand to what you want. Use

"div:cx" : "<div className = {cx (\"$1\")}> </ div>"

in your snippets.json file as explained in the above link. And see https://code.visualstudio.com/docs/editor/emmet#_using-custom-emmet-snippets. And remember to tell vscode the path to this file with the setting:

Emmet: Extensions Path

so something like this would end up in your settings.json:

"emmet.extensionsPath": "C:\\Users\\Mark\\Test Bed\\.vscode",

if you put that snippets.json file in your .vscode directory.

However，not only `div`, it maybe `span` or `h1` or `img` and so on, still it maybe nested. example: `div.header>div.title>span.icon` ===> ```

span> div> div>``` — Zhiguo Jiang, Apr 16 '20 at 02:22