Inserting temporary content within snippets in "Visual Studio Code"

Question

Within Visual Studio Code 1.7.2, I am able to generate a quick list of HTML data with the following snippet, followed by pressing TAB...

ul>li*5>h3+div

That will generate this list...

<ul>
    <li>
        <h3></h3>
        <div></div>
    </li>
    <li>
        <h3></h3>
        <div></div>
    </li>
    <li>
        <h3></h3>
        <div></div>
    </li>
    <li>
        <h3></h3>
        <div></div>
    </li>
    <li>
        <h3></h3>
        <div></div>
    </li>
</ul>

But how can I prepopulate every <h3></h3> to say <h3>tite</h3>, and every <div></div> to say <div>content</div>?

Matt Bierner · Accepted Answer · 2016-12-09 22:25:30Z

1

VScode uses emmet for this, so the input text would be:

ul>li*5>h3{title}+div{content}

which will expand to:

<ul>
    <li>
        <h3>title</h3>
        <div>content</div>
    </li>
    <li>
        <h3>title</h3>
        <div>content</div>
    </li>
    <li>
        <h3>title</h3>
        <div>content</div>
    </li>
    <li>
        <h3>title</h3>
        <div>content</div>
    </li>
    <li>
        <h3>title</h3>
        <div>content</div>
    </li>
</ul>

Here's additional documentation of the Emmet abbreviation syntax

answered Dec 9, 2016 at 22:25

Matt Bierner

67.4k24 gold badges199 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

klewis Over a year ago

Very nice. Thanks for the emmet information as well.

Collectives™ on Stack Overflow

Inserting temporary content within snippets in "Visual Studio Code"

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related