CodeWiki

🚀 Documentação: Emmet no VS Code

(Ferramenta essencial para acelerar a escrita de HTML/CSS)

1. O Que é o Emmet?

Definição: Plugin que permite escrever HTML e CSS de forma rápida usando abreviações (snippets).
Exemplo: Digitar ul>li*5 e pressionar Tab gera uma lista não ordenada com 5 itens.
Benefícios:
- Economiza tempo.
- Reduz erros de sintaxe.
- Ideal para estruturas repetitivas.

2. Abreviações Básicas de HTML

Estrutura Inicial

! → HTML Boilerplate:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Elementos com Classes e IDs

div.container →
```
<div class="container"></div>
```
section#home →
```
<section id="home"></section>
```

Aninhamento de Elementos

nav>ul>li →

<nav>
    <ul>
        <li></li>
    </ul>
</nav>

Multiplicação de Elementos

ul>li*3 →

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

3. Abreviações de CSS

m20 → margin: 20px;
p10-20 → padding: 10px 20px;
bgc#f00 → background-color: #ff0000;
d:n → display: none;

4. Recursos Avançados

Navegação entre Irmãos

header+main+footer →

<header></header>
<main></main>
<footer></footer>

Texto dentro de Elementos

h1{Título Principal} →
```
<h1>Título Principal</h1>
```

Atributos Personalizados

a[href="#"] →
```
<a href="#"></a>
```

Agrupamento com Parênteses

(article>h2+p)*2 →

<article>
    <h2></h2>
    <p></p>
</article>
<article>
    <h2></h2>
    <p></p>
</article>

5. Dicas e Truques

Lorem Ipsum Automático

p>lorem20 → Gera um parágrafo com 20 palavras aleatórias.

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>

Números Incrementais

ul>li.item$*3 →

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

Preenchimento de Imagens

img[src="img/photo$$.jpg"]*4 →

<img src="img/photo01.jpg" alt="">
<img src="img/photo02.jpg" alt="">
... (até photo04.jpg)

6. Personalizando o Emmet no VS Code

Acesse File > Preferences > Settings (ou Ctrl + ,).
Busque por Emmet.

Adicione snippets personalizados:

"emmet.extensionsPath": "caminho/para/seu/snippets.json"

7. Tabela de Referência Rápida

Abreviação	Resultado
`div#header`	`<div id="header"></div>`
`ul.nav>li*3>a`	Lista com 3 links
`input:text`	`<input type="text">`
`btn:s`	`<button type="submit"></button>`
`@m20`	`margin: 20px;` (CSS)