Introducción

No sé cómo definir a Emmet, pero es algo como un plugin para los editores de texto más populares. Permite expandir “abreviaciones” desde las más simples hasta las más complejas.

Con Emmet, podemos agilizar el proceso de desarrollo, pues nos ahorra escribir mucho código. Este plugin es muy querido por la comunidad porque tiene soporte para la mayoría de editores.

Hoy mostraré algunas abreviaciones que utilizo en mi día a día.

Abreviaciones

Para expandir las abreviaciones, creo que se utiliza la tecla del tabulador.

Estructura de un documento HTML 5

html:5

Etiqueta meta viewport para sitios responsivos

meta:vp

Div con el id “contenedor”

#contenedor

Div con la clase “clase-1” y “borde-rojo”

.clase-1.borde-rojo

Div con el id “principal”, que tenga las clases “xs-12” y dentro de él tenga otros dos divs con las clases “borde-azul”

#principal.xs-12>.borde-azul*2

Botón con clases

btn.clase-1.clase-2

Botón con clases “btn” y “btn-success” cuyo tipo sea “button”

btn.btn.btn-success[type=”button”]

Botón tipo “submit”, que en su interior diga “Guardar”

btn[type=”submit”]{Guardar}

Lista con 5 elementos

ul>li*5

Lista en donde el contenido de cada elemento tenga el texto con el índice y la clase “list-element”

ul>li.list-element{Soy el elemento $}*5

Formulario con nombre, action y método para solicitar un correo electrónico. El input debe tener la clase “form-control” y un placeholder

form[name=”miFormulario”][action=”archivo.php”][method=”POST”]>label[for=”correo”]{Correo electrónico:}+input[type=”email”][placeholder=”Escribe tu correo…”]#correo.form-control

Tabla completa con clases

Mi favorito, genera la estructura de una tabla.

table.table.table-bordered>(thead>tr>th*3)+(tbody>tr>td*3)

Escapar índice

Si deseamos que aparezca el $ en lugar del número de elemento, debemos escaparlo con \. Pongamos el ejemplo de una lista con 3 elementos:

Conclusión

Todos los gifs que ves lo he grabado usando ScreenToGif.

Espero no haberme pasado con los ejemplos, pero si lo hice fue para demostrar todo lo que podemos hacer. Igualmente podemos ir generando elemento por elemento; es decir, en el caso del formulario, primero hacemos el form, una vez dentro expandimos el label e input, etcétera.

De esta forma no se complican tanto las cosas y todo es legible. Espero que este tutorial haya servido para algo. Te invito a probar con tus propias abreviaciones y a leer la documentación oficial.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 3,194 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

3 Comentarios

German · abril 18, 2020 a las 9:47 am

Maravilloso! Gran tutorial, felicitaciones. Quisiera saber si puedes hacer un tutorial para compilar SASS con Sublime Text 3, pero bajo Linux; actualmente tengo Linux Mint 19 y no he podido compilar con SASS; la idea sería SASS con Libsass bajo Linux. Mil gracias.

Luis · marzo 14, 2019 a las 11:12 pm

Excelente la explicación y el tutorial, tengo una duda y es la siguiente:

Hay algún paquete o plugin que permita detectar errores de sintaxis dentro de un archivo html, CSS o JS, ya que en los editores de código que he usado como atom, Visual studio code y sublime text no he encontrado forma de resolver este problema.

    parzibyte · marzo 15, 2019 a las 12:34 am

    Hola. Con Sublime Text no he encontrado ninguno (aunque debe haber) pero VSCode sí te brinda chequeo de sintaxis al menos para JS y debe haber extensiones para los otros lenguajes. Un buen IDE que te recomiendo (de paga, pero es muy bueno) es WebStorm y sus hermanos como PHPStorm, Goland, etcétera, todos traídos de JetBrains. Igualmente me parece que NetBeans es un buen IDE para esto.

    Espero tener tiempo para buscar algunas extensiones y hacer unos posts sobre las mismas, mientras tanto te invito a suscribirte y seguirme en mis redes para estar en contacto. Saludos

Deja un comentario

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: