Para quem desenvolve sistemas para a web, certamente o maior dos problemas é ter que digitar repetidamente comandos HTML, pois é algo que nos toma bastante tempo, tornando-se algo cansativo. Foi pensando neste problema que foi desenvolvido o Emmet, um plugin que fica instalado na sua IDE que ajuda a escrever códigos HTML de uma forma muito prática, economizando um tempo considerável.
Aprenda HTML, CSS e Bootstrap 5 de forma fácil e prática!
Como instalar
Para instalar o Emmet, visite o site oficial, o qual possui uma relação de softwares suportados e ler o manual específico para o seu editor de textos. Geralmente o passo-a-passo é semelhante a este:
- Acesse o Package Manager (ou Package Controll) do seu editor
- Em Install Packages, procure por emmet e instale.
- A instalação manual normalmente consiste em clonar o repositório do plugin para a pasta /plugins do seu editor.
Se você usar o Visual Studio Code, é provável que ele já possua o Emmet instalado.
Usando o Emmet
Agora, é hora de ver como ele funciona. Após ter instalado ele e reiniciado o seu editor, crie um novo arquivo HTML e digite html:5 e em seguida pressione TAB ou Enter, você verá que uma estrutura HTMl 5 foi criada! Legal, não é?! Agora, vamos além, digite apenas um !, sim, isso mesmo, e mais uma vez tecle TAB ou Enter. Fantástico! Para criar outras estruturas é muito simples, se desejar abrir uma tag <div>, basta digitar div e o mesmo vale para qualquer outra tag. Para colocar uma classe ou id no elemento, basta fazer como neste exemplo:
div#alguma-id.alguma-class,
que terá como resultado,
<div id=”alguma-id” class=”alguma-class”></div>
Sintaxe HTML usando o Emmet
Abaixo há uma lista de ‘comandos’ do Emmet, que certamente farão a diferença na hora de escrever páginas HTML.
- > significa filho de. Por exemplo, um comando div>p criará um div com um parágrafo dentro.
- + significa irmão, ou seja, que estarão lado-a-lado, dentro do mesmo elemento pai. Tente div>h1+p.
- ^ sobe um nível. O elemento será criado um item acima na hierarquia. Teste article>div>h1+p^img.
- () agrupa elementos pais e filhos entre si, o que permite blocos irmãos com pai e filho. Exemplo: h1+(ul>li)+(ol>li).
- * permite multiplicar um elemento por uma determinada quantidade de vezes. Eis um exemplo perfeito de seu uso: ul>li*3.
- # e . são usados para criar uma id e class, como já mostrado anteriormente.
- {} insere texto no elemento. Tente ul>li{texto $}*3.
- [] para inserir os atributos de uma tag, como em img[src=ball.png].
Realmente, esse plugin dá superpoderes aos desenvolvedores! Para o caso de dúvidas ou uma lista mais completa do que o Emmet pode lhe proporcionar, visite a sua documentação. Contudo, este não é o único plugin com essa finalidade, há outros, que você só vai conhecer se ficar de olho nos posts aqui do site :-).
Comentários
Postar um comentário