Antes de nada, recomiendo instalar el paquete EMMET. Para mi es imprescindible y nos hará falta para usar algunas de las combinaciones de teclas que veremos.

Por si acaso, te explico como instalar o desinstalar paquetes en Sublime Text:

Instalar paquete: Pulsar Ctrl + Shift + P —> Se abre el campo de texto del ‘Package Control’. Escribiremos ‘Install Package’. A continuación escribimos una palabra clave (ej: emmet). Se nos sugieren todos los plugins cuyo nombre coincidan con la palabra clave. Pulsamos sobre el que nos interesa y se instala automáticamente.

st3-combinacion_teclas1

Desinstalar paquete: pulsamos Ctrl + Shift + P —> En el campo de texto escribimos ‘Remove Package’ . Al pulsar Intro se nos muestran todos los paquetes instalados. Para desinstalar uno, pulsamos sobre el mismo y listo.

st3-combinacion_teclas2

Vamos ya con las 20 mejores combinaciones de teclas para Sublime Text 3:

  1. Generar estructura básica de un documento HTML5: En un nuevo archivo vacío, seleccionamos el tipo de archivo (HTML) en el desplegable de la esquina inferior derecha de Sublime Text.
    st3-combinacion_teclas3
    A continuación escribimos en el documento vacío un signo de exclamación ( ! ) y pulsamos TAB. Lo mismo se puede conseguir escribiendo (sin comillas) ‘html:5‘ y pulsando TAB. En ambos casos obtenemos una estructura básica parecida a esta:
  2. Generar texto Lorem Ipsum: Escribir ‘Lorem‘ y pulsar TAB. Se puede hacer dentro de etiquetas <p> o donde te convenga.
  3. Generar etiquetas repetidas: Esta funcionalidad permite crear estructuras repetidas en HTML mediante abreviaciones. Las posibilidades son inmensas, así que en este caso te muestro un ejemplo sencillo como punto de partida y te invito a profundizar más por tu cuenta o quizá leer algún futuro post en esta misma web 🙂 . Vamos al ejemplo:
    Escribimos (sin comillas) ‘p*2>Lorem‘ y pulsamos TAB. Se nos generará el siguiente código HTML:st3-combinacion_teclas4
  4. Duplicar línea actual justo debajo: CMD + Shift + D.
  5. Desplazar la línea actual hacia arriba o abajo:  CMD + Ctrl + cursor arriba o cursor abajo.

  6. Cerrar etiqueta actual: Escribir la etiqueta de apertura y justo después pulsar CMD+ALT+. (punto)
    También puede hacerse escribiendo la etiqueta sin corchetes angulares ( < > ) y pulsar TAB.

  7. Mostrar / ocultar barra lateral: CMD + K + B.

  8. Cursores múltiples (para editar varias líneas  a la vez): Presionar CMD e ir haciendo clic en el resto de líneas que quieras seleccionar, ya sea al inicio, medio, fin…

  9. Cursores múltiples (otra opción): Hacer clic en el punto de inicio y con ALT pulsado arrastrar hasta donde queramos que acabe la selección.

  10. Seleccionar una palabra: Situamos el cursor justo delante o detrás de la misma (sin espacios) y pulsamos CMD + D.

  11. Seleccionar toda la línea: Situamos el cursor dentro de la misma (no hace falta que sea al principio o al final) y pulsamos CMD + L.

  12. Ordenar alfabéticamente propiedades CSS: Seleccionar todas las propiedades incluidas entre los corchetes y pulsar F5.

  13. Buscar / Buscar y reemplazar: pulsar CMD + Shift + F. Una vez abierta la barra de búsqueda podemos insertar en  el campo ‘Find’ una palabra concreta situando el cursor sobre de la misma y pulsando CMD + E.
    st3-combinacion_teclas7

  14. Buscar selectores CSS: CMD + R y escribir el nombre de la clase o ID correspondiente.
    st3-combinacion_teclas5

  15. Pegar respetando sangrías: Copiamos normalmente. Al pegar usamos CMD + Shift + V.
  16. Seleccionar todos los hijos de un elemento: Colocar el cursor en uno de los hijos y pulsar CMD + SHIFT + J.

  17. Moverse por las pestañas (TABS) abiertas: CMD + ALT + cursor izquierda va a la pestaña anterior. CMD + ALT + cursor derecha avanza a la siguiente pestaña abierta.

  18. Añadir tamaño de imagen: Dentro de una etiqueta <img> pulsamos Ctrl+Shift+I y nos escribe el ancho y alto de la imagen. Es muy útil también si queremos saber las dimensiones de una imagen cargada externamente, sin tener que ir a mostrar sus propiedades desde el inspector de elementos o similar.
    st3-combinacion_teclas6

  19. Operaciones aritméticas básicas: Escribimos la operación (ej: 25*5) y pulsamos Shift + CMD + Y. Puede servirnos para calcular tamaños de DIVs con sus padding, etc. ¡Tenemos una calculadora sin abrir la calculadora!

  20. Ir a una línea concreta de un archivo: Pulsamos CMD + P. Escribimos dos puntos ( : ) y a continuación el número de la línea. Si queremos a ir a una línea de un archivo distinto al actual, escribimos el nombre de archivo, un espacio y los dos puntos ( : ) junto al número de línea que buscamos (ej: estilos.css :121).

*CMD (Mac) = Control (Windows, Linux)

 

 

Share:Tweet about this on TwitterShare on FacebookShare on Google+