Desenvolvimento Front-end

Emmet Toolkit - Seja um Web Developer mais rápido

Conheça o Emmet Toolkit, ferramenta presente em praticamente todos os editores de código e IDEs que acelera muito a escrita do seu HTML e CSS.

há 3 anos 5 meses

Formação Desenvolvedor Especialista Front-end
Conheça a formação em detalhes

Olá Web Developers! Hoje vou falar de uma ferramenta que poucos conhecem, mas que está presente em praticamente TODOS os editores de código e IDEs: o Emmet Toolkit.

A ideia principal dele é muito simples: escreva uma expressão parecida com um seletor CSS e ele vai transformar isso em elementos HTML. Assim você pode escrever bem menos e ser mais produtivo. E, claro, se você ainda não está acostumado com certos seletores do CSS, vai acabar aprendendo. Semelhantemente também há comandos para acelerar o seu CSS.

Exemplo de comando do Emmet para geração de HTML

Geração simples de elementos

Se você não conhece o Emmet, é provável que em arquivos HTML já tenha percebido o seguinte: para gerar um elemento basta escrever o nome dele e pressionar Tab;

	div
<!--- Após "tab" --->
	<div></div>

Geração de elementos com id, classes e atributos

Da mesma forma que geramos um elemento a partir do nome dele, podemos gerar um elemento com id e classes. Basta seguir a mesma lógica de um seletor CSS.

	a#meuId.classe-a.classe-b[href="https://treinaweb.com.br"]
<!--- Após "tab" --->
	<a href="https://treinaweb.com.br" id="meuId" class="classe-a classe-b"></a>

Conteúdo de um elemento

Para indicar o conteúdo de um elemento, escreva entre { }.

	span{Olá Web Developers}
<!--- Após "tab" --->
	<span>Olá Web Developers</span>

Elementos Filhos

Por mais que os exemplos acima sejam bacanas, não economizaram tanta digitação assim. Mas daqui para frente as coisas começam a ficar mais legais.

Vimos como definir uma tag apenas. E se quisermos já indicar os elementos filhos? Para isso basta usar o >, que no CSS indica um elemento filho.

	ul>li
<!--- Após "tab" --->
	<ul>
		<li></li>
	</ul>

Algo importante a notar é que você não pode colocar espaço na declaração, como ul > li.

React - Introdução
Curso React - Introdução
Conhecer o curso

Subir um nível

Podemos entender que o > é para descer um nível dentro do último elemento declarado. Mas, e se quisermos declarar algo que deveria ficar lá em cima, com outro elemento? Podemos usar o ^. Ele serve para indicar ao Emmet que queremos subir um nível.

Imagine que queremos uma lista com um item de lista. Mas que também queremos declarar uma div após a lista. Como já declaramos o item de lista, é preciso subir até o nível da lista novamente. Você pode colocar quantos ^ quiser.

	ul>li>span^^div
<!--- Após "tab" --->
	<ul>
		<li><span></span></li>
	</ul>
	<div></div>

Use o Emmet para gerar Vários Elementos!

Sem dúvida até aqui já podemos economizar uma boa quantidade de teclas pressionadas. Mas gerar apenas um filho em um elemento não é grande coisa. Para que possamos gerar vários filhos, basta usar o * (que para o Emmet indica uma multiplicação) e indicar o número de elementos que você quer que sejam gerados.

	ul>li*5
<!--- Após "tab" --->
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>

E, claro, você pode juntar com outras coisas que aprendemos até aqui.

	ul.lista>li.item*5
<!--- Após "tab" --->
	<ul class="lista">
		<li class="item"></li>
		<li class="item"></li>
		<li class="item"></li>
		<li class="item"></li>
		<li class="item"></li>
	</ul>

Variáveis dentro de um looping

Não apenas podemos gerar vários elementos com *, como também podemos utilizar o símbolo $ como uma “variável” que armazena o número do elemento.

	ul.lista>li.item-${Produto $}*5
<!--- Após "tab" --->
	<ul class="lista">
		<li class="item-1">Produto 1</li>
		<li class="item-2">Produto 2</li>
		<li class="item-3">Produto 3</li>
		<li class="item-4">Produto 4</li>
		<li class="item-5">Produto 5</li>
	</ul>

Você também pode usar vários $ caso queira que os números tenham um zero como prefixo.

	ul.lista>li.item-${Produto $$$}*5
<!--- Após "tab" --->
	<ul class="lista">
		<li class="item-1">Produto 001</li>
		<li class="item-2">Produto 002</li>
		<li class="item-3">Produto 003</li>
		<li class="item-4">Produto 004</li>
		<li class="item-5">Produto 005</li>
	</ul>

Para fazer os números virem em ordem decrescente, adicione @- após o $.

	ul.lista>li.item-${Produto $$$@-}*5
<!--- Após "tab" --->
	<ul class="lista">
		<li class="item-1">Produto 005</li>
		<li class="item-2">Produto 004</li>
		<li class="item-3">Produto 003</li>
		<li class="item-4">Produto 002</li>
		<li class="item-5">Produto 001</li>
	</ul>

Ou então, após @ coloque o número que você quer que seja o primeiro.

	ul.lista>li.item-${Produto $$$@5}*5
<!--- Após "tab" --->
	<ul class="lista">
		<li class="item-1">Produto 005</li>
		<li class="item-2">Produto 006</li>
		<li class="item-3">Produto 007</li>
		<li class="item-4">Produto 008</li>
		<li class="item-5">Produto 009</li>
	</ul>

HTML5 + CSS3 - Fundamentos
Curso HTML5 + CSS3 - Fundamentos
Conhecer o curso

Elementos Irmãos

Por mais que declarar elementos filhos seja muito útil, seria bom também poder indicar os elementos que estarão no mesmo nível do primeiro elemento declarado. E podemos fazer isso com o operador +. Assim teremos elementos gerados no mesmo nível.

	div+span+div
<!--- Após "tab" --->
	<div></div>
	<span></span>
	<div></div>

Agrupamento de Elementos

Você pode usar ( ) para agrupar elementos. Assim fica mais simples para você declarar uma árvore de elementos e depois indicar outros elementos irmãos. Bem mais simples do que ficar usando ^ para subir um nível.

	div>(header>navigation)+(main>article)+(footer)
<!--- Após "tab" --->
<div>
	<header>
		<navigation></navigation>
	</header>
	<main>
		<article></article>
	</main>
	<footer></footer>
</div>

Emmet gera automaticamente Lorem Ipsum

Talvez você já tenha visto o texto conhecido como Lorem Ipsum. Ele é muito usado para preencher sites que ainda não estão com um texto definido. Ao invés de pesquisar pelo Lorem Ipsum para copiar e colar no seu código, o próprio Emmet faz isso para você!

	div>lorem
<!--- Após "tab" --->
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio repellendus laudantium sunt animi dolorum optio odit vel praesentium, atque non repellat a provident quisquam earum officia libero eos quos. Cum!</div>

Você também pode indicar um número após o comando lorem. Assim você pode controlar o tamanho do texto a ser gerado:

	lorem5
<!--- Após "tab" --->
	Lorem ipsum dolor sit amet.


	lorem10
<!--- Após "tab" --->
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, tempora!

Desenvolvedor Especialista Front-end
Formação Desenvolvedor Especialista Front-end
Conhecer a formação

Autor(a) do artigo

Akira Hanashiro
Akira Hanashiro

Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos.

Todos os artigos

Artigos relacionados Ver todos