Seguimos con la segunda parte de la serie Entornos de desarrollo, centrada en Sublime Text 2, y cómo configurarlo correctamente.


etiquetas-html-para-contenidos

En la entrada anterior, explicamos el porqué de haber elegido Sublime Text 2, además de algunas de las características más notorias que nos ayudarán a reducir tiempos y mejorar nuestro flujo de trabajo. En esta entrada, nos meteremos más a fondo en la configuración inicial, y en los plugins que un servidor usa.

Primeros Pasos

Una vez instalado y abierto, nos encontraremos con un editor en colores oscuro aparentemente insulso. Lo primero que haría sería activar la barra lateral, que nos servirá para navegar entre directorios de uno o varios proyectos (aunque como vimos en la entrada anterior, hay atajos de teclado para ni siquiera tener que buscarlo nosotros). Para ello, basta con ir a View > Side Bar > Show Side Bar.

PabloYglesias-SublimeText SideBar

Lo segundo adaptar la mesa de trabajo a nuestras preferencias. La tabla de colores que viene por defecto es aburrida y poco útil, así que iría a Preferences > Color Scheme y probaría diferentes temas (en mi caso me he quedado con el Monokai). Recomendaría elegir un tema que aproveche una amplia gama de colores, y no únicamente diferentes intensidades de un mismo color, por el simple hecho de que a un simple vistazo, seáis capaces de distinguir diferentes elementos de un texto, algo que agradeceréis cuando trabajéis con códigos amplios

PabloYglesias-Color Scheme

El layout es otro punto en el que quizás os interese deteneros. Si trabajáis normalmente en proyectos sencillos (páginas estáticas, por ejemplo), quizás el que viene por defecto sea idóneo. En caso contrario, probar a trabajar con dos layouts abiertos en columna (si tenéis una pantalla de resolución alta), o en filas (en caso de un notebook o pantallas antiguas).


PabloYglesias-Layout

Package Control

Llegamos a la parte importante del tutorial. Sublime Text 2 es tan potente gracias a la gran comunidad que tiene tras él, y que lo nutre de infinidad de plugins open source. La amplia mayoría son gratuitos (aún no he encontrado ninguno de pago, pero al parecer existen), y complementan al editor dotándole de características de los más elaborados IDEs de la actualidad.

De entre todos ellos, hay un plugin que es obligatorio tener, y que no es otro que Sublime Package Control, que nos permite, de forma cómoda y sencilla, acceder a una especie de market de plugins desde la propia consola de Sublime Text 2, o, como usaremos a partir de entonces, desde su buscador de comandos.

Para instalarlo, basta con abrir la consola (View > Show Console), escribir el siguiente código, y darle a aceptar.

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')

Después de reiniciar Sublime Text 2, veremos que en Preferences tenemos ya la opción de Package Control, que no deja de ser más que un acceso directo al buscador de comandos de Package Control, y que usaremos para instalar el resto de plugins a partir de ahora.

PabloYglesias-PackageControl


Siempre que queráis buscar un plugin, abrir el buscador de comandos (Shift+Ctrl+P o Shift+⌘+P en mac), escribir install, y darle click a la primera opción, llamada Package Control: Install Packages. Esto abrirá el buscador de plugins, así que olvidaros ya de la consola y los códigos raros. El trabajo duro ya está hecho :).

SideBarEnhancements

Será el segundo package que instalaremos. Lo que hace es transformar la Side Bar en un gestor de archivos (por lo que podemos crear archivos, renombrarlos, borrar carpetas,…). Para instalarlo, es tan sencillo como abrir el buscador de comandos, escribir install, clickar en Package Control: Install Packages, y cuando se abra el nuevo buscador, escribir SideBarEnhancements, y darle a aceptar.

Aparentemente no habrá ocurrido nada, pero si reiniciais Sublime Text 2, y abris alguna carpeta, podréis observar que ahora apretando encima de un archivo o carpeta del SideBar tenéis las opciones comunes de un gestor de archivos. Mucho más rápido y fluido que ir a la carpeta y crearlo a mano.

PabloYglesias-SideBarEnc

A partir de ahora os hablaré de algunos plugins que a un servidor particularmente le han llamado la atención, enfocados al desarrollo y diseño web. Son simples recomendaciones, y están terriblemente influenciadas por las tecnologías, lenguajes y modo de programar de cada uno, así que elegir sabiamente.

Prefixr

Es un plugin casi necesario para todos aquellos desarrolladores web que quieran ahorrarse horas de trabajo. Lo que hace el plugin es buscar en el código CSS entradas que no sean compatibles con algún navegador en especial (¿IE 7 por ejemplo?), y te agrega el código necesario para que sí lo sea. Vamos, que te ahorra toda la fase de compatibilizar código con navegadores.

De esta manera, únicamente escribirías el código genérico para un navegador. Selecionándolo, y dándole a Ctrl+Alt+X en windows (o Ctrl+⌘+X en mac), te genera el código compatible con el resto de navegadores.


LESS y LESS-Build

Por defecto, Sublime Text 2 incluye varios compiladores de los más usados, pero ningún preprocesador de CSS. Uno de los más usados es LESS (la semana que viene prepararé un tutorial sobre preprocesadores CSS, por si alguien aún no los conoce). En caso de que lo uses (o quieras empezar a hacerlo), hay dos claros packages que debes instalar: LESS, que te permite trabajar con ficheros .less, y LESS-Build, el compilador de LESS a CSS.

La forma de trabajar con ficheros .less es la siguiente:

  • Creamos un fichero con dicha extensión, y le agregamos el contenido que sea (esta parte la explicaré con más detalle la próxima semana).
  • Vamos a Tools > Build System y seleccionamos el compilador LESS que hemos instalado (podemos definirlo como por defecto para evitarnos este paso de aquí en adelante).
  • Vamos a Tools > Build o pinchamos en su atajo de teclado Ctrl+B (⌘+B en mac). Nos creará el fichero css a partir del less.

Si queréis aumentar aún más la pérdida de tiempo en el trabajo, SublimeOnSaveBuild lo que hace es compilar automáticamente el archivo usando el compilador por defecto que tengamos (es decir, nos evita los pasos anteriores).

Git

Si trabajamos con repositorios de este tipo, es casi básico. Permite sincronizar con nuestra cuenta de GitHub y hacer comments y forks desde Sublime Text 2. Su uso (y comandos) son semejantes a los que haríamos en la consola o el terminal del SO donde estemos, por lo que no me pararé más en ello.

Y muchos más

Me he dejado en el candelero muchísimos que seguramente más de uno eche en falta. Entre ellos, seguramente veáis oportuno instalaros aquellos directamente enfocados a una tecnología o lenguaje en particular, como puede ser HTML5, CSS3, Linter,…

Si creéis que hay alguno más del que no he hablado, y que debería aparecer por aquí como necesario, no dudéis en recomendármelo.

Os dejo para terminar con un vídeo relativamente viejo de desarrolloweb.com que me sirvió en su día para descubrir parte del potencial que desconocía sobre esta herramienta, y que seguramente influenció en mi decisión final. Aviso desde ya que dura casi 2 horas. Así que tomároslo con tiempo, G.G.

Otros artículos relacionados