Trucos de Sublime Text Editor

El sábado 22 de septiembre estuvimos en la Apache Barcamp Spain con una charla sobre herramientas molonas para desarrolladores web.

Un aparte: si tienes que elegir un sólo evento nacional al que ir para todo el año, que sea este. La Barcamp Spain ha encontrado su propia alma, con una experiencia de cerveza más networking muy divertida. ¡Solo la comida justifica el viaje!

La gente nos preguntó por una transcripción de la tercera parte de la charla, nuestro propio conjunto de trucos para potenciar Sublime Text Editor en el desarrollo web. Así que aquí está:

Ponte cómodo

Es posible que Sublime Text Editor no sea tu primer editor. Probablemente en una vida pasada ya eras eficiente con algún otro como Eclipse, Bean, TextMate… el que sea. Esto se trata de meter las manos en la masa, por lo que es recomendable configurar Sublime con los atajos típicos que ya estén hard-coded en tu cerebro. En Extrema estamos acostumbrados a los atajos de Eclipse.

La idea es estar cómodo, así que haz lo necesario para que Sublime se adapte a ti tan bien como tu editor previo. Ahora puede comenzar lo bueno.

Maximiza el espacio

No soy un gran fan del modo distraction-free de Sublime, pero sí me interesa maximizar el espacio que uso en pantalla (el data-ink ratio, para fans de Tufte). De modo que aquí teneis:

• Activar/desactivar la barra lateral: Ctrl + K, Ctrl + B. Esto es útil si raramente la usas.
• Mostrar varios archivos a la vez: Shift + Alt + [1234589] (a elegir uno). Puedes compararlos uno al lado del otro, uno encima y otro debajo, etc. Una vez que termines, Shift + Alt + 1 te devuelve al modo normal.

Rodear con un tag: Shift + Alt + W

Este es un atajo útil para tags inline (b, em, a), y no tanto para tags de elementos de tipo bloque (div, p, etc.). Pruébalo:

• Escribe un texto cualquiera.
• Selecciona una palabra, presiona Shift + Ctrl + W y después b.

Seleccionar bloque: Shift + Clic derecho arrastrando

Esto es genial cuando necesitas insertar tags al principio de cada línea (p, li).

• Prepara tu lista de datos.
• Selecciona el código y pulsa Tab para identarlo un poco
• Presionando la tecla Shift haz clic derecho y arrastra para seleccionar una sección rectangular del mismo.
• Ahora escribe el tag inicial para que se inserte al principio de cada línea.

Cursores múltiples

Los ejemplos previos son solo casos concretos del uso de cursores múltiples. Para entendernos, digamos que puedes tener diversas instancias de una clase SublimeCursor (no tengo ni idea del código fuente, pero me parece una manera sencilla de entenderlo). Esta es una lista condensada de las cosas que puedes hacer, elaborada a base de prueba y error:

• Ctrl + clic: crear un nuevo cursor
• Ctrl + doble clic: crear un nuevo cursor con la palabra cliqueada ya seleccionada
• Shift + clic: seleccionar usando el último cursor (así que ctrl + clic y después shift + clic para añadir la selección al conjunto de cursores)

Cualquier input del teclado actuará en todos los cursores a la vez. Las combinaciones de teclas como Ctrl + V funcionarán, así como la escritura normal (como pulsar para escribir el tag de cierre en cada línea).

Esto se entiende mejor con una serie de ejemplos:

• Escribe un texto cualquiera.
• Ctrl + clic al principio de cada línea.
• Escribe <p> o <li>

http://extremasistemas.files.wordpress.com/2012/10/afterctrlclick.png?w=640

¿Olvidaste entrecomillar los atributos de un tag?

• Ctrl + doble clic en cada atributo
• Pulsa “

• Ctrl + doble clic en palabras que quieras poner en negrita.
• Si quieres seleccionar más de una, Ctrl + Clic al principio y después Shift + Clic al final.
• Pulsa Shift + Alt + W y después b.

Hay una tonelada de posibles aplicaciones, y lo cierto es que nos descubrimos a nosotros mismos haciendo cosas muy funkies. ¿Qué trucos utilizas tú?