Optimiza el tiempo que toman las tareas repetitivas con tres plugins para Sublime Text 2

Amamos nuestro trabajo, pero odiamos esas pequeñas tareas repetitivas que consumen tiempo valioso. LESSCSS y Emmet, entre otros, cubren esa función: liberarnos de tareas simples para que podamos poner nuestra mente en lo realmente esencial. Usuarios solidarios han desarrollado plugins gratuitos para Sublime Text 2 para que podamos integrar estas funcionalidades.

Para poder instalar y manejar los plugins en Sublime Text 2 necesitamos instalar primero que nada el Package Control.

¿CÓMO INSTALAR EL PACKAGE CONTROL?

Abrimos la consola con Control + ` (tilde invertido). Allí pegamos el siguiente código y luego damos enter.

import urllib2,os; 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())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

Este comando hará todo el trabajo por ti. ¡Listo! Ya puedes comenzar a añadir funcionalidades ilimitadas a Sublime Text 2.

¿Cómo instalo plugins?

Instalar plugins en Sublime Text 2 es muy sencillo si lo realizamos desde Package Control (quienes deseen seguir el método git pueden seguir los links “Visita el sitio” bajo cada plugin.

Vamos a Preferences > Package Control y allí nos dirigimos a Install Package.

A partir de este punto es muy sencillo, ya que podemos buscar por el nombre cada plugin. En cada plugin añado una línea con lo que deberían tipear para iniciar la búsqueda.

Los paquetes que ya tenemos instalados no aparecerán más en la lista.

Escribir estructuras HTML con selectores similares a CSS usando Emmet

Buscar "emme"

Escribir HTML puede ser más rápido utilizando una sintaxis similar a los selectores en CSS. Emmet — antes Zen Coding — es un set de herramientas desarrollado con la intención de acelerar los tiempos de maquetado.

Los que tienen instalado Zen Coding deberían desinstalar este plugin porque no recibirá más soporte, y pasarse a la versión nueva llamada Emmet.

Visita el sitio

Compilar documentos CSS a partir de LESS al guardar

Los pre-procesadores de CSS son muy útiles para ahorrarnos tiempo al realizar tareas repetitivas, como cambiar un mismo color varias veces por archivo o repetir la url a una imagen sprite. No sólo lo repetitivo se hace más sencillo, ya que podemos crear árboles para poder crear los estilos parent y children sin tener que especificar selectores en cada regla nueva.

Si bien LESS es una herramienta genial para trabajar más rápido, honestamente no me gusta procesar el .less en el sitio con un .js. Lo que prefiero hacer es compilar mi código CSS a partir del .less en mi IDE. Así en el sitio solamente tengo que colocar la hoja de estilos.

Los plugin de Sublime Text 2 que vamos a necesitar para poner en marcha la compilación serán tres:

LESS

Buscar "less"

Soporte para el marcado de sintaxis — syntax highlighting. Este paquete tiene varias ventajas:

  • La señalización de errores de tipeo va por cuenta de Sublime
  • Los errores de sintaxis o notaciones incorrectas se muestran con un color diferente
  • Podemos trabajar con SublimeOnSaveBuild, que reconoce la extensión .less

Cuando creamos un nuevo documento simplemente tenemos que elegir en View > Syntax que nuestro archivo tendrá la extensión .less.

Visita el sitio

LESS BUILD

Buscar "less"

Provee dos sistemas de construcción para los archivos .lessregular y minified. Si estás utilizando OSX o Linux, requiere lessc.

El nuevo archivo .css será guardado en  la misma carpeta que se halla el documento .less, bajo el mismo nombre.

Visita el sitio

SUBLIMEONSAVEBUILD

Buscar "sublimeon"

Al guardar procesa una build en los proyectos que lo ameritan. Es útil para trabajar con LESS pero también puede ser aplicado en proyectos que necesitan procesar código Javascript. Por defecto este plugin trabaja con las siguientes extensiones: "\\.(css|js|sass|less|scss)$"

Visita el sitio

Luego de tener instalados los tres paquetes podemos trabajar de la siguiente manera. Creamos el estilo en el documento .less y al guardar automáticamente se compila el archivo .css. Los comandos que podemos utilizar para guardar el documento y activar la build son Control + B (específica para trabajar con builds) o Control + S (general para guardar cualquier archivo).

Creación de archivos y carpetas desde Sublime con AdvancedNewFile

Buscar "adv"

Los días de estar armando código y tener que “salir” a crear un nuevo archivo de la manera convencional se terminaron. AdvancedNewFile te permite crear nuevos documentos — con la extensión incorporada — desde Sublime Text utilizando solamente el comando Control + Alt + N.

Este comando abre una pequeña terminal en la zona inferior de la pantalla donde crearemos la/s carpeta/s y el archivo. Cuando el archivo se creó, se abre y podemos comenzar a trabajar con él.

Visita el sitio

26 themes gratis para Sublime Text y TextMate

Ir al artículo

Modificado por última vez el día 22 de diciembre de 2012 a las 22:45
Scroll to top