Intro a Sublime Text
Tags: webdev, beginners, tooling, editor
Published: 2020-02-05 20:44:24

---
title: Intro a Sublime Text
published: true
description: El editor que se adapta a tus necesidades
tags: webdev, beginners, tooling, editor,
canonical_url: https://medium.com/capua-dev/intro-a-sublime-text-f79da511ce8b
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/a0jvel2m7qqhkc8iq93j.jpeg
---

> *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](http://www.sublimetext.com/) 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3dmcq5d3a012y7u6l2mb.png)
<figcaption>Sublime Text recién abierto.</figcaption>

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](https://packagecontrol.io/) siguiendo los [pasos](https://packagecontrol.io/installation) 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](https://packagecontrol.io/packages/Emmet)

Para mejorar el workflow cuando trabajamos con HTML y CSS.

Echad un vistazo al ejemplo de su [web](https://emmet.io/) y dedicadle un rato a ver su [cheat sheet](https://docs.emmet.io/cheat-sheet/), no tiene desperdicio.

### [Sublime Linter](https://packagecontrol.io/packages/SublimeLinter)

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](https://packagecontrol.io/packages/SublimeLinter-jshint), [CSSLint](https://packagecontrol.io/packages/SublimeLinter-csslint) y [SCSSLint](https://packagecontrol.io/packages/SublimeLinter-contrib-scss-lint).

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dgz3sylxs81jn4m3ich7.png)
<figcaption>Sublime​Linter-csslint</figcaption>


### [Side​Bar​Enhancements](https://packagecontrol.io/packages/SideBarEnhancements)

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

### [DocBlockr](https://packagecontrol.io/packages/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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qfog2r1kahsk4hj3gaqz.png)

### [GitGutter](https://packagecontrol.io/packages/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](https://packagecontrol.io/packages/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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4lcadvycthlswnqhd7zq.png)
<figcaption>BracketHighlighter con la configuración por defecto.</figcaption>

### [Project Manager](https://packagecontrol.io/packages/ProjectManager)

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:

```jsonc
{
  // 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:

```jsonc
[
  // 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í](https://packagecontrol.io/docs/syncing#dropbox).

En vuestro primer equipo:

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

En vuestros otros equipos:

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