Como usar e instalar Emmet plugin para diseño web en sublimeText

By | 19:00 Leave a Comment
Este es uno de  los plugins mas utilizados y descargados obviamente con package control, ahora al inicio cometí el error de subestimar este plugin y luego vi lo importante que se volvió en mi vida, una de las ventajas es el enorme ahorro de tiempo en escribir código; la desventaja es que después de aprenderlo y usarlo no desearas usar otro editor y se te hará pesado y engorroso escribir código.

Con package control buscar Emmet y nos darán los siguientes resultados. 


pluginemmetinstall

Elegimos el primer resultado los demás son variaciones del plugin que veremos en otra ocasión, siempre después de cada instalación en sublime es recomendable reiniciar la aplicación.
Probandoooo! Para saber si se instaló correctamente este pllugin
Abrimos un documento con la extensión .html y tecleamos lo siguiente
Html:5  y le damos a la tecla TAB y nos mostrara lo siguiente en pantalla. 

emmet en sublime text


Observas la diferencia como yo! Te das cuenta cuantos golpes de tecla nos ahorramos, si eres un poco flojo como yo o peor este ese tu pllugin.
emmet en accion en sublime text

Aquí les dejo unos cuantos comandos que debemos aprender y notaremos que todo esta relacionado si conoces html y css será pan comido.
# à es para la ID
. à Es para CLASS
*à El número de repeticiones, que tendrá el elemento
() à Agrupa los elementos
>, Un elemento dentro de otro a>b, b está dentro de a.
+ adiciona un siguiente elemento al mismo nivel.
[Atributo] -> puedes introducir atributos.
$ -> introduce un numero en el atributo.
{} -> añade texto.
Unas imágenes para ver cómo funcionan, siga las imágenes y aprenderás. 

emmet en accion en sublime text 3

En una simple línea vemos como varia eso de los niveles.
 Podemos añadir si deseamos las clases e ids para identificar un tag.


 sublime text 2 plugin emmet


Hacer una lista o matriz era algo trabajoso al digitar, largo y aburrido vemos como podemos tener una lista con una sola línea.

como usar sublime text 2 plugin emmet

Se me olvidaba que también se puede introducir atributos y mas…

como usar sublime text 2 plugin emmet

Si deseas introducir un conteo ascendente y descendente emment también tiene la solución solo es cosa de saber dónde colocar los comandos apropiados mirad la imagen.


como usar sublime text 2 plugin emmet


como usar sublime text 2 plugin emmet

Ver de lo aprendido podemos obtener con una línea toda una estructura como dios manda. 

como usar sublime text 2 plugin emmet

Seguro esto es el inicio de desarrollo de este plugin.
Gracias por su tiempo, cualquier duda comenten. 
“Tengo Conocimiento, que de mi cerebro desea salir” L,E

0 comentarios:

Publicar un comentario