El otro día hablando con algunos de los compañeros de Talentum, me mostraron sus inquietudes sobre qué entorno de desarrollo elegir, en referencia particularmente a la serie de tutoriales sobre Firefox OS que estoy haciendo.
Lo cierto es que la principal ventaja que tiene el desarrollo web es que lo puedes hacer donde quieras, desde un bloc de notas a IDEs complejos como Eclipse o Visual Studio. Pero elegir un espacio de trabajo correcto es vital para aumentar el rendimiento y el flujo de trabajo, y aunque a priori requiera de una curva de aprendizaje moderada, a la larga reduce las horas de trabajo.
Llevo ya unos años dedicándome a esto, y he pasado por muchos editores de texto diferentes, y lo cierto es que he encontrado en Sublime Text 2 todo lo que buscaba en el resto, más alguna característica que poco a poco la voy incluyendo en la rutina de trabajo. Este tutorial por tanto va destinado a aquellos desarrolladores y diseñadores web (aunque en la práctica Sublime Text 2 puede ser usado para cualquier lenguaje) y tendrá una duración de dos entradas, dejando la primera para la presentación y algunos conceptos básicos con los que es recomendable familiarizarse, y la segunda para una configuración adicional del potente servicio de plugins con el que cuenta el proyecto.
Índice de contenido
5 razones para usar Sublime Text 2
Hablo de la versión 2, a sabiendas que ya está la 3 disponible, aunque si le echáis un vistazo a las especificaciones, veréis que apenas han cambiado cuatro cosas, y al ser nueva versión, podría no ser tan estable como la 2, que lleva años con nosotros y varias revisiones encima.
Elegir un IDE es una decisión difícil, ya que en el mercado hay mil y un editores diferentes. Por eso veo conveniente daros mis cinco principales razones que me han hecho prescindir del resto en favor a Sublime Text 2:
- Es multiplataforma y gratuito: Para un desarrollador como un servidor, que trabaja a diario con Mac OS y Windows (Linux en menor medida), este aspecto era vital. Quiero que mi entorno de desarrollo sea semejante esté donde esté, y Sublime Text 2 me lo permite. Además cuenta con versión de pago y versión gratuita, teniendo entre las dos la única diferencia de que la segunda te abre un pop-up cada unas 20 actualizaciones de un fichero (abrirlo, guardarlo, cerrarlo,…). La verdad es que no molesta.
- Es MUY ligero: Otro aspecto a tener en cuenta. Sublime Text está desarrollado en Python, y aunque no es Open Source, cuenta con un equipo de desarrolladores realmente potente. No tiene nada que ver con los IDEs convencionales, ya que a priori carga únicamente lo básico, y va llamando al resto de snipplets y plugins según sea necesario. La velocidad es comparable a la del Notepad++, para que nos hagamos una idea.
- Escalable mediante plugins: Tiene un inconveniente, y es que en el momento en que lo instalas, la apariencia lleva a la confusión de que estás ante un bloc de notas oscuro. Nada más lejos de la realidad. Sublime Text requiere una configuración inicial un tanto elaborada, pero no os dejéis llevar por el engaño de su interfaz minimalista. En su haber cuenta con compiladores y preformateadores de todos los lenguajes, es capaz de gestionar cualquier proyecto, ya sea en local o mediante repositorios colaborativos del tipo Git, y un sin fin de particularidades que seguramente nunca hayas echado en falta en otros editores, y harán que te enamores de Sublime Text.
- Totalmente personalizable: Y cuando digo totalmente, digo totalmente. Si ya de por sí, mediante snippets, plugins y el menú convencional puedes personalizar tu entorno, Sublime Text pone a disposición del cliente los archivos de configuración del editor, de tal forma que si lo deseas, puedes utilizar Python para programar diferentes funciones en la capa de lógica o presentación del programa.
- Cuenta con una gran comunidad: Y la última razón, que no por ello la menos importante. Está bien que puedas personalizarlo tú como quieras, pero seguramente ya hay alguien que ha pensado en tu idea y ha creado un plugin para tal uso. En estos meses que llevo usándolo, aún no he encontrado algo que quisiera modificar y no pudiera ya descargarlo hecho, descontando que la instalación de plugins es tan sencilla y rápida que parece un chiste, como veremos en la segunda entrada.
Sublime Text 2 permite, como la mayoría de IDEs, trabajar con proyectos en varias carpetas (incluso con varios proyectos a la vez). La forma habitual de buscar un archivo es mediante la Side Bar, aunque en este caso, tendremos también a nuestra disposición un potente buscador, que en windows se abre con Ctrl+P y en mac con ⌘+P.
Escribiendo por ejemplo .css, nos mostrará todos los archivos CSS del proyecto, pero el buscador no se queda ahí.
Podemos hacer búsquedas dentro de los archivos de un proyecto (lo tengamos o no abierto el fichero), de tal forma que podríamos estar interesados en buscar las propiedades de una etiqueta #back, pudiendo mostrar todos los resultados de la búsqueda mediante la combinación .css#back.
Si la almohadilla nos sirve para recorrer el fichero, la arroba nos permite localizar objetos dentro de un archivo, de tal forma que un .js@ nos devuelve todas las funciones.
Snippets
Para quien desconozca este término, los Snipptets son una suerte de plantillas base desde las que empezar a programar. La mayoría de los IDEs incluyen snippets, y Sublime Text no iba a ser diferente.
Si para abrir el buscador dentro de un proyecto usábamos Ctrl+P (⌘+P en mac), para buscar cualquier comando del editor, usaremos Shift+Ctrl+P (Shift+⌘+P en mac). Desde esta pantalla haremos la gran mayoría de configuraciones previas en la siguiente entrada del tutorial, buscaremos comandos del propio sistema, llamaremos a repositorios Git y un sin fin de características, entre las que están los snipptes.
Sublime Text 2 viene cargado con algunos de los snippets más usados. Basta con escribir snippet para verlos (o aplicarlos).
Existe otra manera de usar los snippets, y que resulta aún más sencilla. Si por ejemplo necesitas crear un prototipado para mostrárselo al cliente, puedes rellenar las columnas de forma rápida escribiendo en el código lorem y pulsando la tecla Tab, que te creará un párrafo de ejemplo.
Para un archivo recién creado de extensión .html, podemos escribir solamente html y pulsar Tab, y nos creará la base de nuestra página.
Multiselecciones
Otra de las características que más me gustan de Sublime Text 2. Imagínate que necesitas aplicar un estilo a cada elemento de una lista ya creada. Normalmente lo escribirías en el primero, y luego harías copia y pega en el resto.
- Un elemento
- Otro elemento
- Otro elemento más
- Y otro elemento
En Sublime Text, basta con dejar pulsado Ctrl (⌘ en mac) y clickar en cada uno de los elementos donde tendremos que incluir el nuevo código (en el ejemplo sería justo antes del cierre de ángulo de la apertura de li). Una vez terminemos, nos pondremos a escribir, y el texto se escribirá en todos los puntos donde le hemos pedido a la vez ¿Más sencillo imposible, verdad?
Atajos de escritura
El editor de texto es predictivo, de tal manera que además de recomendarte las posibilidades de funciones propias del lenguaje o lenguajes que estás usando mientras escribes, tiene atajos semejantes a los que ya vimos en el buscador de texto.
Así, si queremos crear en html una lista con el estilo social aplicado, bastaría con escribir ul#social y pulsar TAB, para que nos creara el snippet correcto, en este caso:
Y hasta aquí la primera entrada. En la página web del proyecto tenéis mucha más documentación y atajos interesantes.
Os dejo el enlace a la segunda.
A mi me gusta usar Codelobster
Gracias por la recomendación Stas.