google analytics

miércoles, 16 de julio de 2014

Usando Sublime Text y instalando el package control.

Hace un tiempo descubrí un editor de texto que me encantaba por la cantidad de plantillas y la forma en que te ayuda a crear diferentes tipos de documentos, sobre todo html y css3 de una manera fácil y rápida. Estamos hablando de Sublime Text, una herramienta open source que tiene una versión de pago pero que también puedes trabajar sin problemas con la versión free.

Entre algunas cosas que me gusta hacer con esto es crear html ya que te permite hacerlo de una manera fácil. Para esto lo que hacemos es abrir un nuevo documento en Sublime, lo guardamos como demo.html por ejemplo y empezamos a crear nuestro html.

Como Sublime sabe que estamos editando un documento html utiliza el marcado respectivo para este tipo de documento, por lo que si escribimos solo html y pulsamos la tecla tab, se genera automaticamente el cuerpo básico de un documento html.



Lo mismo por ejemplo si queremos crear un div con una clase especifica por ejemplo con la clase "header". Lo único que tenemos que hacer es posicionar el cursor dentro del editor de texto en la parte que queremos crear ese div y escribir lo siguiente:

div.header + tecla tab 


El resultado será el siguiente:


Como ven, con algunas reglas podemos ir creando un documento html rápidamente. Pero Sublime tiene muchas cosas más, pero para ello necesitamos instalar un paquete de controles, por defecto al instalarlo por primera vez no lo tiene, pero para que tú puedes verificarlo haces lo siguiente:

- Dentro de Sublime pulsas CTRL + SHIFT + P y te aparece una ventana flotante, dentro de ella escribes Package Control y si es que no devuelve ningún resultado, es porque aún no lo tienes instalado.


Para instalarlo vamos al siguiente enlace:

https://sublime.wbond.net/installation

Copiamos el texto que sale dentro del cuadrado rojo de la imagen:


Vamos a Sublime, al Menú View/Show Console y lo pegamos ahí:


Luego de eso vuelves a dar a las teclas CTRL+SHIFT+P y escribes PackageControl y deben aparecer esta vez resultados:


De la lista de resultados, seleccionamos la que dice Package Control: Install Package. Una vez instalado aparece un listado de los plugins disponibles del Package Control para utilizar en nuestro editor de texto. Como ejemplo utilizaremos el plugin "EMMET" y le damos a enter. Debe salir la siguiente imagen:


Como se ve en la imagen, nos pide reiniciar el editor. Una vez reiniciado volvemos al documento y podemos empezar a jugar con este plugin. En el documento html que estábamos creando ponemos lo siguiente.

div.padre>div.hijos*2


Y pulsamos la tecla tab y el resultado debe ser el siguiente:


Como ven se ha generado un div con la clase padre y dos divs hijos con la clase hijos de una manera super fácil. Si quieren profundizar en esto, busquen en google Zen Coding con sublime y sáquenle partido a todas las funcionalidades y ayudas que nos ofrece Sublime Text.

Un abrazo