Cómo poner Sublime Text a punto

5min

Hace ya un tiempo repasamos los mejores editores de HTML, entre los que destacamos el conocido Sublime Text debido a su posibilidades de personalización y al práctico sistema de pantallas múltiples. En esta ocasión, veremos cómo configurar Sublime Text a nuestro gusto y algunos plugins imprescindibles para sacarle el máximo partido.

Unz vez instalado Sublime Text (algo tan sencillo como descargarlo desde sublimetext.com y seguir los pasos)  nos tendremos que fijar en en un archivo en notación de objeto Javascript (JSON) que se puede cargar con todas aquellas modificaciones a las configuraciones que trae el editor de manera predeterminada.

Es importante no tocar todas las configuraciones, sino editar las configuraciones personalizadas para nuestro usuario. Si no, al actualizar Sublime Text perderemos nuestras personalizaciones. Modificaremos las configuraciones de usuario desde el menú Preferences, muy fácil de localizar en la barra de menús. En Windows/Linux en un item independiente del menú y en Mac vinculado a la sección del menú Sublime Text 2, principal en negrita (justo al lado de la manzana).

Tendremos que editar las Settings – User y aparecerá un archivo de texto JSON donde se modifican las preferencias. Aquí podréis ver algunas interesantes:

  • highlight_modified_tabs: Remarca de una manera visual más destacada las pestañas que hemos modificado y que no se han guardado todavía. Asignamos como valor true para que esta modificación tenga efecto.
  • save_on_focus_lost: Guarda los archivos cuando el programa pierde el foco de la aplicación. Nos ahorrará muchos CTRL+S y la posibilidad olvidarnos de guardarlo cuando debiéramos.
  • translate_tabs_to_spaces: Permite que la tabulación (TAB) se convierta en espacios en blanco.
  • tab_size: Es un número entero que sirve para configurar cuántos espacios en blanco equivalen a un tabulador.
  • open_files_in_new_window: Una opción interesante para los usuarios de Mac, para que cuando desde el Finder abramos un archivo con Sublime Text no lo abra en una nueva ventana, sino como una nueva pestaña dentro de la ventana de Sublime que ya teníamos abierta.

Una vez modificado el archivo de configuraciones, lo guardamos. Inmediatamente estarán aplicadas en nuestro editor. A continuación, mostramos un ejemplo de archivo de configuración completo:

{
'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'
   ]
}
Índice

Los plugins de Sublime Text

Existe gran cantidad de complementos que nos resultarán de gran utilidad, como integración con FTP, snippets para tareas repetitivas que nos permitirán escribir código más rápidamente, ayudas contextuales, mejora de los menús…

No se trata de instalar todos los plugins que encontremos, sino de saber cuáles son los que necesitaremos en nuestros proyectos. La clave es probarlos y  saber si les vamos a sacar partido. Esto es importante, ya que cada plugin que carguemos hará que el editor sea un poco más pesado, llegando a ralentizar el proceso y  provocando que nuestra productividad no sea la deseada.

A modo de apunte, en este artículo sugerimos una serie de plugins válidos para cualquier tipo de desarrollo y que nos ayudarán a personalizar nuestro Sublime Text

Pero antes, tendremos que instalar el Package Control…

Package Control

Si nuestra intención es la de incorporar plugins a Sublime Text, tendremos que comenzar por instalar el Package Control. Para ello, lanzamos 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 iremos al menú View / Show console. El comando que tenemos que ejecutar lo podremos ver en la página de instalación del Package Control (https://packagecontrol.io/installation).

Una vez instalado el Package Control comenzaremos a gestionar los plugins y seguiremos con la tarea de encontrar nuevos paquetes interesantes.

En Windows y Linux encontrarás el acceso al Package Control dentro de Preferences / Package Control. En Mac OS X estará dentro del menú Sublime Text 2 / Preferences / Package Control.

En el controlador de paquetes encontraremos varias opciones que nos permitirán hacer las tareas de gestión de los plugins instalados. Desde ahí buscaremos paquetes, listaremos aquellos que tienes instalados, instalaremos nuevos paquetes o eliminaremos los que no nos interesen de nuestro editor.

Plugins para comenzar

Instalamos los plugins desde Package Control (Preferences / Package Control) y luego la opción Install Package. Entonces podremos escribir el nombre del paquete que nos interese instalar. Estos plugins pueden resultarte útiles:

  • Emmet. El plugin por excelencia. No es un plugin exclusivo de Sublime Text, ya que está disponible para los principales editores e IDE del mercado. La utilidad que más llama la atención de Emmet es cómo a partir de un código resumido se puede extender para convertirlo en un código completo. Simplemente, tras escribir el código resumido, pulsamos tabulador (TAB) para extenderlo. Por ejemplo, «ul>li*3» (sin las comillas) + TAB se convertiría en una lista UL con tres elementos LI. Otro de los atajos en Emmet que todo el mundo usa es el «html:5» (sin las comillas) + TAB, que se convertirá en el documento básico del HTML5.
  • LiveReload. Te permite recargar el navegador de manera automática cuando guardas un archivo. Para que funcione tenemos que combinarlo con un plugin independiente en nuestro navegador. Visita el Chrome Web Store y busca por LiveReload.
  • Sidebar Enhancements. Este plugin solo funciona con Sublime Text 3 y su función es mejorar el sidebar con nuevas opciones contextuales visibles con el botón derecho del ratón.
  • SFTP. SFTP nos provee de opciones para hacer FTP desde Sublime Text 2 y 3. Muchas personas lo consideran de gran utilidad a la hora de editar en caliente archivos del servidor. Este plugin es de pago, pero podemos probarlo gratuitamente antes de ver si nos interesa adquirirlo.

Otros plugins interesantes podrían ser ColorPicker, Prefixr, JsLint, etc. En packagecontrol.io podremos encontrar todos estos y muchos más muy fácilmente.

Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: