Cómo instalar SublimeText, Stylus y Emmet

En este tutorial vamos a aprender a instalar SublimeText y Stylus. Para los que no los conocen, SublimeText es uno de los mejores editores de código que existen y Stylus es un excelente pre-procesador de código CSS, dos herramientas muy robustas para todo Frontend.

Lo primero que debemos hacer es instalar node.js, ya que Stylus necesita de él para poder funcionar.

Instalar Node.js en Windows

Ingresamos a nodejs.org, damos al botón “Install” e instalamos el archivo descargado (el típico siguiente, siguiente, finish).

Instalar Stylus en Windows

Ahora sigue instalar stylus, abrimos la terminal de windows (cmd) y escribimos:

Código :

npm –g install stylus

• npm: llamamos a la paquetería de node.js
  
• -g: decimos que lo instalaremos en global para todo el pc
  
• Install: tengo que explicar para qué sirve?
  
• Stylus: tengo que explicar para qué sirve?
  

Good! Si todo salió bien, ya tenemos Stylus en nuestra PC.

Instalar SublimeText2 en Windows

Para tener la mejor experiencia creando nuestro código CSS, instalaremos uno de los mejores (sino el mejor) editores de textos que existen, “SublimeText”.

En este caso instalaremos SublimeText2 (que es el que uso), vamos a www.sublimetext.com/2 y descargamos la versión para nuestro S.O. (next -> next-> finish).

Instalar paquetes en SublimeText

Ahora que tenemos instalado Stylus y SublimeText, vamos a instalar dos paqueterías que nos harán la vida más fácil y seremos mejores personas (ya parezco @freddier).

Emmet y Stylus Snippets

EMMET es una excelente herramienta de autocompletado de código que nos ahorrará muchísimo tiempo al codear (y hablo en serio) y la paquetería Stylus Snippets que nos mostrará una mejor vista de la sintaxis de Stylus.

Antes de instalar estas dos paqueterías, debemos de instalar el control de paqueterías de SublimeText2, para poder agregar paqueterías a SublimeText.

Instalar el Control de Paqueterías de SublimeText2

Ir a sublime.wbond.net/installation#st2 y copiamos este código:

Código :

import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

Abrimos SublimeText y vamos a:

Código :

View ->Show Console 

y pegamos el código que hemos copiado (el que está arriba).

Listo, ya quedó. Ahora sólo cierren y vuelvan a abrir el editor para que se guarden los cambios.

Instalar EMMET

La instalación de EMMET es muy sencilla, solo debemos de presionar:

Código :

Ctrl + Shift + p

y escribimos:

Código :

package control

Nos cargará una lista de opciones, elegimos:

Código :

Package Control: Install Package

Se nos abrirá otro cuadro como el anterior y escribimos “EMMET” y seleccionamos la primera opción “Emmet Css Snippets” y presionamos Enter.

Instalar Stylus Snippets para SublimeText

Realizamos los mismos pasos que en el caso de EMMET:

Código :

Ctrl + Shift +p -> package control -> Package Control: Install Package -> Stylus-Snippets

Perfecto! Ahora sí, ya tenemos las librerías para hacer nuestra experiencia con Stylus mucho más placentera.

Ejecutar Stylus

Bien, ahora que ya tenemos todos los requisitos previos, pasaremos a ejecutar stylus, para ello creamos 2 archivos:

Código :

//La extensión tiene que ser .styl porque es la extensión de stylus
style.styl

//Archivo para visualizar en el navegador los cambios
 index.html

Abrimos la terminal de Windows y nos movemos al directorio en donde está nuestro archivo style.styl, supongamos que hemos instalado xampp así que lo tendremos en C:\xampp\htdocs:

Código :

cp C:\xampp\htdocs

Ahora ejecutamos stylus:

Código :

stylus –w –c style.styl

• stylus: Indicamos que ejecutaremos stylus
  
• –w: Indicamos que cuando guardemos cambios se compile a CSS
  
• –c: (minúscula) Indicamos que se compile de forma comprimida o minificada
  
• style.styl: El archivo stylus que se compilará
  

Presionamos enter y se creará un archivo style.css que es el resultado de la compilación. Por último abrimos nuestro index.html y escribimos:

Código :

html:5

Presionamos “tab” y sublimeText nos creará las etiquetas básicas de html5 (esto por tener EMMET), y enlazamos nuestro archivo style.css

Código :

<link rel="stylesheet" href="style.css" />

Y listo, ya tenemos Stylus, SublimeText2 y Emmet listos para usarlos

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.