Postado há cerca de 16 horas

Dicas de Emmet

Os comandos Emmet são uma ferramenta que facilita a criação rápida de estruturas de código HTML e CSS. Esses comandos permitem gerar tags HTML, aplicar classes, IDs, atributos e até criar estruturas complexas de forma simples como veremos em alguns exemplos.

Alguns exemplos de uso

Para criar uma estrutura base de html digitamos ! e em seguida aperte tab. Ou use html:5 também tem o mesmo resultado

Exemplo de emmet para estrutura base de html 5

Para criar um Input com Placeholder digitamos input[placeholder="Digite algo"] e em seguida aperte tab.

<input type="text" placeholder="Digite algo">

Para criar um Input com Múltiplos Atributos digitamos input[type="text"][name="username"][required] e em seguida aperte tab.

<input type="text" name="username" required>

Para criar um button com algum texto digitamos button{meu texto} e em seguida aperte tab.

<button>meu texto</button>

Para criar um button com o type submit uma class um id e um texto digitamos button[type="submit"].minhClass#meuId{texto} e em seguida aperte tab.

<button type="submit" class="minhClass" id="meuId">texto</button>

Muitas vezes precisamos usar algum texto para adicionar e ver como determinado layout ou estrutura ficaria e para isso podemos usar o lorem com a quantidade de palavras que precisamos por exemplo digitando lorem10 temos o texto lorem com 10 palavras, se precisar de mais ou menos caracteres basta modificar o valor.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius, quia?

outra forma de usar o lorem seria combinando por exemplo com parágrafo p>lorem20

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident modi voluptate fugit natus! Ipsum repellat vitae molestiae, ipsa repudiandae modi?</p>

Para criar uma ul com alguns li e com uma class podemos usar ul>li.myclass*3

<ul>
  <li class="myclass"></li>
  <li class="myclass"></li>
  <li class="myclass"></li>
</ul>

seguindo essa mesma linha de repetir elementos podemos fazer a enumeração de forma dinâmica também da seguinte forma ul>li.myclass$*3

<ul>
  <li class="myclass1"></li>
  <li class="myclass2"></li>
  <li class="myclass3"></li>
</ul>

nesse caso o simbolo de dolar $ e substituído por uma sequencia numerica com base no valor que é adicionado como multiplicador.

Outro exemplo é se por exemplo estiver criando uma estrutura que recebe inicialmente algumas imagens enumeradas div.gallery>img[src="image$.jpg"]*4

<div class="gallery"><img src="image1.jpg" alt=""><img src="image2.jpg" alt=""><img src="image3.jpg" alt=""><img src="image4.jpg" alt=""></div>

Só que aqui os elementos ficaram tudo inline isso ocorre porque por padrão o Emmet cria elementos inline como <img>, sem quebrar linhas ou aplicar indentação, enquanto elementos de bloco, como <li> ou <div>, são gerados em linhas separadas com indentação. O comportamento padrão não inclui uma opção direta no Emmet para forçar a quebra de linha e a indentação dos elementos inline mas podemos modificar a configuração do emmet para resolver isso.

Crie o arquivo .vscode/settings.json no seu projeto ou aidicone no settings.json global vai de sua preferência. Adicione a seguinte configuração

{
  "emmet.preferences": {
    "output.inlineBreak": 1
  }
}

Quando usarmos novamente o div.gallery>img[src="image$.jpg"]*4 teremos o seguinte resultado.

<div class="gallery">
  <img src="image1.jpg" alt="">
  <img src="image2.jpg" alt="">
  <img src="image3.jpg" alt="">
  <img src="image4.jpg" alt="">
</div>

Outro exemplo seria uma estrutura de article onde teria um titulo e alguns paragrafos article>h2{Título $}+p{Parágrafo $}*3.

<article>
  <h2>Título 1</h2>
  <p>Parágrafo 1</p>
  <p>Parágrafo 2</p>
  <p>Parágrafo 3</p>
</article>

Sò que aqui podemos usar o lorem também da seguinte forma article>h2>lorem5^p*3>lorem20 e teremos o seguinte resultado.

<article>
  <h2>
    Lorem ipsum dolor sit amet.
  </h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, totam. Veniam, eius maxime sequi cum debitis tempora voluptate iste iusto!
  </p>
  <p>
    Corrupti laudantium est totam ipsam doloremque! Doloribus, dignissimos. Voluptatum voluptates ipsa ut beatae voluptas earum magni impedit dolorum consectetur rerum!
  </p>
  <p>
    Possimus suscipit perferendis iusto est in incidunt ab consequatur vitae veniam tempore laudantium rem natus, harum omnis! Magni, voluptatem labore.
  </p>
</article>

Só uma explicação extra aqui o acento ^ no contexto do emmet teria a funcionalidade de subir o nível da hierarquia de elementos html.

Aqui nesse comando article>h2>lorem5^p*3>lorem20 estamos criando um article dentro dele um h2 com o conteúdo de um lorem se tivessemos usando o simbolo de > maior que estariamos criando o paragrafo dentro do h2 como não é isso que queremos usamos o ^ para subir um nível e assim ter a tag p no mesmo nível hierarquico do h2.

um outro exemplo seguindo a ideia anterior div.card>h3{Título do Card}+p>lorem30^button{Saiba mais} e aqui teremos um resultado parecido.

<div class="card">
  <h3>Título do Card</h3>
  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint eos, rem distinctio suscipit cupiditate minima reprehenderit officiis tempora modi. Id culpa quod sequi rem deserunt ipsa eos illo doloremque dolor!
  </p>
  <button>Saiba mais</button>
</div>

O resultado aqui e parecido com o anterior só que temos uma diferença entre ^ subir nivel e + adicionar ao mesmo nivel.

Use +: Quando quiser adicionar um elemento no mesmo nível dentro do contexto atual.
Use ^: Quando precisar voltar na hierarquia e continuar adicionando elementos no nível do pai.

Exemplo de uso para criar um header header>div.logo>img[src="/logo.png"][alt="Logo"]+nav>ul>li*3>a[href="#"]{Link $}

<header>
  <div class="logo">
    <img src="/logo.png" alt="Logo">
    <nav>
      <ul>
        <li>
          <a href="#">Link 1</a>
        </li>
        <li>
          <a href="#">Link 2</a>
        </li>
        <li>
          <a href="#">Link 3</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

Exemplo de uso para criar um footer footer>div.section*3>h4{Seção $}+ul>li*4>a[href="#"]{Item $}

<footer>
  <div class="section">
    <h4>Seção 1</h4>
    <ul>
      <li>
        <a href="#">Item 1</a>
      </li>
      <li>
        <a href="#">Item 2</a>
      </li>
      <li>
        <a href="#">Item 3</a>
      </li>
      <li>
        <a href="#">Item 4</a>
      </li>
    </ul>
  </div>
  <div class="section">
    <h4>Seção 2</h4>
    <ul>
      <li>
        <a href="#">Item 1</a>
      </li>
      <li>
        <a href="#">Item 2</a>
      </li>
      <li>
        <a href="#">Item 3</a>
      </li>
      <li>
        <a href="#">Item 4</a>
      </li>
    </ul>
  </div>
  <div class="section">
    <h4>Seção 3</h4>
    <ul>
      <li>
        <a href="#">Item 1</a>
      </li>
      <li>
        <a href="#">Item 2</a>
      </li>
      <li>
        <a href="#">Item 3</a>
      </li>
      <li>
        <a href="#">Item 4</a>
      </li>
    </ul>
  </div>
</footer>

Com isso vimos um pouco das funcionalidades do emmet e como ela pode ajudar na criação de nossas marcações html no nosso dia a dia.

Andson Lourenco |

Dicas de Emmet

Alguns exemplos de uso