Guía definitiva Sublime Text 2

28/10/12

Guía definitiva Sublime Text 2

Home

Sobre mi

Blog

Roxana Falasco Recursos y tutoriales sobre desarrollo frontend HTML5 Guía definitiva Sublime Text 2 Guía definitiva Sublime Text 2

Buscar en todo el blog

Publicado el 23/07/2012

Buscar

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 profesionalmente al desarrollo web

Sígueme Seguir a @linuxera

260 seguidores

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 lentitud a la hora de cargar proyectos, refrescar el árbol de trabajo,

Artículos Artículo s Sublime Text 2 Cheat Sheet

etc...

Como crear iconos Webfont con icoMoon

Un día, hará aproximadamente un año, escuchando un


webcast sobre desarrollo web oí que recomend aban utilizar un editor llamado "Sublime Text", al principio pensé ¡no puede ser tan bueno como mi Eclipse!, el cual me

HTML5 SEO Sublime Text 2 Snippets

había acompañado acompañ ado a lo largo de esto s 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 re fresh de un p royecto con con tropecientos mil archivos... archivos. .. recordé por un momento aquella herramienta de la que todos hablaban llamada... Sublime Text. Al llegar a casa, me puse mano s 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. 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! ;-)

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

1/9

28/10/12


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.

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


2/9

28/10/12


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 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 >


3/9

28/10/12

Guía 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 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:
y lo mismo pasa con los identificadores, si escribes div#main y pulsas tabulador el editor escribirá por ti:
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 margintop, pt y tabulador creará padding-top, etc.

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.


4/9

28/10/12


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.

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


5/9

28/10/12

Guía definitiva Sublime Text 2 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.

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.

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


6/9

28/10/12

Guía definitiva Sublime Text 2 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.

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 :)

Twittéalo

Me gusta

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

13 comments

12

3 Stars

Leave a message...

Discussion

Community

Aleksei Villegas

3 months ago

•

Muy buena guía seguimos esperando los snippets, saludos •

1

Selene

•

Reply

•

Share ›

2 hours ago

Excelente artículo •

0

Reply

•

Luis Guillermo Trejo

Share ›

•

4 days ago

Excelente!!!!!!!! •

0

salva

•

Reply

•

Share ›

11 days ago

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

0

Suki

•

Reply

•

Share ›

12 days ago

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

•

Reply

Alejandro Sanz

•

•

Share ›

15 days ago

Enhorabuena, gran trabajo! 0

•

Reply

•

Share ›


7/9

28/10/12

Guía definitiva Sublime Text 2 •

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

0

Reply

Arturo Agudelo

•

•

Share ›

a month ago

Me ha parecido un muy buen editor ahora que trabajo con HTML5, gracias por la guia ;) •

0

Randy

•

Reply

•

Share ›

a month ago

Me gusto mucho la guia!!! •

0

Jhonny Gil

Reply

•

•

Share ›

3 months ago

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

•

Reply

lluispeiro

•

3 months ago

•

Share ›

Muy buena guía y muchas gracias. •

0

jacobo

•

Reply

•

Share ›

3 months ago

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

0

Gerardo

Reply

•

Share ›

3 months ago

•

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 con esto puedes por ejemplo compilar java y hacer correr pero no sé como configurarlo para esto. Saludos 0

•

Reply

•

Share ›

Artículos relacionados con


Sublime Text 2 Cheat Sheet


8/9

28/10/12


2012 - Roxana Falasco


9/9

Guía definitiva Sublime Text 2

Recommend Documents