Trucos y configuración de Sublime Text para front-end

Este post lo escribí para “Una docena de…”, un blog genial, hecho por gente aún más genial.

A pesar de que ya está disponible Sublime Text 3, en versión beta, yo voy a hablaros de la 2, porque supongo que las funcionalidades se mantendrán, y principalmente, porque no lo he usado, qué pasa..!?

Mi intención es que éste, sea el primero de dos artículos entorno a Sublime Text, que considero complementarios para sacar todo el provecho a este magnífico editor de código. En el primero, os voy a contar herramientas con las que cuenta Sublime Text, por si sólo, y alguna configuración personal, que me parece muy útil a la hora de trabajar de manera rápida y eficiente. En el segundo, os haré una relación de los plugins que considero indispensables.

Debo puntualizar que la configuración y plugins que voy a mostraros, están enfocados principalmente al perfil de Desarrollador Front-End, (los que hacemos páginas web, pa las madres…), porque es a lo que me dedico y evidentemente es dónde tengo criterio suficiente para opinar al respecto. Además procuraré contaros cosas que realmente utilizo, hay mil artículos donde describen todo lo que hace Sublime, pero no he conseguido encontrar uno que reúna lo que a mí me resulta más útil, así es que os transmito el conjunto de lo aprendido en diversas lecturas.

Otra puntualización, cuando diga CMD, los de Windows leeréis CTRL, si no especifico otra cosa… ¿Ha quedado un poco chulito? Bien, es lo que pretendía. Vamos a ello entonces, veamos qué cositas ofrece Sublime, recordad, sin plugins:

1. Múltiples Cursores

Sin lugar a dudas es lo que más utilizo, se trata de que podemos trabajar con múltiples cursores, para seleccionar o escribir, en varios sitios a la vez.

Lo conseguimos, haciendo click con en ratón donde queremos un cursor, y manteniendo la tecla CMD apretada. Con cada click, ¡un cursor nuevo!

En la imagen podéis ver cómo he escrito la etiqueta

al principio de varios párrafos a la vez, y podéis distinguir los cursores justo después de las etiquetas.

2. Multi-Selección, Multi-Copy, Multi-Paste

Ampliamos un poco más, a partir del multi-cursor.

Puedo seleccionar varios textos al mismo tiempo, simplemente manteniendo pulsada la tecla CMD y una vez seleccionado todo, puedo cortarlo, borrarlo…lo habitual.

Pero aquí me toca contaros uno de mis grandes descubrimientos, os lo diré en plan teorema:

“Si el número de elementos cortados/copiados es igual al número de cursores que habilito para pegarlos, CADA selección se pegará ordenadamente en UN cursor.”

Ojo! si no coinciden en número, se copiará toooodo, en cada cursor.

Os habéis quedao muertos eh?… (explicación con dibujitos para los de la LOGSE:

3. Multi-Layouts

Podemos dividir la pantalla de Sublime como más nos guste para trabajar, yo personalmente suelo tener a la izquierda el archivo js o css, y a la derecha tengo visible el html, para localizar selectores y ver los nodos.

Lo hacemos desde el menú : VIEW/LAYOUT -> y elegimos la opción, o bien con las combinaciones de teclas CMD+ALT+1, 2, 3, …con las divisiones que queramos.

Una observación, podéis pasar las pestañas de una a otra ventana, simplemente arrastrando.

4. Visualizar un archivo sin abrirlo

Si pinchas en un archivo del explorador de carpetas de Sublime, te lo muestra en la pantalla sin necesidad de abrirlo, os parecerá una pijada pero a mí me parece muy práctico.

Otra manera de visualizar archivos sin abrirlos, es utilizar la potente herramienta “Go to Anything”, con ella, podemos buscar cualquier archivo dentro del proyecto y previsualizarlo, para verificar si es el que buscamos.

CMD+P -> y empezamos a escribir el nombre del archivo.

Nos abre un desplegable con los posibles archivos, si me desplazo CON LAS FLECHAS DEL TECLADO a uno de ellos, lo previsualizo, y si lo pincho, me lo abre.

5. Save on Focus Lost

Para los de la LOGSE, Autoguardado al perder el foco. Lo que hace es guardar automáticamente el archivo, cuando pinchamos en cualquier otro sitio que no sea el propio archivo.

Con esto, por ejemplo, nos ahorramos el paso de guardar, para ver los cambios en el navegador, pero también sabemos que aunque se nos cierre el ordenador de manera inesperada, o se cuelgue (eso va para los de Windows más bien), siempre tenemos guardada la última versión.

Para habilitar esa propiedad, tenemos que meternos en las tripas de Sublime.
Habréis leído en mil sitios que Sublime es totalmente personalizable, y es cierto, mediante “SETTINGS-USER”, podemos hacer y cambiar lo que nos venga en gana, como ejemplo, la propiedad que vamos a activar.

Vamos a PREFERENCES->SETTINGS USER, y si no habéis configurado nada, estará vacío, tenéis que añadir la siguiente línea:

Importante: NUNCA cambies las propiedades “Settings-Default”, si quieres cambiar alguna propiedad, la copias y la pegas en “Settings-User” modificada, así no te cargarás nada que luego no sepas arreglar.

Y por cierto, altamente recomendable darse una vuelta por “Settings-Default”, para que veáis la cantidad de cosas que podéis personalizar.

6. Resaltar las pestañas modificadas

Lo que vemos es que los archivos modificados y NO guardados, aparecen con el nombre en la pestaña, resaltado en color naranja.

Imprescindible para identificar el archivo en el que estas trabajando y los que has modificado.

Vamos de nuevo a Settings User y añadimos una nueva línea:

7. Reindent

Teníamos nuestro código tan colocadito, tabulado como queríamos, y de repente el cliente cabrón nos pide que metamos no se qué, que quitemos no se cúal, y por supuesto, para ayer.. cuando terminamos, tenemos el código como el rosario de la Aurora… que ya no se sabe quién está dentro de quién (salidos, relajaos..)

No pasa nada amiguitos, papá Sublime nos ayuda, y lo coloca todo de nuevo;

SELECCIONAMOS EL TEXTO-> EDIT-> LINE-> REINDENT

He de decir que no es perfecto, pero que le falta poco, alguna línea os puede quedar descolocada, pero nada comparado con ir una a una.

8. Modificar atajos de Teclado

Otra de las ventajas de Sublime, es que podemos personalizar los atajos de teclado como queramos, ya sabemos que cada desarrollador es un mundo, y que lo que yo uso un montón, tú no lo utilizas nunca, así es que el 99% de las combinaciones de teclas nos sobran, y echamos de menos una que querríamos y no existe, ¡¡pues la hacemos nosotros!!

Concretamente yo me hice una para la utilidad del punto anterior, me parecía muy útil y no existía, os la pongo como ejemplo.

Vamos al menú PREFERENCES-> KEY BINDINGS –>USER

Como antes, si no habéis cambiado nada, estará vacío, para habilitar la opción “Reindent” desde el teclado, añadimos esta línea:

En mi caso le puse el atajo CMD+SHIFT+R, porque ví en los “Key Bindings–Default”, que no lo usaba ningún comando, tenéis que echar un vistazo antes de asignar la combinación de teclas, porque si sobrescribís alguno, perderéis funcionalidades.

9. Ocultar Líneas

Cuando trabajamos con archivos grandes, se hace muy pesado ir de un lado a otro teniendo que pasar el archivo entero, para evitar eso, podemos “recoger” unas cuantas líneas y que se oculten, (como cuando desplegamos o cerramos una carpeta en el explorador de un ordenador).

Hay dos formas de hacerlo:

Por defecto, cada bloque de código que Sublime reconoce como “independiente”, (p.e. o una función en js), nos permite ocultarlo entero, nos pondremos al lado del número de línea, y veremos una flecha en la que, al pinchar, oculta o despliega el bloque.

En la foto, vemos esas flechas en la etiqueta <body> y en los <ul>:

Pero si lo que queremos es ocultar un gran bloque, que no se corresponde con unidades de código, lo podemos hacer también, en este caso lo seleccionamos y vamos a:
EDIT->CODE FOLDING->FOLD.
Luego para desplegarlos, bien hacemos doble click en la señal que nos aparece al recoger, o bien lo seleccionamos y vamos a:
EDIT->CODE FOLDING->UNFOLD.

10. Buscar y Reemplazar en archivos del proyecto

Hace poco me encontraba haciendo un curso para una escuela de formación, 17 lecciones y 84 apartados, y cuando el proyecto se termina, me dice el querido cliente, que hay que cambiar una flecha hecha con css, por una imagen…¿pensé en suicidarme? No, pensé en arrancarle las 20 uñas poco a poco y echarle sal y limón en las heridas..

Menos mal, que papá Sublime de nuevo, acudió en mi ayuda, hay una función MARAVILLOSA, para sustituir algo en TODOS los archivos del proyecto que lo contengan, pero no solo eso, sino que puedes seleccionar en cuales lo quieres cambiar y en cuales no, es decir, no tiene por qué cambiarse en TODOS, te muestra las coincidencias y tú decides.
Vamos al menú FIND->FIND IN FILES -> y os lo enseño en el editor.

11. Cerrar varias pestañas a la vez

Y después de sustituir las flechitas de los webos, me encontré con las 84 pestañas abiertas, más las que tenía en desarrollo, no quería cerrar todas, porque estaba modificando archivos, pero de una en una tampoco XD!!

Pues hasta para esta pijada, Sublime nos da opciones, me pongo en una pestaña y doy al botón derecho:
CLOSE TABS TO THE RIGHT: Cierra las que están a la derecha de la que he pinchado, de modo que las que están a la izquierda NO SE CIERRAN, una gran opción para cerrar de golpe muchos archivos, pero no TODOS.
CLOSE OTHERS: Cierra todas menos la que he pinchado. Evidente.

12. Snippets

Dejo para el final, lo que considero más complicado, pero que no tiene misterio cuando haces dos, además, los snippets son la madre del cordero de las funcionalidades de Sublime y todos los plugins.

Para los que no sepan qué son, los snippets son trozos de código predefinidos, a los que asignamos una combinación de teclas para que aparezcan, y que mediante campos, vamos rellenando para darles funcionalidad.

Hay mil ejemplos y tutos para que aprendáis a hacer snippets, pero os doy unas nociones básicas y os enseño el que más utilizo yo, el snippet Alert(‘hola’);

Útil eh? Jiji.. Pues ahora os lo enseño, antes las reglas básicas para hacer un snippet:

Guardarlo con extensión .sublime-snippet
Tu snippet es todo lo que está dentro de <![CDATA[ AQUÍ TU CÓDIGO ]]>
Para escribir los distintos parámetros configurables, pondrás:
${1: VALOR POR DEFECTO QUE VA A APARECER }
${2: VALOR POR DEFECTO QUE VA A APARECER }...

Esto hace que al ejecutar el snippet, mediante la tecla Tab, te moverás por estos campos, para meter los datos concretos que necesites.

En mi ejemplo alert(‘hola’), el cursor se pone dentro del “hola” por si quiero poner otra cosa, por ejemplo, “soy IE6 y doy mucho asco”.

Vemos el ejemplo:

Y hasta aquí, la clase de hoy, acabo con la sensación contradictoria de que ha sido un post larguísimo, y que a la vez, me dejo mil cosas interesantes que querría contaros.

Si no me tiráis muchos tomates, escribiré el segundo relativo a Plugins para Sublime Text, y por supuesto, si os quedan dudas, estoy a vuestra entera disposición. Además molaría que vosotros me contaseis vuestros trucos de Sublime.

Me voy a tomar una birra a vuestra salud, que me la he ganado.