Intro a Sublime Text

Este post fue publicado originalmente en abril de 2015.

Como buenos gladiadores además de estar bien preparados es importante familiarizarnos con nuestras armas. Cuanto más cómodos y adaptados estemos en nuestro entorno de batalla mayor será nuestro rendimiento. Una de las herramientas más importantes para un programador es su editor.

Personalmente somos de los que prefieren editor de texto en vez de IDE por su simplicidad y ligereza, para nuestros menesteres no nos hace falta más.

Sublime Text en su versión 3, a pesar de estar en beta es bastante estable y funciona realmente bien. Al abrirlo por primera vez sientes que viene casi “pelado” y es una de sus ventajas, ya que se puede personalizar prácticamente todo.

Algunos de sus puntos fuertes son:

• Ligereza.
• Capacidad de personalización.
• Selecciones y cursores múltiples.
• Paleta de comandos.
• Movernos entre ficheros, buscar en los mismos, ir a una función o linea determinada…
• Cambiar de proyecto instantáneamente, recordando el estado del área de trabajo.
• Acceso a una infinidad de paquetes creados por la comunidad.

¡A las armas!

A continuación os voy a mostrar algunas de mis preferencias.
Una de las primeras cosas que debemos hacer después de instalar Sublime es instalar Package Control siguiendo los pasos que indican en su web.
Para instalar un paquete tenemos que abrir la paleta de comandos (⌘+⇧+P) o (⌃+⇧+P), escribir install package y buscar por el nombre del paquete que deseamos.
En la web de Package Control podemos ver los paquetes de moda, nuevos y populares, además de mucha información extra.

Packages

Emmet

Para mejorar el workflow cuando trabajamos con HTML y CSS.

Echad un vistazo al ejemplo de su web y dedicadle un rato a ver su cheat sheet, no tiene desperdicio.

Sublime Linter

El uso de un linter se hace esencial para escribir código mejor, más limpio y con menos bugs, empleando buenas prácticas de programación.

Los linters no están incluidos en el paquete así que además tendremos que instalar los que deseemos. En concreto los que más suelo usar son JSHint, CSSLint y SCSSLint.

Para obtener información acerca de un error en concreto tan solo hemos de situar el cursor en la linea del error y podremos ver una ver una breve descripción en la barra de estado (situada en la parte inferior de la ventana), zona donde también podemos ver el número total de errores en cualquier momento.

Side​Bar​Enhancements

Ofrece una mejora a las operaciones que tiene por defecto el sidebar de Sublime. Por ejemplo: abrir con, copiar, cortar, mover, copiar rutas…

DocBlockr

Ayuda a comentar bien nuestro código completando todo lo posible a partir del elemento que comentemos. Soporta lenguajes como JavaScript, TypeScript y Objective C entre otros.

GitGutter

Como su nombre indica nos muestra en el gutter el estado de cada linea, ya sea insertada, modificada o eliminada, comparando las diferencias con un commit/rama/tag específico.

BracketHighlighter

Resalta la apertura y cierre de etiquetas, comillas, paréntesis, llaves, corchetes… Muy útil sobre todo cuando tenemos que tocar algo de spaguetti code.

Podemos mostrar los indicadores en el gutter, en el código, o en ambos a la vez, así como aplicarles distintos estilos.

Project Manager

Muy cómodo para ordenar y manejar proyectos olvidándonos de donde están los ficheros. Es una mejora a la funcionalidad que trae Sublime por defecto.

Otros paquetes que uso:

jQuery, Underscorejs snippets, Handlebars, SCSS, Meteor Snippets, Color Highlighter, ColorPicker, EditorConfig...

¿Cuáles son vuestros preferidos?

Configuración

La configuración de Sublime Text se basa en ficheros JSON, podéis verla en Preferences → Settings — Default y los atajos de teclado en Preferences → Keybindings — Default.

Para añadir o sobrescribir los valores hemos de editar los ficheros que terminan por * — User, veamos algunos ejemplos:

Settings — User:

{
  // Resalta la linea actual
  "highlight_line": true,

  // Añade una linea en blanco al final del documento
  "ensure_newline_at_eof_on_save": true,

  // Elimina los espacios al final de las lineas al guardar
  "trim_trailing_white_space_on_save": true,

  // Modifica los separadores de palabras eliminando '-' para CSS
  "word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?",

  // Permite hacer scroll aunque se haya terminado el documento
  "scroll_past_end": true
}

Keybindings — User:

[
  // Indenta todo el documento
  { 
    "keys": ["super+shift+r"], 
    "command": "reindent", "args": { "single_line": false } 
  },

  // Intercambia los keybindings de "pegar" y "pegar e indentar"
  { "keys": ["super+v"], "command": "paste_and_indent" },
  { "keys": ["super+shift+v"], "command": "paste" },

  // Resalta el fichero actual en el sidebar
  { "keys": ["alt+shift+r"], "command": "reveal_in_side_bar" }
]

Sincronización

Si sois usuarios de Dropbox u otro servicio similar podéis sincronizar todas vuestras preferencias y ahorraros mucho trabajo para estar cómodos cada vez que cambiéis de equipo o sistema operativo.

Si vuestro Dropbox no está en la ubicación por defecto, debéis sustituir ~/Dropbox por vuestra ubicación.

Las siguientes instrucciones son para OS X, para otro sistema operativo las tenéis aquí.

En vuestro primer equipo:

$ cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/
$ mkdir ~/Dropbox/Sublime
$ mv User ~/Dropbox/Sublime/
$ ln -s ~/Dropbox/Sublime/User

En vuestros otros equipos:

$ cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/
$ rm -r User
$ ln -s ~/Dropbox/Sublime/User