Tutoriales Ahorra tiempo al escribir código HTML en Visual Studio Code utilizando Emmet por coderslink

Por Juan Carlos Raygoza L.

¿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 auto-completar 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 VS 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:

https://emmet.io/

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 utlidad, 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.cardtext#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 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>

Hasta aquí hemos llegado en esta pequeña introducción a los comandos básicos de Emmet, si estás interesado en aprender más te dejo los links del sitio oficial así como una hoja de resúmen de comandos completos. 

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/

resúmen en versión pdf:

https://docs.emmet.io/cheatsheet-a5.pdf

Dinos en los comentarios o envianos un correo a [email protected] 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 Coders Link es la puerta a oportunidades laborales en las mejores empresas, checa los empleos disponibles para web developer aquí.

Juan-Carlos-Raygoza-L-Guest-Post