Consejos y trucos de Sublime Text 2 (actualizado)

() translation by (you can also view the original English article)

Sublime Text 2 es uno de los editores de código más rápidos e increíbles que se han lanzado en mucho tiempo. Con una comunidad y un ecosistema de plugins tan apasionados como éste, puede que sea imposible para cualquier otro editor ponerse al día. Hoy te mostraré mis consejos y trucos favoritos.

Sublime Text 2 está actualmente disponible para las principales plataformas: OS X, Linux y Windows.

1 - Versiones con bordes sangrantes

Sublime está en desarrollo activo. Si, como yo, quieres utilizar la última versión posible de la aplicación, puedes descargar la versión de desarrollo. Verás que hay nuevas actualizaciones (automáticas) cada dos días aproximadamente.

Descarga una versión de desarrollo de Sublime 2 aquí.

2 - Obtener un mejor icono

Actualización: aquí hay un icono mejor

En su defensa, Sublime Text 2 está todavía en estado beta. El icono oficial probablemente cambiará con el lanzamiento oficial. Hasta entonces, Nate Beaty ha creado un icono alternativo, si lo prefieres.

Para integrarlo, tienes que sustituir el archivo "Sublime Text 2.icns" existente por este nuevo. En un Mac, busca Sublime 2 en tu carpeta Aplications/, luego haz clic con el botón derecho y "Ver contenido del paquete". Por último, navega hasta Contents/Resources/, y arrastra el nuevo icono hacia dentro, sobrescribiendo el existente.

Ten en cuenta que, si utilizas la versión de desarrollo de Sublime Text que se actualiza con frecuencia, con cada actualización se eliminará el icono. Teniendo esto en cuenta, no te preocupes por el icono por el momento.

3 - Acceder a la paleta de comandos

Al igual que en TextMate, podemos utilizar la paleta de comandos de Sublime accediendo al menú Herramientas, o pulsando Mayúsculas + Comando + P, en el Mac. Ya sea que necesites visitar una página de Preferencias, o pegar un fragmento, todo eso se puede lograr aquí.

4 - Cambio de archivos a la velocidad del rayo

Pulsa Control o Comando + P, escribe el nombre del archivo al que quieres acceder (buscador difuso) y, sin ni siquiera pulsar Enter, serás transportado instantáneamente a ese archivo. Aunque Vim y aplicaciones como PeepOpen ofrecen una funcionalidad similar, no son tan rápidos como la implementación de Sublime

5 - ¿Cómo sobrevivimos antes de la multiselección?

Los editores como TextMate han ofrecido durante mucho tiempo la selección vertical, que es bastante limpia. Pero, con la multiselección, puedes tener varios cursores en la página. Esto puede reducir drásticamente la necesidad de utilizar expresiones regulares y consultas avanzadas de búsqueda y reemplazo. Tal vez convenga hacer una rápida demostración visual...

Para activar la multiselección, tienes varias opciones:

Pulsa Alt o Command y luego haz clic en cada región donde necesites un cursor.
Selecciona un bloque de líneas y, a continuación, pulsa Mayúsculas + Command + L.
Coloca el cursor sobre una palabra concreta y pulsa Control/Command + D repetidamente para seleccionar otras apariciones de esa palabra.
También puedes añadir un cursor adicional en todas las apariciones de una palabra escribiendo Alt+F3 en Windows, o Ctrl+Command+G en Mac. ¡¡¡Increíble!!!

6 - Guías de sangría

Actualización: esta función viene ahora preinstalada con Sublime Text 2.

Es una característica tan pequeña, pero siempre me ha gustado cómo el Notepad++ en Windows muestra las guías de sangría; hace que la página sea mucho más fácil de navegar y formatear. Sublime Text 2 ofrece esta capacidad, a través de un plugin creado por Nikolaus Wittenstein.

Para integrar este plugin:

Descárgalo
Cambia el nombre de la carpeta a "Indent Guides" y arrástrala a la carpeta Packages. En un Mac, esta ruta sería Application Support/Sublime Text 2/Packages

7 - Control de paquetes

Los pasos descritos en el consejo anterior (#6) son un poco tediosos, ¿no? En su lugar, podemos instalar el excelente Sublime Package Control, que agiliza todo el proceso.

Para instalar "Package Control", abre Sublime y pulsa Control + `. A continuación, pega el siguiente fragmento en la consola.

    import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

No te preocupes si no entiendes el código de arriba; ¡solo tienes que copiar y pegar!

Por último, reinicia Sublime Text y ve a Preferencias -> Configuración de paquetes. Si la instalación fue exitosa, ahora verás un ítem de Control de Paquetes en esa lista.

¡Con Package Control instalado, el proceso de añadir nuevos plugins y funcionalidades es increíblemente sencillo!

Para ver un ejemplo de uso, consulta el siguiente punto de esta lista.

8 - Alineación

Si eres de los que prefieren alinear los signos de igualdad, por ejemplo, en tu JavaScript...

1	// Before var joe = 'joe'; var johnny = 'johnny'; var quaid = 'quaid'; // After var joe = 'joe'; var johnny = 'johnny'; var quaid = 'quaid';
2

...este proceso puede ser automatizado, a través del plugin Sublime Alignment. En lugar de descargarlo e instalarlo manualmente, utilicemos Package Control (descrito en el punto 7).

Pulsa Shift + Command + P
Escribe "install" para que aparezca la opción "Package Control: Instalar paquete" y pulsa Intro
Busca "Alineación" y pulsa Enter para instalarlo.
Ya está; ¡tan fácil! Escribe Shift + Command + A para auto-alinear.

Este proceso se puede repetir para todos los plugins típicos que instalamos, como Zen Coding.

9 - Fanático de Vim

Soy un gran fan de Vim. La cantidad de potencia que proporciona es una locura. ¡El hecho de que me haya pasado a Sublime Text 2 debería decir mucho!

Si estás usando una versión de desarrollo de Sublime Text (ver el número 2 de esta lista), puedes activar el modo Vintage, que proporciona soporte para los comandos Vi que conocemos y amamos - vale... algunos de nosotros amamos. El resto lo odia. :)

Para activar el modo Vintage, ve a Preferences/Global Settings - Default. Una vez que se abra este archivo, ve hasta el final y cambia "ignored_packages": ["Vintage"] a "ignored_packages": []. A continuación, reinicia Sublime, pulsa la tecla Escape y, tada: ¡modo comando!

Cursor de bloque

Una cosa que puedes notar es que, en el modo de comando, puede ser difícil encontrar el cursor (especialmente cuando se aprovechan cosas como los marcadores). En más de una ocasión, me he encontrado intentando buscar su ubicación.

Aunque no es una solución perfecta, un plugin, llamado "SublimeBlockCursor", intenta remediar este problema.

Nota: Aunque el readme indica que SublimeBlockCursor puede ser instalado, vía Package Control, no fui capaz de encontrarlo. En su lugar, tuve que clonar el proyecto manualmente en la carpeta Packages.

10 - Edición sin distracciones

A veces, necesitamos filtrar toda la palabrería adicional que se interpone en nuestra codificación. Utiliza el "Modo sin distracciones" para llevar esta idea lo más lejos posible. Esta opción está disponible, a través del menú Ver. Selecciona "Entrar en el modo libre de distracciones", o utiliza el atajo de teclado de Mac, Control + Mayúsculas + Comando + F.

11 - Puedes seguir utilizando los paquetes de TextMate

Slim

Los fragmentos y temas de TextMate se adaptan perfectamente a Sublime Text. Solo tienes que colocarlos en la carpeta Packages, con la extensión .tmbundle intacta, y Sublime reconocerá los archivos. ¡Esto significa que todo el catálogo de temas de TextMate funcionará en Sublime!

Por ejemplo, últimamente he estado trabajando bastante con el (fantástico) motor de plantillas Slim, y necesitaba un mejor resaltado de sintaxis. Fred Wu creó un paquete para TextMate, pero, tada, ¡también funciona perfectamente en Sublime Text! Si estás interesado, puedes descargar el paquete de Slim aquí; incluye tanto fragmentos como resaltado de sintaxis.

12 - Temas personalizados

El tema por defecto de Sublime Text es excelente, pero prefiero un tema personalizado claro y oscuro, Soda, creado por Ian Hill.

Instalación

Tomado de la página de Github...

"Si eres usuario de git, la mejor manera de instalar el tema y mantenerlo actualizado es clonar el repo directamente en tu directorio Packages en el área de configuración de la aplicación Sublime Text 2."

Uso de Git

Ve a tu directorio de paquetes de Sublime Text 2 y clona el repositorio de temas usando el siguiente comando:

1	git clone https://github.com/buymeasoda/soda-theme/ "Theme - Soda"
2

Descargar manualmente

Descarga los archivos utilizando la opción de descarga .zip de GitHub.
Descomprime los archivos y cambia el nombre de la carpeta a Theme - Soda
Copia la carpeta en tu directorio de paquetes de Sublime Text 2

Activación del tema

Para configurar Sublime Text 2 para utilizar el tema:

Abre tu archivo de Preferencias Globales de Usuario de Sublime Text 2: Sublime Text 2 -> Preferencias -> Configuración global del usuario
Añade (o actualiza) tu entrada de tema para que sea "theme": "Soda Light.sublime-theme" o "theme": "Soda Dark.sublime-theme

Ejemplo de configuración global del usuario

1	{ "theme": "Soda Light.sublime-theme" }
2

13 - Rastreo de páginas

Sublime Text nos proporciona unas cuantas formas diferentes de consultar una página (fuera de las funciones de búsqueda estándar).

Funciones

¿Necesitas una forma rápida de navegar a una función o método específico?

Escribe Control/Comando + r para que aparezca una ventana emergente que permite esto mismo (fíjate en el símbolo @). Y lo que es mejor, la búsqueda también es difusa, lo que es especialmente útil para las clases grandes.

HTML

¿Qué pasa si quieres pasar inmediatamente a una parte específica de una página HTML, digamos, al div con una clase de container. Escribe Control/Command + p, y luego #, y al instante verás un árbol de tu documento.

Ir al número de línea

Para desplazarte rápidamente a un número de línea específico en la página, puedes pulsar Control + g. Sin embargo, notarás que, una vez más, saca esa paleta (Control/Comando + p), y añade el símbolo :. Esto se ha adoptado de Vim.

Esto significa que, además de Control + g, también puedes escribir, Control/Comando + p, y luego :LINE_NUMBER.

14 - Obtén archivos remotos con facilidad

Nettuts Fetch

Digamos que eres un fan de Normalize.css. Tal vez, lo descargues y lo guardes en un fragmento, o almacenes la hoja de estilos, en sí misma, en una carpeta de activos. De esta manera, para futuros proyectos, solo tienes que copiar y pegar.

El único problema de este método, como todos hemos descubierto, es que, si han pasado unos meses, es más que posible que el activo (en este caso, Normalize.css) haya sido actualizado por el creador. Así que tus opciones son, o bien utilizar la, ahora, anticuada versión de Normalize, o, una vez más, volver a la página de GitHub y sacar una copia fresca. Todo esto parece tedioso.

Creado por Weslly Honorato, Nettuts+ Fetch es la solución a nuestro dilema. Se puede instalar, a través de Package Control.

Uso

Cuando trabajes con Fetch solo utilizarás dos comandos. Primero, necesitamos guardar algunas referencias de archivos. De nuevo, abre la paleta de comandos y busca "Fetch". Por ahora, elige "Administrar archivos remotos".

Lo bueno de Sublime Text 2 es que la configuración es increíblemente sencilla. Para asignar referencias a los archivos de activos en línea, sólo tenemos que crear un objeto, así (no te preocupes; uno será pre-populado para usted, después de la instalación).

Por lo tanto, para tirar de la última copia de jQuery (si no quieres usar un CDN).

1	{ "files": { "jquery": "http://code.jquery.com/jquery.min.js" } }
2

Más información sobre el uso de Nettuts+ Fetch.

15 - Plugin Prefixr

Construido por Will Bond (creador de Package Control), el plugin Nettuts+ Prefixr te permite actualizar automáticamente toda tu hoja de estilos para incluir soporte para todos los diversos prefijos de proveedores CSS3 requeridos. De esta manera, nunca tienes que visitar el sitio web en sí; simplemente escribes un comando de teclado, y:

1	.box { border-radius: 10px; box-shadow: 0 0 5px rgba(0,0,0,.4); }
2

se convertirá en:

    .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 0 5px rgba(0,0,0,.4); -moz-box-shadow: 0 0 5px rgba(0,0,0,.4); box-shadow: 0 0 5px rgba(0,0,0,.4); }

Uso

Una vez instalado (a través de Package Control), selecciona tu hoja de estilo (o un solo bloque), pulsa ctrl+alt+x en Windows y Linux, o cmd+ctrl+x en OS X, y el código se ejecutará instantáneamente a través del servicio web de Prefixr.

16 - Lanzar Sublime desde la terminal

Sublime Text 2 incluye una herramienta de línea de comandos, subl, para trabajar con archivos en la línea de comandos."

Para utilizarla, crea un enlace simbólico a la herramienta.

1	ln -s "/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl" ~/bin/subl
2

¡Siempre que ~/bin esté en tu ruta, debería funcionar!

1	cd myProject subl .
2

Consulta aquí las instrucciones adicionales.

17 - Autoformato HTML

Curiosamente, la capacidad de autoformatear HTML no está incluida en la versión por defecto de Sublime Text. El plugin Tag, entre otras cosas, espera proporcionar una solución, sin embargo, debido a algunas deficiencias, especialmente cuando se trata de comentarios HTML, se queda corto.

El plugin Tag se puede instalar a través de Package Control.

Para probar tus habilidades de autoformateo, el siguiente HTML:

1	<html> <head> <meta charset=utf8> <title></title> <!-- begin--> <!-- end comment --> </head> <body> <h1>Hi there</h1> <h2>Bye</h2> </body> </html>
2

...se cambiará a:

1	<html> <head> <meta charset=utf8> <title></title><!-- begin--> <!-- end comment --> </head> <body><h1>Hi there</h1> <h2>Bye</h2> </body> </html>
2

Vaya, parece peor de lo que es. Según mis pruebas, no coloca incorrectamente la etiqueta body en su propia línea, y se enfada cuando se trata de comentarios HTML. Hasta que se solucionen estos problemas (o se ofrezca una solución nativa), es mejor seleccionar manualmente un bloque de HTML para reformatear, en lugar de toda la página.

Se pagará una bonificación de 200 dólares al primer desarrollador de plugins de Sublime Text que cree y envíe el plugin definitivo "Nettuts+ HTML Formatter".

18 - Crear un plugin

Si te sientes aventurero, investiga en la enorme comunidad de desarrollo de plugins de Sublime Text y empieza a contribuir. Tenemos un excelente tutorial sobre el proceso de construcción de un plugin de ST aquí en Nettuts+. ¡Asegúrate de echarle un vistazo si te interesa!

Conclusión

Cuanto más trabajo con Sublime Text 2, más me doy cuenta de lo increíble que es. Pero todo esto no significaría nada si no fuera porque es un editor increíblemente rápido y, lo que es mejor, ¡no está terminado!

Si quieres ir aún más lejos, echa un vistazo a Snippeter, un gestor de fragmentos de código que potencia tu codificación guardando tus fragmentos de código en línea y permitiéndote encontrarlos fácilmente mediante una barra de búsqueda integrada. También te permite exportar elementos como fragmentos de Sublime Text (con soporte de tabTrigger).