SummArg | Cursos y recursos para webmasters

Escribir HTML y CSS mas rápido con Emmet

Emmet es una herramienta que está disponible como plugin para los editores mas populares del mercado y se basa en el concepto de Zen Coding. Tras escribir una línea con determinada sintaxis, normalmente fácil de entender y recordar, presionamos las teclas para expandir (ctrl+alt+enter en Notepad++) y obtenemos las etiquetas resultantes. Normalmente las reglas de escritura guardan similitud con reglas de CSS, así que si bien tener una cheat sheet cerca puede ser útil al principio, no cuesta memorizarlas.

emmet1

Tras instalar el plugin correspondiente a nuestro editor, debemos cotejar que no se superpongan los shortcuts que trae por defecto con los que otros plugins que ya tengamos instalados. Salvando ese detalle, la instalación es sencilla. Por ejemplo, en el caso de Notepad++ no debemos descargar nada, simplemente lo buscamos desde Plugins > Plugin Manager.

emmet2

Podemos ver la documentación en este link. Aquí unos ejemplos de uso de Emmet expandiendo reglas HTML. Para CSS también tiene sus propias reglas.

Ejemplo con etiquetas HTML:

emmet3

Ejemplo indicando una cantidad determinada de etiquetas de elemento:

emmet4

También podemos especificar que queremos que haya un número creciente con el signo pesos:

emmet5

Descargar Emmet | Cheat Sheet

Dejar un comentario