Emmet.io – el toolkit esencial para los desarrolladores Web

0
11904

Emmet.io – el toolkit esencial para los desarrolladores Web

0.Índice de Contenidos

1. Introducción

Si programas habitualmente en HTML, XML o CSS (o esporádicamente) entonces seguramente te interesa Emmet.io.

http://docs.emmet.io/

Emmet es un plugin que se puede incorporar a muchos de los editores de texto más populares, como Sublime Text, Brackets, Eclipse, Netbeans. Permite que la parte mecánica de la programación, que es escribir los tags o palabras reservadas suponga mucho menos esfuerzo y tiempo.

Se basa en poder escribir pequeñas abreviaciones que generan grandes estructuras de código de forma automática.

Por poner un ejemplo práctico del potencial de este plugin, vamos a crear una tabla 4X4 en HTML con Emmet:

Escribiendo table>tr*4>td*4 y pulsando el tabulador (Ctrl+E en Windows), generamos

		<table>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	

Como se puede ver, una vez que la probéis, os preguntareis cómo podíais haber estado todo este tiempo sin Emmet, además tiene una curva de aprendizaje bastante rápida.

2. Instalación

Nosotros vamos a instalarlo en SublimeText3, que es el editor que uso actualmente para trabajar con frontend.

Si quereis instalarlo en otro editor que uséis a diario podéis buscar la forma en internet, hay bastante información al respecto.

Package Control

Lo primero es, si no teneis instalado el Package control, que es un cómodo instalador de paquetes, instalarlo.

Sugiero que lo hagáis a través de la consola de SublimeText

En lugar de proporcionaros yo el código, os recomiendo que copiéis el código desde el enlace oficial por si sufriera algún cambio.

https://sublime.wbond.net/installation

El que yo he usado es el correspondiente a la versión 3

Ahora, abrimos la consola de Sublime con View > Show Console

Pegamos en la parte de abajo el código, si todo sale bien, este código habrá descargado los paquetes necesarios.

Ahora procedemos a instalar Emmet.io para Sublime Text 3

Cerramos la consola y pulsamos Ctrl + Shift + P para abrir la paleta de comandos.
Escribimos install para instalar el Install Package y lo seleccionamos

Ahora buscamos Emmet y lo instalamos, puede tardar un poco dependiendo de nuestra conexión a internet.

Ya tenemos todo lo necesario, vamos a ver qué podemos hacer con este plugin.

3. Primer contacto

Vamos a ver algunos ejemplos de uso para este plugin

Hijos >

Si queremos por ejemplo hacer un div con un párrafo hijo dentro, podemos escribir algo como

div>p Dándole al tabulador se transforma en

				<div>
					<p></p>
				</div>
			

Esto podemos encadenarlo tantas veces como queramos

body>div>p>strong da como resultado

				<body>
					<div>
						<p><strong></strong></p>
					</div>
				</body>
			

Hermanos +

Podemos querer que dos tags sean hermanas entre sí, esto se consigue con el +

body>p+img

				<body>
					<p></p>
					<img src="" alt="">
				</body>
			

Subir un nivel ^

Si estamos en una estructura más larga, quizá queramos que un elemento pertenezca al nivel del padre del anterior, esto se consigue con ^

body>div>p^img

			<body>
				<div>
					<p></p>
				</div>
				<img src="" alt="">
			</body>
		

Número de elementos

Para el caso de la introducción creamos una tabla con varios td, esto lo hicimos gracias al *

p*5 devuelve 5 veces <p>

			<p></p>
			<p></p>
			<p></p>
			<p></p>
			<p></p>
		

Esto es especialmente útil haciendo tablas o listas

ul>li*5

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

Agrupaciones ()

(p*2)(img*2)

			<p></p>
			<p></p>
			<img src="" alt="">
			<img src="" alt="">
		

div>(header>ul>li*2>a)+footer>p

			<div>
				<header>
					<ul>
						<li><a href=""></a></li>
						<li><a href=""></a></li>
					</ul>
				</header>
				<footer>
					<p></p>
				</footer>
			</div>
		

Clases e Ids

Muchos usamos clases e ids en las tags para el uso de javascript o css, Emmet tambien nos proporciona una forma cómoda de añadirlas

p.clase

			<p class="clase"></p>
		

p#clase

			<p id="clase"></p>
		

Se pueden añadir varias clases concatenándolas

p.clase1.clase2

			<p class="clase1 clase2"></p>
		

Incluso podemos definir autonuméricos con el $


ul>li.clase$*5

			<ul>
				<li class="clase1"></li>
				<li class="clase2"></li>
				<li class="clase3"></li>
				<li class="clase4"></li>
				<li class="clase5"></li>
			</ul>
		

Esto es muy potente, pudiendo usarse varios dígitos

ul>li.clase$$*5

			<ul>
				<li class="clase01"></li>
				<li class="clase02"></li>
				<li class="clase03"></li>
				<li class="clase04"></li>
				<li class="clase05"></li>
			</ul>
		

Se puede completar aún más usando la @

@- le da el orden inverso a la ordenación

ul>li.clase$@-*5

			<ul>
				<li class="clase5"></li>
				<li class="clase4"></li>
				<li class="clase3"></li>
				<li class="clase2"></li>
				<li class="clase1"></li>
			</ul>
		

@4 empezará por el numero 4

ul>li.clase$@4*3

			<ul>
				<li class="clase4"></li>
				<li class="clase5"></li>
				<li class="clase6"></li>
			</ul>
		

Se pueden incluso definir los atributos del tag

p[title=»Hola mundo»]

			<p title="Hola mundo"></p>
		

Un detalle importante es que no tiene un listado de tags, por lo que funcionará para cualquier nombre que escribamos, haciendolo útil para xml

etiqueta>subetiqueta

			<etiqueta>
				<subetiqueta></subetiqueta>
			</etiqueta>
		

También tiene modos para trabajar en CSS pero por no extenderme demasiado os dejo el enlace con la documentación oficial para el que lo quiera mirar.

http://docs.emmet.io/

4. Conclusión

Espero que os haya gustado este tutorial y que os sea útil. Considero una gran mejora mi manera de programar HTML/XML con Emmet a como lo hacía antes a mano.

También ayuda a eliminar el mal hábito de estar copiando y pegando trozos de otros programitas.

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad