22/10/12

Gua definitiva Sublime Text 2

Home

Sobre mi

Blog

Roxana Falasco
Recursos y tutoriales sobre desarrollo frontend HTML5
Gua definitiva SublimeSublime Text 2 Gua definitiva Text 2 Publicado el 23/07/2012 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 aos cada vez era ms difcil recomendar esta herramienta debido a sus constantes cuelgues, lentitud a la hora de cargar proyectos, refrescar el rbol de trabajo, etc... Un da, har aproximadamente un ao, 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 haba acompaado a lo largo de estos aos tanto en el trabajo como en casa. Finalmente un da en el trabajo, volva 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 haba nada de informacin en castellano y en ingls eran pocas las webs que comentasen temas de configuracin, cambiar atajos de teclado, personalizacin, etc, etc. Poco a poco fui aprendiendo donde estaban las cosas en Sublime y configurando el editor a mi gusto. Evangelic a mis compaeros de trabajo y ahora todo mi equipo a guardado en el bal de los recuerdos a Eclipse y han dado la bienvenida a Sublime Text 2, un editor ligero, rpido y "fcilmente configurable", lo digo entre comillas, porque realmente si no sabes donde estn las cosas es difcil de entender y de ah que despus de medio ao utilizando Sublime Text, an sigue sin haber una gua 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 gua definitiva de Sublime Text 2. Repartida en varios captulos intentar explicar detalladamente y paso a paso, desde la instalacin hasta la creacin de snippets, para que t tambin puedas disfrutar de las comodidades de Sublime Text 2 el mejor editor para desarrollo web que he utilizado. Comencemos! ;-)

Buscar en todo el blog

Buscar

Sgueme
Seguira@linuxera 260seguidores

Artculos
Sublime Text 2 Cheat Sheet Como crear iconos Webfont con icoMoon Gua definitiva Sublime Text 2 HTML5 SEO Sublime Text 2 Snippets

Descargar Sublime Text 2

Sublime Text 2 est disponible para Windows, OS X y Linux y lo puedes descargar de forma gratuita en su pgina oficial y utilizarlo el tiempo que desees. Si despus de leer esta gua te he convencido para utilizar este fantstico editor y quieres colaborar con sus desarrolladores, puedes adquirir una licencia por slo 59$, la cual te dar derecho a la instalacin de Sublime en mltiples ordenadores y a actualizaciones ilimitadas.

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

1/9

22/10/12

Gua definitiva Sublime Text 2

Caractersticas bsicas
Sublime Text 2 se puede personalizar completamente, dispone de multitud de plugins gratuitos que puedes descargar y utilizar. Nada ms abrir el programa vers una interfaz minimalista, en el centro se encuentra el cdigo, a la izquierda una barra lateral donde podrs ver los archivos abiertos, entre otras cosas que explicar ms adelante y a la izquierda una barra lateral llamada minimapa donde pondrs ver t cdigo, y navegar con facilidad por l, desplazndote al punto exacto donde quieres ir sin necesidad de utilizar el scroll.

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 ms adelante. Una de las opciones indispensables y la que debes aprenderte nada ms instalar Sublime Text 2 es "Goto Anything", que te permitir localizar los archivos rpidamente, prueba pulsando Ctrl+P en Windows/Linux o Cmd+P en Mac. Al empezar a escribir unos cuantos caracteres empezarn 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, obtendrs una vista previa en el editor, cuando ests seguro de que ese es el archivo que quieres abrir simplemente clicka o pulsa [Enter] sobre l. Adems Goto Anything no slo te permitir localizar archivos fcil y rpidamente sino que tambin podrs desplazarte hasta una linea al escribir :[Numero], si en lugar de los dos puntos introduces @ vers los mtodos utilizados anteriormente y con # podrs buscar en el interior del fichero. A continuacin te dejo un par de ejemplos, para que te sea ms fcil recordar lo que hemos aprendido hasta ahora de Goto Anything Ctrl+P, Cmd+P: Abrir Goto Anything

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

2/9

22/10/12

Gua 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 mtodo 'print'

Trabajar con proyectos

Para trabajar an 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 "Bsqueda Avanzada" se realizarn 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 slo has de ir a Project > Switch Project in Windows... A medida que aadas, ms carpetas o archivos nuevos al proyecto se guardarn automticamente, incluso la posicin del cursor.

Gestin de etiquetas
Otro de los puntos fuertes de Sublime Text 2 es su built-in, un motor de auto-completado para etiquetas

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

3/9

22/10/12

Gua definitiva Sublime Text 2

HTML, CSS, ... entre otros lenguajes, que te permitir desarrollar sitios webs ms cmodamente. 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 caracterstica 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.

Personalizar Sublime Text 2

Como ya has podido leer en esta gua, Sublime Text 2 es la herramienta perfecta de desarrollo, nada ms instalarla dispones de muchas ayudas a la hora de programar, auto-completado, etc, etc, pero si an as quieres personalizar detalles como colores, skins, teclas rpidas... tambin puedes hacerlo.

Cambiar el skin en Sublime Text 2

Por defecto nada ms instalar y abrir el programa se mostrar con el skin Monokai, que tiene fondo negro con letras claras. Si quieres cambiar de skin slo 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 descargrte ms esquemas de color o bien crear uno propio (en siguientes captulos veremos como crear un skin personalizado)

Package Control
Uno de los plug-ins fundamentales que has de instalar nada ms abrir Sublime Text 2 es Package Control. Package Control, tal y como su nombre indica es un gestor de paquetes que te permite instalar fcilmente cientos de plugins. A da de el repositorio dispone de ms de 500 plugins. Su instalacin es muy sencilla, simplemente has de ir a la pgina de instalacin 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 ests en Mac, si lo prefieres puedes ir directamente desde el men View > Show Console. Una vez completada la instalacin, puedes acceder al Package Control pulsando Ctrl+Shift+P o Cmd+Shift+P. Si escribes Package podrs ver todas las opciones disponibles del Package Control. Para instalar un nuevo paquete debers seleccionar "Installa Package", puede que tarde unos segundos, a continuacin 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 instalacin). Si deseas eliminar un plugin lo nico que has de hacer es seleccionar Remove package.

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

4/9

22/10/12

Gua definitiva Sublime Text 2

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 aplicacin. Su utilizacin es muy sencilla, una vez instalado slo has de hacer click derecho sobre un archivo y escoger la accin a aplicar.

Si navegas por la web de Package Control, encontrars la lista de plugins disponibles. Explicar cada uno de ellos aqu dara para crear un libro de Sublime Text 2, as que comentar algunos interesantes que yo tambin utilizo, y si lo deseas puedes dejar un comentario sugiriendo temas que te gustara que tratase en futuros artculos.

Plugins de Sublime Text 2 recomendados para desarrollo web

jQuery HTML5 Linter Prefix LESS Git

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

5/9

22/10/12

Gua definitiva Sublime Text 2

Cambiar la configuracin general y los atajos de teclado

En mi anterior artculo relacionado con Sublime Text 2 comentaba los atajos de teclados ms 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 ests acostumbrado a utilizar cualquier otro editor donde para buscar en vez de Ctrl+F es Ctrl+B, puedes editar cmodamente 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 aadir 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, ms que nada porque si escribes el del Usuario y luego no te convence siempre puedes volver al de por Defecto.

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

Snippets
Llegamos a la parte ms interesante de Sublime Text 2 los Snippets. Los snippets son pequeos fragmentos de cdigos guardados en archivos individuales que te permitirn insertar de forma fcil y rpida partes de cdigo simplemente escribiendo una palabra y pulsando tabulador, o bien asignndole una combinacin 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 adems te permiten definir la posicin del cursor cuando se insertan, adems 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 lmite es tu imaginacin.

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

6/9

22/10/12

Gua definitiva Sublime Text 2

En siguientes artculos hablar sobre la creacin de snippets en Sublime Text 2, aunque todo depende de la aceptacin que haya tenido esta gua. Cualquier sugerencia, comentario, ... ser bienvenida :)

Twittalo

Me gusta

A 20 personas les gusta esto. S el primero de tus amigos.

12

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

7/9

22/10/12

Gua definitiva Sublime Text 2

3Stars

11comments
Leaveamessage...

Discussion

Community

AlekseiVillegas 3monthsago

Muybuenaguaseguimosesperandolossnippets,saludos
1

Reply

Share

salva 4daysago

Muchasgracias,perotengounaduda...comosepuedeimprimirensublime?. Milgraciasdenuevo.
0

Reply

Share

Suki 6daysago

Muybuenaaportacin,tefelicitoyesperoansiosotunuevoPost,queseguroyatelo estspicando...Heempezadoconeste"Sublime"prog.acambiodeaparcarDream...Fuecomo un"nosequ",aprimeravista...)

0

Reply

Share

AlejandroSanz 8daysago

Enhorabuena,grantrabajo!
0

Reply

Share

Julio 10daysago

Soynovelenelusodesublimetextyyaloempiezoaamarmeencantotuguamuchas gracias
0

Reply

Share

ArturoAgudelo amonthago

MehaparecidounmuybueneditorahoraquetrabajoconHTML5,graciasporlaguia)
0

Reply

Share

Randy amonthago

Megustomucholaguia!!!
0

Reply

Share

JhonnyGil 2monthsago

Graciasporlagua!todomuyclaro!.MemudaSublimeText2hacedosdasyestoy maravillado...
0

Reply

Share

lluispeiro 3monthsago

Muybuenaguaymuchasgracias.
0

Reply

Share

jacobo 3monthsago

Muymuyinteresante,siiiseorita!!sobretodoporuqesepuededecirqueescasila primeraguadesublimetextenespaolexplicadacomodiosmanda!!Ymipequea sugerencia...siexplicascomotrabajarenremotoconelplugin"sftp"seragenial!!porqueyoya lointentutilizarperonoloheconseguidoponerenfuncionamientoytodoloqueveporinternet esteningls:(

0

Reply

Share

Gerardo 3monthsago

estamuybuenatuguiayaleinstalealgunospluginsamieditorymevamuybien,solo unaduda,sabesalgoacercadelaopcionbuildsystems,leebuscadoynoencuentronadaque meayude,sequeconestopuedesporejemplocompilarjavayhacercorrerperonoscomo configurarloparaesto. Saludos

0

Reply

Share

Artculos relacionados con Gua definitiva Sublime Text 2

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

8/9

22/10/12

Gua definitiva Sublime Text 2

Sublime Text 2 Cheat Sheet

2012 - Roxana Falasco

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

9/9