Use snippets inside Emmets in VS Code

17 Views Asked by At

In VS Code, I am aware that you can create custom Emmets, custom Snippets, and custom Emmets with Snippets inside them. But is there a way to write out an Emmet that has a snippet inside it, which then generates the full HTML?

I shall explain further; I have the following custom snippet:

{
    "Placeholder Image": {
        "prefix": "placeholder",
        "body": "https://placehold.co/${1:800}x${2:600}/${3:$RANDOM_HEX}/${4:$RANDOM_HEX}",
        "description": "Creates a placeholder image of size width x height, followed by the background and text colour"
    }
}

When I edit a file that's HTML compatible, I can simply type in placeholder and it'll generate a URL similar to the following: https://placehold.co/800x600/b23fce/6d9844 - this can then be used in an <img> tag as a temporary placeholder.

I then try to use this in an Emmet command, however the following:

img[src=placeholder]*3

...generates the folowing:

<img src="placeholder" alt="">
<img src="placeholder" alt="">
<img src="placeholder" alt="">

Is there a way to auto-convert where it says placeholder into the compiled string (in this case, the placeholder URL)?

0

There are 0 best solutions below