Emmet in VS Code

Emmet in VS Code

Emmet for Selection

ctrl + k then ctrl + s to open the keyboard shortcuts panel.

Find "Emmet: Balance (inward)", double click or press enter it and bind the key to ctrl + alt + i

Find "Emmet: Balance (outward)", double click or press it enter and bind the key to ctrl + alt + o

How To Use It?

Copy the code and paste to your VS Code

    <header>
      <nav>
        <h1>
          Navbar
        </h1>
        <ul>
          <li><a data-page="home" href="#">Home</a></li>
          <li><a data-page="project" href="#">Project</a></li>
          <li><a data-page="contact" href="#">Contact</a></li>
          <div class="bubble"></div>
        </ul>
      </nav>
    </header>

Scenario one

Put your cursor in front of "h" character of the header tag. ctrl + alt + i to select everything inside exclude the header

ctrl + alt + o will select the header and everything inside

Scenario two

Put your cursor in front of "N" character of the the navbar, ctrl + alt + o to select the word. ctrl + alt + o again to select the h1 tag together. Keep pressing to select outward

Magic~ It save a lot of time on select.

Use Emmet In JS Extension

If you want to use Emmet in JS extension (JavaScript).

Find "Emmet: Include Languages" in the VS Code setting.

Set item to "javascript" and the value to "javascriptreact"

or copy the following code to the page on your VS Code JSON Setting

"emmet.includeLanguages": {
"javascript": "javascriptreact",
},

div.mystyle then press tab if expand to the following:-

<div className="mystyle"></div>

Mean you're successful setup the Emmet to use it JS Extension.