28/10/12 Guía definitiva Sublime Text 2

1/9falasco.org/guia-definitiva-sublime-text-2

BuscarBuscar

Buscar en todo el blog

Sígueme

Seguir a Seguir a @linuxera@linuxera 260 seguidores

ArtículosSublime Text 2 Cheat Sheet

Como crear iconos Webfont conicoMoon

Guía definitiva Sublime Text 2

HTML5 SEO

Sublime Text 2 Snippets

Roxana FalascoRecursos y tutoriales sobre desarrollo frontend HTML5

Home Sobre mi Blog

Publicado el 23/07/2012

Los que me conocen saben que desde siempre he sidouna fiel defensora y seguidora, o como dicen algunos"evangelizadora" de Eclipse, desde el momento en el queempecé a dedicarme profesionalmente al desarrollo webcomencé con Eclipse, pero a medida que pasaban losaños cada vez era más difícil recomendar estaherramienta debido a sus constantes cuelgues, lentitud ala hora de cargar proyectos, refrescar el árbol de trabajo,etc...

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

Finalmente un día en el trabajo, volvía a colgarse Eclipseal realizar un refresh de un proyecto con tropecientos milarchivos... 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 websque 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 recuerdosa 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 deahí que después de medio año utilizando Sublime Text, aún sigue sin haber una guía clara y detalladaen castellano para los novatos que se incorporan tanto en desarrollo web como a profesionales delsector que quieren pasarse a este editor, es por eso que me he decidido a crear esta guía definitiva deSublime Text 2.

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

¡Comencemos! ;­)

Guía definitiva Sublime Text 2Guía definitiva Sublime Text 2Guía definitiva Sublime Text 2

28/10/12 Guía definitiva Sublime Text 2

2/9falasco.org/guia-definitiva-sublime-text-2

Descargar Sublime Text 2Sublime Text 2 está disponible para Windows, OS X y Linux y lo puedes descargar de forma gratuita ensu 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 consus desarrolladores, puedes adquirir una licencia por sólo 59$, la cual te dará derecho a la instalaciónde Sublime en múltiples ordenadores y a actualizaciones ilimitadas.

Características básicasSublime Text 2 se puede personalizar completamente, dispone de multitud de plugins gratuitos quepuedes descargar y utilizar. Nada más abrir el programa verás una interfaz minimalista, en el centro seencuentra el código, a la izquierda una barra lateral donde podrás ver los archivos abiertos, entre otrascosas que explicaré más adelante y a la izquierda una barra lateral llamada minimapa donde pondrásver tú código, y navegar con facilidad por él, desplazándote al punto exacto donde quieres ir sinnecesidad de utilizar el scroll.

Sublime Text 2 Primeros pasosLa barra lateral de la izquierda, llamada SideBar (para ocultarla o mostrarla simplemente pulsa Ctrl+K+Ben Windows/Linux o Cmd+K+B en Mac) te permite visualizar los archivos abiertos actualmente, peropuedes extender su uso a un explorador de archivos instalando el plug­in SideBar Enhancements delcual 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 enWindows/Linux o Cmd+P en Mac. Al empezar a escribir unos cuantos caracteres empezarán a filtrarseaquellos archivos que coinciden en parte con el nombre que has escrito. Si quieres visualizar sucontenido 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 abrirsimplemente 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énpodrá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 aprendidohasta ahora de Goto Anything

Ctrl+P, Cmd+P: Abrir Goto Anything

28/10/12 Guía definitiva Sublime Text 2

3/9falasco.org/guia-definitiva-sublime-text-2

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

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

Trabajar con proyectosPara 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 basepara tu trabajo. De forma que todas los comandos ejecutados como "Goto Anything" o "BúsquedaAvanzada" se realizarán en base a la carpeta abierta.

Proyectos: existe la posibilidad de combinar las carpetas y archivos en proyectos. Selecciona unacarpeta 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 >

28/10/12 Guía definitiva Sublime Text 2

4/9falasco.org/guia-definitiva-sublime-text-2

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 etiquetasOtro de los puntos fuertes de Sublime Text 2 es su built­in, un motor de auto­completado paraetiquetas HTML, CSS, ... entre otros lenguajes, que te permitirá desarrollar sitios webs máscó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, eleditor te completará y cerrará la etiqueta. Así mismo si escribes: div.content y pulsas tabulador, el editorescribirá por ti: <div class="content"></div> y lo mismo pasa con los identificadores, si escribes div#mainy 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 conAlt+. (Cmd+Alt+.)

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

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

Cambiar el skin en Sublime Text 2Por defecto nada más instalar y abrir el programa se mostrará con el skin Monokai, que tiene fondonegro con letras claras. Si quieres cambiar de skin sólo tienes que acceder a: Preferences > ColorScheme > 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 biencrear uno propio (en siguientes capítulos veremos como crear un skin personalizado)

Package ControlUno de los plug­ins fundamentales que has de instalar nada más abrir Sublime Text 2 es PackageControl.

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

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

28/10/12 Guía definitiva Sublime Text 2

5/9falasco.org/guia-definitiva-sublime-text-2

Otro plugin indispensable es SideBarEnhancements, que transforma la barra lateral (el SideBar quecomentamos 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 hasde hacer click derecho sobre un archivo y escoger la acción a aplicar.

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

Plugins de Sublime Text 2 recomendados para desarrollo web

jQuery

28/10/12 Guía definitiva Sublime Text 2

6/9falasco.org/guia-definitiva-sublime-text-2

HTML5

Linter

Prefix

LESS

Git

Cambiar la configuración general y los atajos de tecladoEn mi anterior artículo relacionado con Sublime Text 2 comentaba los atajos de teclados más utilizados ydaba la posibilidad de descargar un PDF. Eso no significa que no se puedan modificar y adaptar a tugusto. Si por ejemplo estás acostumbrado a utilizar cualquier otro editor donde para buscar en vez deCtrl+F es Ctrl+B, puedes editar cómodamente los atajos de teclado y ponerlos a tu gusto, no hay nadaque 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 elmenú superior: Preferences > Key Bindings Default o Key Bindings User.

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

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

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

28/10/12 Guía definitiva Sublime Text 2

7/9falasco.org/guia-definitiva-sublime-text-2

12Me gusta A 22 personas les gusta esto. Sé el primero de tus amigos.

Los snippets son pequeños fragmentos de códigos guardados en archivos individuales que te permitiráninsertar de forma fácil y rápida partes de código simplemente escribiendo una palabra y pulsandotabulador, 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 aabrir 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 dedesplazarte por las diferentes partes de fragmento insertado, pulsando tabulador.

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

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

TwittéaloTwittéalo

13 comments

Leave a message...

DiscussionDiscussion CommunityCommunity

• Reply •

Muy buena guía seguimos esperando los snippets, saludosAleksei Villegas • 3 months ago

1

• Reply •

Excelente artículoSelene • 2 hours ago

0

• Reply •

Excelente!!!!!!!!Luis Guillermo Trejo • 4 days ago

0

• Reply •

Muchas gracias,pero tengo una duda...¿como se puede imprimir en sublime?.Mil gracias de nuevo.

salva • 11 days ago

0

• Reply •

Muy buena aportación, te felicito y espero ansioso tu nuevo Post, que seguro ya te lo estáspicando...He empezado con este "Sublime" prog. a cambio de aparcar Dream...Fue como un "no se qué", aprimera vista...;)

Suki • 12 days ago

0

• Reply •

Enhorabuena, gran trabajo!Alejandro Sanz • 15 days ago

0

Julio • 16 days ago

33 Stars Stars

Share ›

Share ›

Share ›

Share ›

Share ›

Share ›

28/10/12 Guía definitiva Sublime Text 2

8/9falasco.org/guia-definitiva-sublime-text-2

• Reply •

Soy novel en el uso de sublime text y ya lo empiezo a amar me encanto tu guía muchas graciasJulio • 16 days ago

0

• Reply •

Me ha parecido un muy buen editor ahora que trabajo con HTML5, gracias por la guia ;)Arturo Agudelo • a month ago

0

• Reply •

Me gusto mucho la guia!!!Randy • a month ago

0

• Reply •

Gracias por la guía! todo muy claro!. Me mudé a Sublime Text 2 hace dos días y estoymaravillado...

Jhonny Gil • 3 months ago

0

• Reply •

Muy buena guía y muchas gracias.lluispeiro • 3 months ago

0

• Reply •

Muy muy interesante, siii señorita!! sobre todo poruqe se puede decir que es casi la primera guía desublime text en español explicada como dios manda!! Y mi pequeña sugerencia... si explicas como trabajaren remoto con el plugin "sftp" sería genial!! porque yo ya lo intenté utilizar pero no lo he conseguido poneren funcionamiento y todo lo que ve por internet está en inglés :(

jacobo • 3 months ago

0

• Reply •

esta muy buena tu guia ya le instale algunos plugins a mi editor y me va muy bien, solo una duda,sabes algo acerca de la opcion build systems, le e buscado y no encuentro nada que me ayude, se que conesto puedes por ejemplo compilar java y hacer correr pero no sé como configurarlo para esto.

Saludos

Gerardo • 3 months ago

0

Share ›

Share ›

Share ›

Share ›

Share ›

Share ›

Share ›

Artículos relacionados con Guía definitiva Sublime Text 2

Sublime Text 2 Cheat Sheet

28/10/12 Guía definitiva Sublime Text 2

9/9falasco.org/guia-definitiva-sublime-text-2

2012 ­ Roxana Falasco