Escribir de forma rapida con las abreviaturas de emmet

Hoy veremos como escribir nuestro código de forma rápida utilizando las abreviaturas que nos permite utilizar el plugin emmet.

Si eres de las personas que trabajan utilizando HTML o CSS sabrás que crear estructuras como un titulo o un cuerpo es monótono pues las estructuras son casi siempre parecidas, entonces para evitar estar reescribiendo lo mismo emmet viene a nuestra ayuda, no alargarmos mas este tutorial  empezamos.

Escribir de forma rápida con las abreviaturas de emmet

Primero debes tener instalado el plugin emmet, si aun no lo tienes instalado te recomiendo que revises cualquiera de los siguientes links, te prometo que son cortos y directo al grano

1.- Como instalar emmet (zend coding)
2.- Como instalar plugin en sublime text

NOTA IMPORTANTE:
Antes de empezar quiero aclarar que los nuevo no pueden usar emmet porque cometen un error y es que para que funciones primero debes guardar tu archivo con su respectiva extensión por ejemplo prueba.html luego de eso puedes utilizarla.

html5
Para escribir una estructura de html solo basta con escribir html5 y luego presionas la tecla tab otra variante es escribiendo html:5 + tab puedes hacer tus pruebas.

 article>h2+p  

Ahora vamos suponer que necesitamos utilizar la etiqueta <article> y dentro necesitamos insertar la etiqueta <h2> y <p> para realizar esta acción usaremos article>h2+p   luego seleccionamos tab

El símbolo >, quiere decir dentro de esta etiqueta y el símbolo + es una separación.

nav>a*6
Ahora supongamos que necesitamos crear un menú de navegación, si recuerdan el menú de navegación tiene varias referencia ya sea para llamar imagenes u elementos entonces haremos lo siguiente:

Ahora supongamos que vamos a trabajar con un archivo css y necesitamos usar las abreviaturas, para ello recuerda guardar tu primero tu extensión como css por ejemplo prueba.css

Recuerda que luego escribir tu abreviatura, debes presionar la tecla TAB, para que te salga el resultado.

Y si deseas saber más sobre Emmet, te invito a que ingreses a la página oficial de Emmet, también revisar el cheat-sheet, para que aprendas más abreviaturas de esta genial herramienta.

Read More

Como instalar emmet (zend coding)

Hola amigos hoy veremos como instalar el plugin emmet, o zend coding  como se le conocía antes, se que solo quieres ver el tutorial e instalarlo rápidamente, pero seria bueno que leas un poco el tutorial para evitar errores, prometo hacer estas lineas cortas.

Primero si no sabes para que sirve emmet déjame decirte que es uno de los plugin mas útiles que podrás instalar te ahorra el tiempo a la hora de programar, digamos que con solo escribir algunas palabras como abreviatura puedes obtener toda una estructura de código así ahorrarte tiempo, sin alargar mas esto empezamos con lo que necesitas para instalar emmet.

Como instalar emmet (zend coding)

Para poder instalar cualquier plugin primero debes instalar su gestor de descarga el cual vendria ser el package control, si aun no lo tienes configurado te recomiendo que revises este link: como instalar package control.

Una vez instalado debes hacer lo siguiente:

Paso 1: 

En el menú de tu sublime text selecciona Preferences--> Package Control

Paso 2

Se abrirá una pequeña ventana en ella debes eligir Install Packages

Paso 3

Se abrirá una nueva ventana, en ella debemos buscar emmet y luego seleccionar para que se instale, si todo lo isiste bien ya se habrá instalado emmet.

Read More