CODEWITHSUNDEEP
visual-studio-code
klewis
klewis

Reputation: 8350

Inserting temporary content within snippets in "Visual Studio Code"

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>?

Upvotes: 1

Views: 237

Answers (1)

Matt Bierner
Matt Bierner

Reputation: 65263

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

Upvotes: 1

Related Questions