Sublime Text, algunos packages y atajos de teclado
Sublime Text es uno de los editores de texto y código fuente más utilizado. Desarrollado originalmente como una extensión de Vim (es una versión mejorada del editor de texto vi, presente en todos los sistemas UNIX), con el tiempo fue creando una identidad propia, por esto aún conserva un modo de edición tipo vi llamado Vintage mode.
Sublime Text se distribuye de forma gratuita, sin embargo no es software libre o de código abierto, se puede obtener una licencia para su uso ilimitado, pero él no disponer de ésta no genera ninguna limitación más allá de una alerta cada cierto tiempo, su licencia cuesta aproximadamente $70 dólares, linkte dejamos un para su descarga de forma gratuita.
Características interesantes
Pestañas
Al igual que otras aplicaciones de la actualidad, Sublime Text soporta pestañas, una característica que popularizaron los navegadores web. En cada una de estas pestañas, se muestra una x para cerrar la misma, que cambia a un círculo gris cuando se han escrito cambios en el archivo y no se han guardado todavía.
Autocompletado
Sublime Text tiene resaltado a color de sintaxis para facilitar la lectura de código, así como numerado de línea. También muestra un pequeño índice gráfico a la derecha, por el cual podemos desplazarnos rápidamente a golpe de clic del ratón.
Pero quizás una de las características que más se agradecen (sobre todo a los usuarios que no tienen buena memoria), es el autocompletado. Esta funcionalidad nos ayudará a recordar cómo se escriben ciertos comandos, funciones o textos del lenguaje o marcado en el que nos encontramos.
Además, en muchos lenguajes (como por ejemplo, PHP), Sublime Text nos facilita el orden de los parámetros, por si no los recordamos, algo muy común en PHP con funciones como strpos o explode, donde el orden de los parámetros es diferente.
Selecciones múltiples
Una de las características más interesantes de Sublime Text es su flexibilidad para realizar tareas comunes de una forma sencilla y rápida. Por ejemplo, si seleccionamos una palabra con el ratón (en el ejemplo, len), pulsando CTRL+D podremos ir seleccionando las siguientes coincidencias y modificarlas todas a la vez:
También puedes utilizar la combinación CTRL+K para saltarte alguna selección que no quieras utilizar en el reemplazo.
Ediciones múltiples
Seleccionando varias líneas y utilizando la combinación de teclas CTRL+SHIFT+L puedes editar varias líneas a la vez, muy útil para cambios paralelos repetitivos.
Acceso directo a métodos o funciones
Es posible acceder directamente a métodos o funciones de un archivo con código fuente, lo cual es muy interesante cuando nuestro código alcanza grandes proporciones. Se puede hacer pulsando la combinación de teclas CTRL+R, y escribiendo a continuación el nombre de la función.
Auto-cerrado de etiquetas
Si nos acostumbramos a utilizarla, la combinación de teclas ALT+. puede ayudarnos a cerrar rápidamente cualquier etiqueta HTML que tengamos abierta de forma instantánea.
Acceder a una línea concreta
Existe un atajo mediante el cual es posible saltar a una línea concreta de un archivo, simplemente pulsando la combinación de teclas CTRL+G y escribiendo a continuación el número de la línea deseada.
Code-folding
Sublime Text también proporciona la posibilidad de plegar o desplegar bloques de código, tanto en HTML como en lenguajes de programación. De esta forma, podemos centrarnos en la parte del código que nos interesa sin desorientarnos o perder el foco en lo que no tenemos intención de tocar.
Para utilizar esta funcionalidad, basta con mover el ratón hacia la parte izquierda del código (donde aparecen los números) y pulsar sobre las flechas para contraer o desplegar el código:
La zona reducida se mostrará con un pequeño símbolo … que indica que hay más contenido en su interior.
Búsquedas
A medida que el código que manejamos se hace más grande, necesitaremos realizar operaciones de búsquedas de la forma más rápida posible. Para ello, pulsamos CTRL+F y nos aparecerá un pequeño panel donde escribir nuestra búsqueda. Esto resaltará en color la primera coincidencia y en color «hueco» las coincidencias sucesivas a medida que escribimos la palabra a buscar.
Por otro lado, si lo que queremos es realizar una búsqueda para reemplazar un texto por otro, pulsamos CTRL+H, lo que hará que nos aparezca el mismo menú, pero esta vez preparado para realizar una búsqueda con posibilidad de reemplazo.
Expresiones regulares
Es muy interesante saber que Sublime Text permite realizar búsquedas o reemplazos utilizando Expresiones regulares. Esto es una forma excelente de hacer cambios utilizando patrones no exactos. Para activar el soporte de expresiones regulares simplemente hay que pulsar el primer botón de la barra de búsqueda, simbolizado por los caracteres.*.
Una vez activo, podremos realizar búsquedas o reemplazos utilizando expresiones regulares. En el siguiente ejemplo se ha utilizado la expresión regular d.. que significa «Cualquier texto con una d seguido de dos caracteres cualquiera»:
El mundo de las expresiones regulares es muy amplio, pero es muy útil para automatizar tareas de búsqueda con patrones muy variables o desconocidos. Aquí algunos ejemplos:
Expresiones regulares atómicas
| RegEx | Significado |
| ^texto | Línea que empiece por a |
| texto$ | Línea que acabe en a |
| . | Cualquier carácter |
| a* | Cero o más «a» |
| a+ | Una o más «a» |
| a|b | Carácter «a» o «b» |
| [aeiou] | Una vocal minúscula |
| [^aeiou] | Carácter no vocal minúscula |
Expresiones regulares básicas
| RegEx | Significado |
| [a-zA-Z0-9]+ | Letras o números |
| [0-9]{2} | Cifra de 2 dígitos |
| [0-9]{1,3} | Cifra de 1 a 3 dígitos |
| [0-9]A? | Número que puede (o no) acabar en «A» |
Expresiones regulares de agrupación (captura)
| RegEx | Significado | Valor capturado ($1) |
| h(.+)a | Textos como: hola, hala, hasta, hora… | ol, al, ast, or… |
| Nivel ([0-9]+) | Textos como: Nivel 0, Nivel 1, Nivel 2… | 0, 1, 2… |
Lo interesante de estas últimas expresiones regulares es que los paréntesis efectúan una tarea de agrupación, capturando el contenido y guardándolo en una variable $1. En el caso de que la expresión regular contenga más paréntesis, irá capturando en variables sucesivas: $1, $2, $3, etc…
Todo esto puede ser muy útil para realizar reemplazos con fragmentos capturados en dichas variables.
Puedes practicar expresiones regulares con la herramienta Regular Expression Test Page, que permite comprobar si varios casos diferentes casan o no.
Snippets
Tanto con documentos de texto como lenguajes de marcado o etiqueta o código de programación, es muy común encontrarnos en la situación de tener que escribir textos repetitivos frecuentemente, lo que puede resultar algo tedioso y hasta desagradable.
Sublime Text permite crear snippets: pequeño fragmentos de código que puedes expandir a partir de la escritura de un pequeño texto seguido de la tecla TAB, ahorrando así mucho tiempo. En el siguiente ejemplo veremos como crear un sencillo snippet utilizando el texto disparador «hola», que lo expanderá a un texto predefinido más largo.
Creación de un Snippet
Lo primero, nos dirigimos al menú Tools / New Snippet…. Se nos creará un nuevo documento XML con la estructura apropiada para crear el snippet. Esta estructura tiene tres partes que debemos modificar.
- Etiqueta content
Dentro de la etiqueta content escribiremos el texto expandido. Este texto debe estar rodeado de las etiquetas <[CDATA[ y ]]> para evitar problemas con el escapado. Escribimos el texto en su interior, teniendo en cuenta que también se puede utilizar el formato ${1:palabra} para que al expandir un texto se seleccione automáticamente esa palabra (y podamos cambiar a las sucesivas pulsando TAB). De esta forma facilitaremos la edición del snippet.
- Etiqueta tabTrigger
Esta será la palabra que tenemos que escribir y pulsar TAB para expandir. Utiliza palabras lo suficientemente complejas para no escribirlas accidentalmente, pero lo suficientemente sencillas como para resultar cómodas y útiles.
- Etiqueta scope
Este parámetro (opcional) nos permite especificar si el snippet funcionará sólo en un tipo de archivo concreto, como archivos HTML (text.html) o código fuente Python (source.python), por ejemplo.
Eso es todo. Con esos parámetros especificados tendremos el snippet preparado para funcionar. Guardamos el archivo en la carpeta Data Packages User con el nombre hola.sublime-snippet(debe acabar con la extensión .sublime-snippet).
Listo. Ya podemos probarlo en el editor
Obviamente, estas características podemos utilizarlas para automatizar tareas más interesantes, como por ejemplo, una estructura personalizada o template de un documento HTML nuevo, escribiendo html y pulsando TAB, posicionándose automáticamente en el título de la página. Pero más adelante veremos un paquete llamado EMMET que utiliza la filosofía ZEN Coding, mucho más útil para ahorrar tiempo:
Instalando Package Control
La comunidad que se ha creado entorno a Sublime es impresionante y prueba de ello es la cantidad de paquetes/plugins que se han ido desarrollando. Así pues, es imprescindible tener un repositorio de paquetes para poder descubrir, instalar, actualizar y eliminar plugins. De esto se encarga Package Control.
La instalación es tan sencilla como ejecutar el siguiente comando en la consola deSublime:
import urllib2,os,hashlib; h = ‘eb2297e1a458f27d836c04bb0cbaf282’ + ‘d0e7a3098092775ccb37ca9d6b2e4b7d’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( ‘http://packagecontrol.io/’ + pf.replace(‘ ‘, ‘%20’)).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), ‘wb’ ).write(by) if dh == h else None; print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h) if dh != h else ‘Please restart Sublime Text to finish installation’)
Ahora, cada vez que queramos buscar un paquete en el repositorio para instalarlo, pulsamos CTRL+SHIFT+P y escribimos Install Package. Entonces podremos buscar entre la gran cantidad de paquetes que existen para Sublime Text e instalarlos con un simple click.
De la misma forma, pulsando CTRL+SHIFT+P y escribiendo Remove Package podemos desinstalar paquetes que no queramos utilizar más.
Si lo deseas, también puedes acceder a Package Control Repository para buscar paquetes vía web, categorizados en secciones como nuevos, tendencias, populares, autores u otros.
IMPORTANTE: Asegúrate de instalar plugins compatibles con la versión de Sublime Text que estés utilizando. Si estás utilizando ST3, es posible que no puedas utilizar paquetes diseñados para otra versión.
Esquemas de colores
En el menú Preferences / Color Scheme se encuentran varios esquemas que cambian las combinaciones de colores del editor. Existen desde combinaciones con temas claros a temas más oscuros, como el que viene de serie. El esquema de colores que trae Sublime Text por defecto se llama Monokai.
En los paquetes del repositorio también puedes encontrar muchos otros esquemas de colores y temas instalables, como por ejemplo Flatron, Predawn, Brogrammer o Devastate.
Paquetes o plugins interesantes
EMMET (Zen Coding)
EMMET (antes conocido como Zen Coding) es un estupendo plugin para Sublime Text que permite aprovechar la sintaxis CSS para ahorrar tiempo en la creación de código HTML.
Por ejemplo, podemos especificar el texto **ul>li*5>strong+em** con el que le indicamos:
Construye una lista desordenada (ul).
Que contenga 5 puntos (li*5).
Que cada punto contenga una etiqueta strong, seguida de em.
La siguiente referencia muestra los operadores existentes que pueden utilizarse y combinarse con EMMET:
| Operadores | Significado |
| > | Hijo (dentro de…) |
| + | Hermano (al lado de..) |
| ^ | Salir de la etiqueta actual |
| * | Multiplicador (repite x veces) |
| () | Agrupador |
| . | Clase |
| # | ID |
| [attr] | Atributos |
| $ | Número de iteración |
| {} | Añadir texto |
Para entender mejor estas opciones, prueba con los siguientes ejemplos:
strong
ul>li*5>strong{Punto $}+em
div#header+div#container>div#content+div#menu^+div#footer
GutterColor
Si sueles escribir archivos de estilos CSS con frecuencia, este paquete te será de mucha ayuda, puesto que se encarga de colocar un pequeño círculo a la izquierda de la línea en la que has colocado un color hexadecimal.
ColorPicker
También para diseñadores, este paquete permite abrir un panel de elección de color al pulsar la combinación de teclas CTRL+SHIFT+C. Al seleccionar un color y pulsar aceptar, nos establecerá el código hexadecimal, ahorrándonos el tener que utilizar un programa externo para tal fin.
BracketHighlighter
Este sencillo paquete nos permite resaltar visualmente el ámbito de la zona donde estamos escribiendo en nuestro código. Así, si nos posicionamos sobre la apertura de una llave o unos paréntesis, se resaltará visualmente donde se cierran.
CSS Snippets
El paquete CSS Snippets contiene una gran cantidad de snippets especialmente diseñados para ahorrar tiempo en el desarrollo de código CSS. Por ejemplo, snippets que permitan crear código compatible con todos los navegadores, utilizando prefijos vendor de características que aún no están implementadas por completo.
SFTP
Sin duda de lo que más se quejan los usuarios de Sublime es de la falta de un buen gestor FTP/SFTP. Este paquete es bastante bueno y ayuda a resolver gran parte del problema. Entraré más en detalle en otro post.
Plaintasks
Excelente gestor de «To Do». Cuando lo conocí me gusto mucho lo sencillo, fácil y rápido manejo que tiene mediante atajos de teclado.
Alignment
Muy cómodo cuando escribes código ya que te tabula automáticamente el código para que quede ordenado y limpio.
Atajos de teclado
Existen infinidad de atajos de teclado para el editor y plugins que son totalmente personalizables. Lo mejor para aprenderlos es curiosear los defaults «Key Bindings» que traen tanto Sublime como plugins.
| Atajo de teclado | Significado | Atajo de teclado | Significado |
| CTRL+N | Nueva pestaña | CTRL+Z | Deshacer último cambio |
| CTRL+W | Cerrar pestaña | CTRL+Y | Revertir último cambio |
| CTRL+S | Salvar pestaña actual | CTRL+X | Cortar texto seleccionado |
| CTRL+SHIFT+T | Reabrir pestaña cerrada | CTRL+C | Copiar texto seleccionado |
| CTRL+M | Saltar a llave/paréntesis | CTRL+V | Pegar texto seleccionado |
Generales Sublime Text
Ctrl + P: Característica GoToAnything para abrir rápidamente archivos de nuestro proyecto.
Ctrl + Shift + P: Acceso a Command Palette desde donde se puede cambia la sintáxis, acceder a Package Control, puedes buscar lo que quieras.
Ctrl + G: Ir a una línea.
Manejar texto
Ctrl + L: Seleccionar una línea.
Ctrl + D: Seleccionar palabra (pulsando varias veces, realiza selección múltiple).
Ctrl + KK: Elimina desde el cursos hasta el final de la línea.
Ctrl + Shift + D: Duplica la línea.
Ctrl + /: Insertar comentario.
HTML Y XML
Ctrl + Shift + A: Seleccionar el contenido dentro de una etiqueta.
Ctrl + Shift + .: Cerrar etiqueta.
Layouts
Ctrl + 1 (2, 3, …): Desplazarse entre las pestañas
Alt + Shift + 1 (2, 3, …): Cambiar Layout (1 columna, 2 columnas, 3 columnas, …)
Ctrl + Shift + 1 (2, 3, …): Cambiar pestaña seleccionada de grupo.
Ctrl + 1 (2, 3, …): Cambiar el foco de grupo.
