> Manuales > Entorno de trabajo del desarrollador web

Apuntes sobre la configuración de Sublime Text y los plugins más imprescindibles para comenzar a usar el editor en mejores condiciones. Son los tips estrictamente necesarios, ideales para cualquier área del desarrollo.

Después de instalar Sublime Text tienes todavía la tarea de instalar una serie de plugins que transformen ese inicial y aparentemente sencillo editor en un programa más sofisticado y adaptado a tus necesidades. Existen muchos complementos que te pueden venir genial, como integración con FTP, snippets para realizar tareas repetitivas y ser más rápido al escribir código, ayudas contextuales, mejora de los menús, etc.

Ten en cuenta que no se trata de instalar todos los plugins del mundo, sino aquellos que realmente necesites. La clave es probarlos, adaptarse y sacarles partido para justificar su instalación. Esto es importante, puesto que uno de los errores más comunes es instalar muchos complementos sin realmente saber si los vas a usar. Cada plugin o extensión que cargues en el editor hace que sea un poco más pesado, llegando a ralentizar un poco tu proceso y por consiguiente provocando justo lo contrario que buscas, la productividad. Esto lo digo por experiencia, pues en alguna ocasión he tenido que reinstalar el Sublime Text porque ya ni sabía qué plugin era el que me provocó que el programa se trabase.

Dicho eso, a modo de apuntes, voy a poner una serie de plugins que yo instalo, para recordarme a mi mismo los pasos básicos para poner el Sublime Text en unas mínimas condiciones de productividad, válidas para cualquier tipo de desarrollo. Espero que le sirvan también a otras personas.

Referencia: El Sublime Text ha sido motivo de mucha información y existen referencias en Internet muy buenas para poder personalizarlo, con listas de plugins y consejos que te pueden interesar. Nosotros os ofrecemos aquí un listado de programas que hemos hecho por vídeo en directo por streaming en los que diversos cracks nos han enseñado cómo configuran ellos el editor.

Configuraciones básicas que te interesarán en Sublime Text

Para configurar Sublime Text se usa un archivo en notación de objeto Javascript (JSON) que puedes cargar con todas aquellas modificaciones a las configuraciones que trae el editor de manera predeterminada.

Pero atención, no deberías tocar las configuraciones del propio Sublime Text, sino editar las configuraciones personalizadas para tu usuario. Esto es importante, porque si no, cuando se actualice Sublime Text perderás tus personalizaciones. Para modificar las configuraciones de usuario lo haces desde el menú de "Preferences".

Nota: El menú "Preferences" es muy fácil de localizar en la barra de menús. En Windows/Linux en un item independiente del menú y en Mac está vinculado a la sección del menú "Sublime Text 2", principal en negrita al lado de la manzana.

Así pues, tienes que editar las "Settings - User" y aparecerá un archivo de texto JSON donde podrás modificar a tu antojo las preferencias. Te sugiero algunas interesantes y útiles.

highlight_modified_tabs:
Simplemente te remarca de una manera visual más destacada aquellas pestañas que has modificado y que no se han guardado todavía. Le asignas como valor true para que esta modificación tenga efecto (Ver ejemplo del código completo más adelante en este artículo)

save_on_focus_lost:
Guarda los archivos cuando el programa pierde el foco de la aplicación. Te ahorrarás muchos CTRL+S y la posibilidad olvidarte de guardarlo cuando deberías.

translate_tabs_to_spaces:
Esta configuración permite que la tabulación (TAB) se convierta en espacios en blanco. Algunos programadores lo prefieren.

tab_size:
Es un número entero que te sirve para configurar cuántos espacios en blanco equivalen a un tabulador.

open_files_in_new_window:
Esta opción es interesante para los usuarios de Mac, para que cuando desde el Finder abras un archivo con Sublime Text no te lo abra en una nueva ventana, sino que lo abra como una nueva pestaña dentro de la ventana de Sublime que ya tienes abierta.

Una vez modifiques tu archivo de configuraciones, lo guardas e inmediatamente estarán aplicadas a tu editor. A continuación puedes ver un archivo de configuración completo que podrías incluso copiar y pegar.

{
   "open_files_in_new_window": false,
   "highlight_modified_tabs": true,
   "save_on_focus_lost": true,
   "translate_tabs_to_spaces": true,
   "tab_size": 4,
   "font_size": 13.0,
   "ignored_packages":
   [
      "Vintage"
   ]
}

Nota: La configuración "font_size" e "ignored_packages" ya viene por defecto en el archivo de configuraciones de usuario, puedes modificarla también para adaptarla a tus necesidades. El "Vintage" no es más que un modo de comandos, como el que tienes en el mítico editor "Vi", que permite por una serie de teclas realizar acciones con el editor. Generalmente no será usado por la mayoría de los desarrolladores, porque acostumbrarse a él es un poco difícil.

Sublime Text permite incluso modificar preferencias específicas para lenguajes determinados. Por ejemplo, que el editor se comporte de manera diferente cuando estás programando en Javascript o editando un CSS. De momento esto no lo vamos a ver ahora, pero os dejo una referencia a un artículo en inglés que explica diversas configuraciones de Sublime Text.

Package Control

Si quieres incorporar plugins a Sublime Text, todo empieza por instalar el Package Control. Para ello tienes que lanzar un comando a la consola de Sublime Text, que sería diferente en la versión 2 y la versión 3. Para mostrar la consola lo haces con el menú "View / Show console" y el comando que tienes que ejecutar lo encuentras en la página de instalación del Package Control.

Una vez tienes el Package Control instalado puedes comenzar a gestionar tus plugins de una manera ágil, así como encontrar nuevos paquetes que te puedan interesar.

En Windows y Linux encontrarás el acceso al Package Control dentro de "Preferences / Package Control".

En Mac OS X lo tienes dentro del menú "Sublime Text 2 / Preferences / Package Control".

Accediendo al controlador de paquetes tienes diversas opciones que te servirán para hacer las tareas de gestión de los plugins instalados. Desde ahí puedes buscar paquetes, listar aquellos que tienes instalados, instalar nuevos o eliminarlos de tu editor.

Plugins o paquetes básicos para comenzar con Sublime Text

Instalas los plugins desde Package Control (Preferences / Package Control) y luego la opción "Install Package". Entonces podrás escribir el nombre del paquete que desees instalar. Es así de simple, aunque necesitarás saber los plugins que más te puedan facilitar tu labor.

Emmet:
Este es el plugin por excelencia, que maravilla a todo el mundo que conoce Sublime Text. Pero no cabe llevarse a engaño, realmente no es un plugin exclusivo de Sublime Text, sino que está disponible para todos los principales editores e IDE del mercado. Emmet tiene varias utilidades, pero la que más llama la atención es cómo a partir de un código resumido se puede extender para convertirlo en un código completo. Simplemente se escribe el código resumido y luego se pulsa el tabulador (TAB) para extenderlo.

Algo como "ul>li*3" (sin las comillas) + TAB se convertiría en una lista UL con tres elementos LI. Pero es solo un pequeñísimo ejemplo. Dominar todos esos shortcuts te puede llevar alguna/s semana/s de pruebas.

Otro de los míticos shortcuts en Emmet que todo el mundo conoce y usa es el "html:5" (sin las comillas) + TAB que se convertirá en el documento básico del HTML5. También muy útil "p>lorem" (+ tabulador) que se convertirá en un párrafo "Lorem ipsum".

LiveReload:
Es un plugin que te permite recargar el navegador automáticamente cuando guardas un archivo. Por ejemplo, estás escribiendo un documento HTML en Sublime y en otra ventana lo estás visualizando en el navegador, cuando salvas en el editor el navegador hace un refresh (F5) automático para mostrar los cambios que acabas de realizar en el fichero.

Para que funcione el LiveReload tienes que combinarlo con un plugin en tu navegador que se instala de manera independiente, yo uso el plugin de Chrome pero tienes para varios navegadores. Simplemente visita el Chrome Web Store y busca por "LiveReload".

Sidebar Enhancements:
Este solo funciona con Sublime Text 3 pero está bastante bien, ya que mejora el sidebar aportando nuevas opciones contextuales visibles con el botón derecho del ratón. Puedes abrir los archivos con otros programas, acceder a mayores opciones de gestión de esos archivos.

SFTP:
Este plugin provee de opciones para hacer FTP desde Sublime Text 2 y 3. Este plugin es comercial y necesitas pagar una licencia (aunque hay un trial gratuito) y a pesar de existir otras opciones dejan un poco que desear. Yo la verdad es que no lo he usado nunca, pero sé que muchas personas lo consideran imprescindible para editar en caliente archivos del servidor.

Nota: Personalmente veo en Sublime Text una buena opción como editor para programadores, aunque lo cierto es que no soy incondicional y sí capaz de reconocer carencias del programa. Por ejemplo, el hecho que tengas que configurar tantos detalles para poder comenzar a usar Sublime Text con unas mínimas posibilidades, mientras que otros editores todo esto ya te viene de serie. En el caso de este plugin SFTP todavía se agrava por la necesidad de pagar para poder tener una licencia. Otros editores que también me gustan como Komodo Edit tienen un fantástico gestor de FTP perfectamente integrado que no necesitas ni instalar aparte ni mucho menos pagar para usar.

De momento eso es todo. Seguro que encontráis otros plugins esenciales como ColorPicker o Prefixr, JsLint, etc. que te serán de utilidad. No es el objetivo de este artículo, porque como decía es mejor conformarse al principio con menos plugins y sacarles partido antes de liarse con otros nuevos.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual