Con este tutorial de programación conocerás comandos y atajos básicos de Emmet, que te servirán para autocompletar y ahórrate mucho tiempo al estar programando código HTML en Visual Studio Code. Si estás interesado en aprender más te dejo los links del sitio oficial al final de este blog, así como una hoja de resumen de comandos completos (Emmet cheat-sheet).
¿HTML complicado?
Como desarrolladores Web, nos encontramos siempre con la labor de escribir código HTML y CSS, y más si utilizas frameworks como Bootstrap. Aprender código HTML y CSS es relativamente fácil, solo aprendes algunas etiquetas HTML “tags” y estás listo. Sin embargo, el problema se encuentra en la sintaxis; no puedes olvidar un sólo símbolo, un paréntesis angular, una coma o una diagonal porque no funcionará tu HTML.
Es bastante común que estos errores ocurran y que todo sea por un pequeño detalle, esta situación nos hace perder nuestro valioso tiempo de desarrollo (además de lo frustrante que puede resultar), es por ello que quiero compartir esta herramienta que quizá no conozcas (o quizá sí y solo quieras aprender algo más sobre la misma) esta herramienta me ha sido de mucha utilidad, te ahorra tiempo y reduce los errores de sintaxis en HTML y CSS de manera dramática.
Si bien VS Code tiene la posibilidad de crear “snippets” (que soy muy útil y explicaré en otro artículo a detalle), cuenta con la enorme ventaja de contar con Emmet ya integrado. No necesitas instalación.
Quizás al utilizar VS Code y redactar directamente HTML pienses que te presenta el famoso “auto complete” de los productos de Visual Studio y de otros editores de texto. Sin embargo, lo que aparentemente vemos como un autocompletar realmente es Emmet.
¿Qué es Emmet?
Emmet es un plugin que existe para la mayoría de los editores de texto comunes, pensado para mejorar tu flujo de trabajo, e inspirado en los selectores de CSS “CSS Selectors”, por lo que si sabes algo de CSS ya sabes algo de Emmet, pero lo puedes aplicar en HTML.
Como te decía Visual Studio Code ya viene de paquete con Emmet listo para usarse, pero en caso de que estés leyendo esto y no desees usar VS Code te dejo la liga del producto:
Emmet es un plug-in que está disponible para prácticamente todos los editores de texto más comunes.
Emmet en acción
Este artículo es basado en VS Code, por lo que Emmet ya se encuentra instalado; tan solo con editar un archivo HTML o CSS, Emmet se encontrará activo por defecto. Si cuentas con otro editor de texto sigue la liga anterior, instala el plugin, y puedes seguir con los ejemplos de este artículo.
Te muestro un código HTML típico:
| HTML | Emmet |
| <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″ /> <title>Document</title> </head> <body> </body> </html> |
! |
Si bien esto es una abreviatura Emmet, ilustra el potencial de esta herramienta.
Pero vamos viendo la sintaxis, que es donde se encuentra su verdadero potencial.
La mejor manera de explicarlo es mediante ejemplos por categoría, primero por comando y posteriormente todos juntos.
Al escribir una abreviatura y/o comando pulsa “Enter” o “Tab” para producir el resultado en HTML, pulsa “undo” (ctrl+z) para volver al código Emmet.
Abreviaturas:
| Sintaxis Emmet | Resultado en HTML |
| div | <div></div> |
| p | <p></p> |
| a | <a href=””></a> |
| br | <br> |
| h1 | <h1></h1> |
| form | <form action=””></form> |
El concepto es simple, tan solo con escribir el nombre del elemento HTML, Emmet producirá el resto ¡Pruébalo en un documento HTML de VS Code!
Operadores principales:
Operador Hermanos: +
Use el operador + para colocar elementos cerca uno del otro, en el mismo nivel:
| Sintaxis Emmet | Resultado en HTML |
| div+p | <div></div> <p></p> |
| div+h1+h2 | <div></div> <h1></h1> <h2></h2> |
| div+p+bq | <div></div> <p></p> <blockquote></blockquote> |
| div+div+div | <div></div> <div></div> <div></div> |
Cualquier nombre de un elemento HTML junto con el operador + producirá un HTML inclusive de elementos desconocidos:
| Sintaxis Emmet | Resultado en HTML |
| myelemento+myelemento | <myelemento></myelemento> <myelemento></myelemento> |
Puedes usar el operador > para anidar elementos uno dentro del otro: Operador Hijo: >
| Sintaxis Emmet | Resultado en HTML |
| div>h1 | <div> <h1></h1> </div> |
| div>ul>li | <div> <ul> <li></li> </ul> </div> |
| div>article>p | <div> <article> <p></p> </article> </div> |
Si bien el código HTML producido por Emmet puede ser de utilidad, aún tendríamos que completar parte del mismo para producir los resultados esperados, como, por ejemplo:
<div class=”row”>Contenido</div>
Emmet puede ayudarnos en especificar clases, tributos, Id’s y contenidos también utilizando los siguientes comandos:
Operador de atributo clase: .
Para especificar la clase (class) a la que pertenece el elemento.
| Sintaxis Emmet | Resultado en HTML |
| div.row | <div class=”row”></div> |
| div.class1.class2 | <div class=”class1 class2″></div> |
| div.header+div.footer combinado con operador de hermanos |
<div class=”header”></div> <div class=”footer”></div> |
| div.row>h1.title combinado con operador hijo |
<div class=”row”> <h1 class=”title”></h1> </div> |
Operador de id: #
Para especificar el Id del elemento
| Sintaxis Emmet | Resultado en HTML |
| div#myDiv | <div id=”myDiv”></div> |
| h1#myId | <h1 id=”myId”></h1> |
| div#myrow+div#mytitle
combinado con operador de hermanos |
<div id=”myrow”></div> <div id=”mytitle”></div> |
| div.row#myrow+div.title#mytitle
combinado con operador de hermanos y de clase |
<div class=”row” id=”myrow”></div> <div class=”title” id=”mytitle”></div> |
| div.row#myRowId>div.title#myTitleId>h1#myh1Id
combinado con operador de hijo y de clase |
<div class=”row” id=”myRowId”> <div class=”title” id=”myTitleId”> <h1 id=”myh1Id”></h1> </div> </div> |
| div.row#myRowId>p.myPClass#myPId+h1.TitleClass#TitleId
combinado con operador de hijo, de hermano y de clase |
<div class=”row” id=”myRowId”> <p class=”myPClass” id=”myPId”></p> <h1 class=”TitleClass” id=”TitleId”></h1> </div> |
Texto: { }
Para escribir texto en el elemento:
| Sintaxis Emmet | Resultado en HTML |
| h1{hello} | <h1>hello</h1> |
| div>label{Name:} | <div><label for=””>Name:</label></div> |
| a{mylink} | <a href=””>mylink</a> |
| div.card>h1{Card Title}+p.card–text#myId{Subtitle} | <div class=”card”> <h1>Card Title</h1> <p class=”card-text” id=”myId”>Subtitle</p> </div> |
Notación de atributos: [ attr ]
Para especificar cualquier otro atributo del elemento
| Sintaxis Emmet | Resultado en HTML |
| td[title=“Hello world!”] | <td title=”Hello world!”> </td> |
| div.card-body[[collapse]=false] | <div class=”card-body” [collapse]=”false”> </div> |
| input[type=”radio”]#myInput | <input type=”radio” id=”myInput”> |
Multiplicación: *
Para definir cuántas veces se debe enviar el elemento:
| Sintaxis Emmet | Resultado en HTML |
| div*5 | <div></div> <div></div> <div></div> <div></div> <div></div> |
| li*3 | <li></li> <li></li> <li></li> |
| div.row>div.col-md-3*4{MyText} | <div class=”row”> <div class=”col-md-3″>MyText</div> <div class=”col-md-3″>MyText</div> <div class=”col-md-3″>MyText</div> <div class=”col-md-3″>MyText</div> </div> |
Numeración de elementos: $
Con el operador de multiplicación * puedes repetir elementos, pero con $ puedes enumerarlos. Coloca el operador $ dentro del nombre del elemento, el nombre del atributo o el valor del atributo para generar el número actual del elemento repetido:
| Sintaxis Emmet | Resultado en HTML |
| div*5{myDiv$} | <div>myDiv1</div> <div>myDiv2</div> <div>myDiv3</div> <div>myDiv4</div> <div>myDiv5</div> |
| ul>li*3{$} | <ul> <li>1</li> <li>2</li> <li>3</li> </ul> |
| div.row>div.col-md-3*4{MyText} | <div class=”row”> <div class=”col-md-3″>MyText</div> <div class=”col-md-3″>MyText</div> <div class=”col-md-3″>MyText</div> <div class=”col-md-3″>MyText</div> </div> |
Modificadores a este comando usando múltiples $$$ (para anteponer Ceros):
| Sintaxis Emmet | Resultado en HTML |
| div*5{myDiv$$$} | <div>myDiv001</div> <div>myDiv002</div> <div>myDiv003</div> <div>myDiv004</div> <div>myDiv005</div> |
| ul>li*3{$$$$} | <ul> <li>0001</li> <li>0002</li> <li>0003</li> </ul> |
| div.row>div.col-md-3*4{MyText$$} | <div class=”row”> <div class=”col-md-3″>MyText01</div> <div class=”col-md-3″>MyText02</div> <div class=”col-md-3″>MyText03</div> <div class=”col-md-3″>MyText04</div> </div> |
Subir de nivel: ^
Al utilizar el operador > Hijo, Emmet entra al subnivel del elemento solicitado como en:
div>ul>li
dará como resultado:
<div>
<ul>
<li></li> <- nivel actual
</ul>
</div>
Sin embargo, si deseamos continuar la expresión en un nivel superior al nivel en que termina la expresión podremos utilizar el comando ^ para subir al nivel inmediato superior en la expresión, por ejemplo:
div>ul>li^div>h1
dará como resultado:
<div>
<ul>
<li></li> <-Nivel antes de ^
</ul>
<div> <-Nivel después de ^
<h1></h1>
</div>
</div>
| Sintaxis Emmet | Resultado en HTML |
| div+div>h1{MyH1}^div>h2{MyH2} | <div></div> <div> <h1>MyH1</h1> </div> <div> <h2>MyH2</h2> </div> |
| div>h1{MyH$}*3^div>h2{MyH$}*2^div>h3{MyH3$}*2 | <div> <h1>MyH1</h1> <h1>MyH2</h1> <h1>MyH3</h1> </div> <div> <h2>MyH1</h2> <h2>MyH2</h2> </div> <div> <h3>MyH31</h3> <h3>MyH32</h3> </div> |
También Emmet sirve para escribir código CSS por lo que no olvides checar la documentación si estás interesado.
Tabla de códigos Emmet y documentación
https://docs.emmet.io/cheat-sheet/
resumen en versión pdf:
https://docs.emmet.io/cheatsheet-a5.pdf
Dinos en los comentarios o envíanos un correo a content@coderslink.com si estas interesado en temas relacionados a la programación web, desarrollo y herramientas, y estaremos encantados de publicar artículos al respecto.
Recuerda que CodersLink es la puerta a oportunidades laborales en las mejores empresas, checa los empleos disponibles para web developer aquí.
Vacantes Recientes
Blogs Relacionados
