Guía definitiva Sublime Text 2

Guía definitiva y en castellano de Sublime

Los que me conocen saben que desde siempre he sido una fiel defensora y seguidora, o como dicen algunos "evangelizadora" de Eclipse, desde el momento en el que empecé a dedicarme profesionalmente al desarrollo web comencé con Eclipse, pero a medida que pasaban los años cada vez era más difícil recomendar esta herramienta debido a sus constantes cuelgues, lentitud a la hora de cargar proyectos, refrescar el árbol de trabajo, etc...

Un día, hará aproximadamente un año, escuchando un webcast sobre desarrollo web oí que recomendaban utilizar un editor llamado "Sublime Text", al principio pensé ¡no puede ser tan bueno como mi Eclipse!, el cual me había acompañado a lo largo de estos años tanto en el trabajo como en casa.

Finalmente un día en el trabajo, volvía a colgarse Eclipse al realizar un refresh de un proyecto con tropecientos mil archivos... recordé por un momento aquella herramienta de la que todos hablaban llamada... Sublime Text.

Al llegar a casa, me puse manos a la obra, busqué en Google "Sublime text 2", me descargué el editor y .... ¿y ahora qué? pensé, no había nada de información en castellano y en inglés eran pocas las webs que comentasen temas de configuración, cambiar atajos de teclado, personalización, etc, etc.

Poco a poco fui aprendiendo donde estaban las cosas en Sublime y configurando el editor a mi gusto. Evangelicé a mis compañeros de trabajo y ahora todo mi equipo a guardado en el baúl de los recuerdos a Eclipse y han dado la bienvenida a Sublime Text 2, un editor ligero, rápido y "fácilmente configurable", lo digo entre comillas, porque realmente si no sabes donde están las cosas es difícil de entender y de ahí que después de medio año utilizando Sublime Text, aún sigue sin haber una guía clara y detallada en castellano para los novatos que se incorporan tanto en desarrollo web como a profesionales del sector que quieren pasarse a este editor, es por eso que me he decidido a crear esta guía definitiva de Sublime Text 2.

Repartida en varios capítulos intentaré explicar detalladamente y paso a paso, desde la instalación hasta la creación de snippets, para que tú también puedas disfrutar de las comodidades de Sublime Text 2 el mejor editor para desarrollo web que he utilizado.

¡Comencemos! ;-)

Guía definitiva y en castellano de Sublime

Descargar Sublime Text 2

Sublime Text 2 está disponible para Windows, OS X y Linux y lo puedes descargar de forma gratuita en su página oficial y utilizarlo el tiempo que desees.

Si después de leer esta guía te he convencido para utilizar este fantástico editor y quieres colaborar con sus desarrolladores, puedes adquirir una licencia por sólo 59$, la cual te dará derecho a la instalación de Sublime en múltiples ordenadores y a actualizaciones ilimitadas.

Características básicas

Sublime Text 2 se puede personalizar completamente, dispone de multitud de plugins gratuitos que puedes descargar y utilizar. Nada más abrir el programa verás una interfaz minimalista, en el centro se encuentra el código, a la izquierda una barra lateral donde podrás ver los archivos abiertos, entre otras cosas que explicaré más adelante y a la izquierda una barra lateral llamada minimapa donde pondrás ver tú código, y navegar con facilidad por él, desplazándote al punto exacto donde quieres ir sin necesidad de utilizar el scroll.

Minimapa de Sublime

Sublime Text 2 Primeros pasos

La barra lateral de la izquierda, llamada SideBar (para ocultarla o mostrarla simplemente pulsa Ctrl+K+B en Windows/Linux o Cmd+K+B en Mac) te permite visualizar los archivos abiertos actualmente, pero puedes extender su uso a un explorador de archivos instalando el plug-in SideBar Enhancements del cual hablaré más adelante.

Una de las opciones indispensables y la que debes aprenderte nada más instalar Sublime Text 2 es "Goto Anything", que te permitirá localizar los archivos rápidamente, prueba pulsando Ctrl+P en Windows/Linux o Cmd+P en Mac. Al empezar a escribir unos cuantos caracteres empezarán a filtrarse aquellos archivos que coinciden en parte con el nombre que has escrito. Si quieres visualizar su contenido ni quiera tienes que entrar dentro del archivo con que te desplaces con las flechas del teclado, obtendrás una vista previa en el editor, cuando estés seguro de que ese es el archivo que quieres abrir simplemente clicka o pulsa [Enter] sobre él.

Además Goto Anything no sólo te permitirá localizar archivos fácil y rápidamente sino que también podrás desplazarte hasta una linea al escribir :[Numero], si en lugar de los dos puntos introduces @ verás los métodos utilizados anteriormente y con # podrás buscar en el interior del fichero.

A continuación te dejo un par de ejemplos, para que te sea más fácil recordar lo que hemos aprendido hasta ahora de Goto Anything

Ctrl+P, Cmd+P: Abrir Goto Anything

Goto Anything Sublime

Ctrl+P, Cmd+P y escribir '#search' Buscará dentro del archivo la palabra 'search"

Guía definitiva y en castellano de Sublime

Ctrl+P, Cmd+P y escribir '@print' Ir al método 'print'

Guía definitiva y en castellano de Sublime

Trabajar con proyectos

Para trabajar aún mejor con proyectos en Sublime Text 2, hay dos maneras:

File > Open (Ctrl+P, Cmd+O), de esta forma Sublime Text 2 se iniciará con la carpeta elegida como base para tu trabajo. De forma que todas los comandos ejecutados como "Goto Anything" o "Búsqueda Avanzada" se realizarán en base a la carpeta abierta.

Proyectos: existe la posibilidad de combinar las carpetas y archivos en proyectos. Selecciona una carpeta y/o archivos y selecciona en el menú superior Project > Save Project As...

Puedes crear tantos proyectos como necesites y para alternar entre uno y otro sólo has de ir a Project > Switch Project in Windows...

A medida que añadas, más carpetas o archivos nuevos al proyecto se guardarán automáticamente, incluso la posición del cursor.

Gestión de etiquetas

Otro de los puntos fuertes de Sublime Text 2 es su built-in, un motor de auto-completado para etiquetas HTML, CSS, ... entre otros lenguajes, que te permitirá desarrollar sitios webs más cómodamente. Ya que dispone de autocerrado y autocompletado de etiquetas.

Por ejemplo si creas un documento nuevo de html y comienzas a escribir text y pulsas tabulador, el editor te completará y cerrará la etiqueta. Así mismo si escribes: div.content y pulsas tabulador, el editor escribirá por ti: <div class="content"></div> y lo mismo pasa con los identificadores, si escribes div#main y pulsas tabulador el editor escribirá por ti: <div id="main"></div>

Otra característica interesante es que si no cierras las etiquetas el auto-cerrado lo puedes realizar con Alt+. (Cmd+Alt+.)

En el caso de CSS es algo parecido, basta con empezar a escribir unos pocos caracteres para que el editor los reconozca. Por defecto ya trae algunos predefinidos como mt y tabulador para crear margin-top, pt y tabulador creará padding-top, etc.

Gestión de etiquetas y autocompletado en Sublime

Personalizar Sublime Text 2

Como ya has podido leer en esta guía, Sublime Text 2 es la herramienta perfecta de desarrollo, nada más instalarla dispones de muchas ayudas a la hora de programar, auto-completado, etc, etc, pero si aún así quieres personalizar detalles como colores, skins, teclas rápidas... también puedes hacerlo.

Cambiar el skin en Sublime Text 2

Por defecto nada más instalar y abrir el programa se mostrará con el skin Monokai, que tiene fondo negro con letras claras. Si quieres cambiar de skin sólo tienes que acceder a: Preferences > Color Scheme > y seleccionar un skin hasta encontrar uno que te guste, yo prefiero utilizar el "Mac Classic". Sí has probado todos y ninguno te convence siempre puedes descargárte más esquemas de color o bien crear uno propio (en siguientes capítulos veremos como crear un skin personalizado)

Package Control

Uno de los plug-ins fundamentales que has de instalar nada más abrir Sublime Text 2 es Package Control.

Package Control, tal y como su nombre indica es un gestor de paquetes que te permite instalar fácilmente cientos de plugins. A día de el repositorio dispone de más de 500 plugins. Su instalación es muy sencilla, simplemente has de ir a la página de instalación de Package Control copiar el comando que aparece remarcado con fondo gris, pegarlo en la consola de Sublime text 2 y pulsar Enter, puedes acceder a la Consola de Sublime Text utilizando el atajo de teclado Ctrl+` o Cmd+` si estás en Mac, si lo prefieres puedes ir directamente desde el menú View > Show Console.

Una vez completada la instalación, puedes acceder al Package Control pulsando Ctrl+Shift+P o Cmd+Shift+P. Si escribes Package podrás ver todas las opciones disponibles del Package Control. Para instalar un nuevo paquete deberás seleccionar "Installa Package", puede que tarde unos segundos, a continuación te mostrará una lista de todos los plugins disponibles a instalar (si uno de los plugins ya se encuentra instalados no te lo mostrará en la lista de instalación). Si deseas eliminar un plugin lo único que has de hacer es seleccionar Remove package.

Package Control

Otro plugin indispensable es SideBarEnhancements, que transforma la barra lateral (el SideBar que comentamos anteriormente) en un gestor de archivos. Te permitirá renombrar archivos, duplicarlos, borrarlos, o incluso abrirlos en otra aplicación. Su utilización es muy sencilla, una vez instalado sólo has de hacer click derecho sobre un archivo y escoger la acción a aplicar.

Plugin SideBar Enhancements

Si navegas por la web de Package Control, encontrarás la lista de plugins disponibles. Explicar cada uno de ellos aquí daría para crear un libro de Sublime Text 2, así que comentaré algunos interesantes que yo también utilizo, y si lo deseas puedes dejar un comentario sugiriendo temas que te gustaría que tratase en futuros artículos.

Plugins de Sublime Text 2 recomendados para desarrollo web

  • jQuery
  • HTML5
  • Linter
  • Prefix
  • LESS
  • Git

Cambiar la configuración general y los atajos de teclado

En mi anterior artículo relacionado con Sublime Text 2 comentaba los atajos de teclados más utilizados y daba la posibilidad de descargar un PDF. Eso no significa que no se puedan modificar y adaptar a tu gusto. Si por ejemplo estás acostumbrado a utilizar cualquier otro editor donde para buscar en vez de Ctrl+F es Ctrl+B, puedes editar cómodamente los atajos de teclado y ponerlos a tu gusto, no hay nada que Sublime Text 2 no te permita realizar y/o modificar.

Para modificar un atajo de teclado o bien añadir uno nuevo lo único que has de hacer es seleccionar el menú superior: Preferences > Key Bindings Default o Key Bindings User.

Te recomiendo que modifiques Key Bindings User, puedes copiar el contenido que quieras modificar del Key Bindings Default y pegarlo en Key Bindings User, más que nada porque si escribes el del Usuario y luego no te convence siempre puedes volver al de por Defecto.

Cambiar los atajos de teclado en Sublime

Lo mismo ocurre con la configuración general del programa, en Settings Users y en Settings Default tienes disponible la configuración del programa. Tal y como te recomendaba anteriormente es conveniente que las modificaciones las realices sobre Settings Users. Para localizar la configuración puedes acceder a través del menú superior en Preferences > Settings Default o Settings Users.

Cambiar la configuración en Sublime

Snippets

Llegamos a la parte más interesante de Sublime Text 2 los Snippets.

Los snippets son pequeños fragmentos de códigos guardados en archivos individuales que te permitirán insertar de forma fácil y rápida partes de código simplemente escribiendo una palabra y pulsando tabulador, o bien asignándole una combinación de teclas.

Por defecto el programa ya cuenta con unos cuantos snippets por defecto por ejemplo "lorem" prueba a abrir un nuevo documento (Ctrl+N o Cmd+N) y escribir lorem y luego tabulador ¿sencillo verdad? ;)

Los snippets además te permiten definir la posición del cursor cuando se insertan, además de desplazarte por las diferentes partes de fragmento insertado, pulsando tabulador.

Crear snippets puede ser relativamente sencillo todo depende de lo que quieras que realicen. Las posibilidades son infinitas y el único límite es tu imaginación.

Snippets en Sublime

En siguientes artículos hablaré sobre la creación de snippets en Sublime Text 2, aunque todo depende de la aceptación que haya tenido esta guía. Cualquier sugerencia, comentario, ... será bienvenida :)