Entender como usar o Emmet é literalmente uma superpotência. Alguns até o chamaram de código de trapaça de codificação. 😆

E é apenas um dos muitos recursos integrados incríveis do VS Code.

Recentemente, lancei um curso abrangente e detalhado chamado Torne-se um super-herói do VS Code. Ele cobre todos os aspectos do VS Code em grande profundidade.

Este artigo é baseado em uma das 11 seções do curso: Escrevendo e formatando código.

HTML

Com Emmet, você pode criar rapidamente um padrão HTML em um piscar de olhos. Em um arquivo HTML, basta digitar ! e você verá que Emmet apareceu como uma sugestão. Agora bate Enter. Aí está, uma página da web HTML básica em branco pronta para usar.

Se você nunca viu HTML antes e não tem ideia do que é tudo isso, não se preocupe. Estou apenas demonstrando os recursos do VS Code e Emmet. Você não precisa saber o que isso significa agora.

Tags básicas

Para criar tags HTML básicas, basta digitar o nome da tag e clicar Enter. Observe como Emmet coloca seu cursor dentro da tag. Agora você está configurado para continuar digitando dentro da tag.

  • Experimente digitar: div então Enter, ou h1 Enter, ou p Enter.
  • Estes também funcionam: bq para <blockquote>, hdr para <header>, ftr para <footer>, btn para <button>, e sect para uma seção.

Aulas

Se você estiver familiarizado com CSS, Emmet usa a mesma maneira para se referir a classes usando um .. Para definir uma classe junto com a tag, basta adicioná-la assim:

  • div.wrapper -> <div class="wrapper"></div>
  • h1.header.center -> <h1 class="header center"></h1>

ID's

O trabalho do Id é praticamente o mesmo:

  • div#hero -> <div id="hero"></div>

Combinando

Você pode encadear estes juntos:

  • div#hero.wrapper -> <div id="hero" class="wrapper"></div>

Atributos

Também podemos especificar atributos para tags:

  • img[src="https://www.freecodecamp.org/news/write-html-css-faster-with-emmet-cheat-codes/cat.jpg"][alt="Cute cat pic"] -> <img src="https://www.freecodecamp.org/news/write-html-css-faster-with-emmet-cheat-codes/cat.jpg" alt="Cute cat pic" />

Conteúdo

Para incluir conteúdo dentro da tag, simplesmente envolvemos o conteúdo entre chaves, { }.

  • p{This is a paragraph} -> <p>This is a paragraph</p>

Irmãos e Filhos

Está cada vez melhor. Também podemos especificar irmãos e filhos usando o + e > personagens.

  • section+section -> <section></section><section></section>
  • ul>li -> <ul><li></li></ul>

Subindo

Você tem que tentar imaginar o que está construindo em sua cabeça enquanto digita a abreviação de Emmet. Neste exemplo, vamos "escalar" a árvore usando ^.

div+div>p>span+em^bq

Resultado:

<div></div><div>    <p><span></span><em></em></p>    <blockquote></blockquote></div>

Aqui, queríamos que o blockquote estivesse no mesmo nível do parágrafo. Por isso, precisávamos “subir”. Caso contrário, estaria dentro do parágrafo.

Agrupamento

Se sua estrutura for muito complexa, convém agrupar tags em vez de percorrer por escalada.

Neste exemplo, vamos criar um cabeçalho e rodapé sem escalar usando parênteses ( ).

div>(header>ul>li>a)+footer>p

Resultado:

<div>    <header>        <ul>            <li><a href=""></a></li>        </ul>    </header>    <footer>        <p></p>    </footer></div>

Multiplicação e $

Podemos gerar várias tags multiplicando (*) e numere os itens em sequência usando um cifrão ($)

  • ul>li*5 -> <ul><li></li><li></li><li></li><li></li><li></li></ul>
  • ul>li{Item $}*3 -> <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>

Você pode até personalizar a sequência de numeração preenchendo com zeros, começando com um número específico e até mesmo inverter a direção.

Bloco com zeros: ul>li.item$$$*5

Resultado:

<ul>    <li class="item001"></li>    <li class="item002"></li>    <li class="item003"></li>    <li class="item004"></li>    <li class="item005"></li></ul>

Comece com um número específico: ul>li.item$@3*5

Resultado:

<ul>    <li class="item3"></li>    <li class="item4"></li>    <li class="item5"></li>    <li class="item6"></li>    <li class="item7"></li></ul>

Direção oposta: ul>li.item$@-*5

Resultado:

<ul>    <li class="item5"></li>    <li class="item4"></li>    <li class="item3"></li>    <li class="item2"></li>    <li class="item1"></li></ul>

Inverter direção de um número específico: ul>li.item$@-3*5

Resultado:

<ul>    <li class="item7"></li>    <li class="item6"></li>    <li class="item5"></li>    <li class="item4"></li>    <li class="item3"></li></ul>

Nomes de tags implícitos

Existem certas tags que não precisam ser digitadas e podem estar implícitas.

  • Uma classe definida inicialmente sem tag será implicada como um <div>.
    .wrapper -> <div class="wrapper"></div>
  • Uma classe definida dentro de uma tag de ênfase estará implícita como um <span>.
    em>.emphasis -> <em><span class="emphasis"></span></em>
  • Uma classe definida em uma lista será incluída como um item de lista.
    ul>.item -> <ul><li class="item"></li></ul>
  • Uma classe definida em uma tabela será implicada como um <tr> e dentro de uma linha seria um <td>.
    table>.row>.col -> <table><tr class="row"><td class="col"></td></tr></table>

Wrap with Tags

Haverá momentos em que você terá um código existente que deseja agrupar com uma tag. Podemos fazer isso facilmente com Emmet.

Basta destacar o código que deseja embrulhar e abrir a paleta de comandos (F1) Em seguida, procure por Emmet: Wrap with Abbreviation. Em seguida, será apresentada uma caixa de diálogo onde você pode digitar o elemento.

test -> <div>test</div>

Você também pode usar a sintaxe Emmet padrão nesta caixa de diálogo. Tente embrulhar algum texto com span.wrapper.

Por padrão, essa funcionalidade não é atribuída a um atalho de teclado. Portanto, se você o usa com frequência, pode adicionar um atalho personalizado para ele.

Lorem Ipsum

“Lorem Ipsum” é um texto fictício usado por desenvolvedores para representar dados em uma página. Basta digitar lorem e bater Enter. Emmet irá gerar 30 palavras de texto falso que você pode usar como preenchimento em seu projeto.

A quantidade de palavras geradas também pode ser definida.

  • lorem10 lhe dará 10 palavras de texto aleatório.

Juntando tudo

Vamos usar várias coisas que aprendemos até agora. Experimente:

ul.my-list>lorem10.item-$*5

Resultado:

<ul class="my-list">  <li class="item-1">Lorem ipsum dolor sit amet.</li>  <li class="item-2">Numquam repudiandae fuga porro consequatur?</li>  <li class="item-3">Culpa, est. Tenetur, deleniti nihil?</li>  <li class="item-4">Numquam architecto corrupti quam repudiandae.</li></ul>

CSS

Em CSS, Emmet tem uma abreviatura para cada propriedade. Não vou listar todos, mas vou apontar os mais usados. Para ver a lista completa, consulte o Emmet folha de dicas.

Posição

  • pos -> position:relative; (o padrão é relativo)
  • pos:s -> position:static;
  • pos:a -> position:absolute;
  • pos:r -> position:relative;
  • pos:f -> position:fixed;

Exibição

  • d -> display:block; (o padrão é bloquear)
  • d:n -> display:none;
  • d:b -> display:block;
  • d:f -> display:flex;
  • d:if -> display:inline-flex;
  • d:i -> display:inline;
  • d:ib -> display:inline-block;

Cursor

Cor

  • c -> color:#000;
  • c:r -> color:rgb(0, 0, 0);
  • c:ra -> color:rgba(0, 0, 0, .5);
  • op -> opacity: ;

Margem e preenchimento

  • m -> margin: ;
  • m:a -> margin:auto;
  • mt -> margin-top: ;
  • mr -> margin-right: ;
  • mb -> margin-bottom: ;
  • ml -> margin-left: ;
  • p -> padding: ;
  • pt -> padding-top: ;
  • pr -> padding-right: ;
  • pb -> padding-bottom: ;
  • pl -> padding-left: ;

Dimensionamento da caixa

  • bxz -> box-sizing:border-box;

Largura

  • w -> width: ;
  • h -> height: ;
  • maw -> max-width: ;
  • mah -> max-height: ;
  • miw -> min-width: ;
  • mih -> min-height: ;

Fronteira

  • bd -> border: ;
  • bd+ -> border:1px solid #000;
  • bd:n -> border:none;

Emmet é incrível!

Com Emmet, você pode criar uma estrutura HTML realmente complexa com uma linha. É realmente incrível. E também funciona com CSS.

Você pode ver como Emmet pode aumentar drasticamente sua eficiência e velocidade ao escrever HTML e CSS.

Se você deseja aumentar ainda mais sua eficiência e velocidade ao usar o VS Code, confira meu curso Torne-se um super-herói do VS Code.

O curso aprofunda esses conceitos e ajuda você a se tornar um desenvolvedor de super-heróis rápido e eficiente 🙂

Jesse Hall (codeSTACKr)

Sou Jesse, do Texas. Confira meus outros conteúdos e diga como posso ajudá-lo em sua jornada para se tornar um desenvolvedor web.