Seguimos con la segunda parte de la serie Entornos de desarrollo, centrada en Sublime Text 2, y cómo configurarlo correctamente.
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.
Índice de contenido
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.
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
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).
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.
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.
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.
Hola
Vengo rastreando tutoriales para aprender Python y había instalado Notepad++, el video que sigo se desarrolla con Sublime Text2 así que de esa forma terminé por acá, recién configuré lo básico que muestras, seguiré probando a ver si para fin del 2013 aprendí algo de programación (soy diseñador y estoy aprendiendo por mi cuenta aunque he curiosiado html y css). Nos vemos y gracias por la información.
Para eso estamos Marco. Ánimo, que ya tienes la parte complicada (saber diseñar). El resto es aprender lenguajes y ya está.
Muy buen post, solo te falto mencionar que los bundles y themes de TextMate son compatibles con SublimeText 2, y que un buen plugin tambien es https://sublime.wbond.net/packages/SFTP que sirve para conectarte a servidores mediante FTP o SFTP es de pago lo curioso es que lo puedes usar gratis y como el mensaje que te sale con sublimetext en SFTP te sale un mensaje despues de guardar 20 o 15 veces un fichero remotamente.
Yo lo use para desarrollar bajo Rails y es muy bueno.
Ahora tener en cuenta que no podemos instalar plugins por instalar, algunos son muy buenos algunos he visto que consumen memoria, y hacen lento a sublimetext2
Pues muchas gracias por los apuntes Carlos. Le echaré un ojo a todo lo que comentas.
Siempre es un placer leer tus artículos y aprender con tus tutoriales. Muchas gracias!
A tí por el apoyo.
Cualquier duda ya sabes por dónde estoy. Saludos!
Un excelente plugin es EMMET, el cual nos ahorra trabajo buscando o recordando como son las sintaxis de html5, ya que este lo hace por nosotros ej : Escribir input:t y presionar tab nos trae
Mas info.
http://docs.emmet.io/cheat-sheet/
Muchas gracias por la recomendación, Oscar.
Gracias por el pingback Beelzenef. Me alegra que te sirviera de último empuje para decidirte a probar la herramienta.
Viniendo como vienes de Notepad++, lo vas a agradecer y mucho 🙂