[Atajos de VSCode] Resumen de teclas útiles para aumentar drásticamente tu eficiencia (para Windows/Mac)

¡Hola! Hace solo unos meses, no tenía ningún conocimiento de programación, pero con la ayuda de la IA, logré crear dos sitios web por mi cuenta.

A través de esta experiencia, me di cuenta de la gran cantidad de técnicas que desearía haber conocido antes. Entre ellas, los "atajos de teclado" fueron los que más impactaron directamente mi eficiencia en el trabajo.

Al principio, los evitaba pensando: "¡Son demasiados para recordar!". Sin embargo, las teclas realmente útiles no son tantas. En este artículo, compartiré los atajos de teclado seleccionados que genuinamente siento que "ya no puedo programar sin ellos" de mi experiencia en el desarrollo de sitios web, junto con mis historias personales.

En lugar de una simple lista de atajos, explicaré "por qué son convenientes" y "en qué situaciones usarlos", como si me estuviera enseñando a mí mismo cuando era un principiante. ¡Ahora, mejoremos drásticamente nuestra velocidad de trabajo juntos!

Introducción: Para aquellos que tienen dificultades para recordar atajos

Cuando escuchas "lista de atajos de teclado", ¿te imaginas una tabla llena de letras y símbolos y sientes ganas de cerrar la página en silencio? Yo también era así.

Solo hay dos secretos sobre cómo llegué a dominar los atajos:

1. No intentes aprender todo de una vez. Primero, intenta usar conscientemente solo uno de los "atajos de nivel dios" presentados en este artículo, aunque sea solo por un día.
2. Piensa siempre: "¿No hay una forma más fácil de hacer esto?". Luego, haz esa pregunta a una IA (como ChatGPT) en términos específicos, como, "¿Hay un atajo en VSCode para cambiar todas las instancias de la misma palabra a la vez?".

Este artículo selecciona cuidadosamente solo los atajos realmente útiles que aprendí con la ayuda de la IA. Ahora, demos el primer paso.

¡Los esenciales absolutos! Los 5 mejores "atajos de nivel dios" para potenciar tu programación

Entre los numerosos atajos, he seleccionado cinco "atajos de nivel dios" que uso a diario, no, docenas de veces por hora. Solo aprender estos transformará tu experiencia de programación.

N.º 1: ¡Selecciona y corrige la misma palabra en un instante! Edición multi-cursor

Windows: Ctrl + D
Mac: Cmd + D

Este es el primer atajo que aprendí y que me dejó alucinado. Te permite seleccionar múltiples instancias de la misma palabra o código en una página y editarlas todas a la vez.

Mi experiencia: Supongamos que estás creando una lista de productos en HTML y quieres cambiar un nombre de clase de <div class="card"> a <div class="product-card">. Solía usar la función de buscar y reemplazar una por una. Pero después de aprender este atajo, simplemente hago doble clic en "card" para seleccionarlo, luego presiono Ctrl + D (o Cmd + D en Mac) tantas veces como sea necesario. Los cursores se multiplican, y no puedo olvidar la conmoción de poder corregir todos los nombres de clase con una sola sesión de escritura.

Consejo profesional: Hacer doble clic en la palabra que quieres corregir antes de usar este atajo hace que la selección sea más precisa y rápida.

N.º 2: ¡No más copiar y pegar! Mueve líneas enteras

Windows: Alt + ↑ / ↓
Mac: Option + ↑ / ↓

Puedes mover la línea actual o varias líneas seleccionadas hacia arriba o hacia abajo. No más pasos tediosos de seleccionar una línea → Ctrl + X → hacer clic en el destino → Ctrl + V.

Mi experiencia: Este atajo es increíblemente poderoso al reordenar elementos de lista <li> en HTML u organizar propiedades de CSS. Elimina por completo los problemas de sangría y las eliminaciones accidentales que a menudo ocurren al cortar y pegar código. Es realmente una "varita mágica" que te permite cambiar la estructura de tu código de forma segura e intuitiva.

N.º 3: Duplica líneas en un instante

Windows: Shift + Alt + ↑ / ↓
Mac: Shift + Option + ↑ / ↓

Esto duplica la línea actual por encima o por debajo. Reduce drásticamente tu tiempo de trabajo cuando necesitas escribir código similar repetidamente.

Mi experiencia: Por ejemplo, cuando quieres producir en masa elementos HTML con la misma estructura, como menús de navegación o elementos de lista. Solía copiar una línea, presionar enter, pegar y repetir. Con este atajo, solo presionar repetidamente Shift + Alt + ↓ completa la cantidad necesaria de elementos de lista en poco tiempo. Combinado con "Mover línea" del n.º 2, tu velocidad de programación se multiplicará varias veces.

N.º 4: ¡Abre archivos desde cualquier lugar! Explorador de archivos

Windows: Ctrl + P
Mac: Cmd + P

Al presionar este atajo, aparece un cuadro de búsqueda en la parte superior de la pantalla, lo que te permite abrir instantáneamente cualquier archivo de tu proyecto escribiendo su nombre. Ya no necesitas buscar archivos en el explorador del lado izquierdo.

Mi experiencia: A medida que te acostumbras al desarrollo de sitios, la cantidad de archivos aumenta a docenas o incluso cientos. Entonces se convierte en una molestia solo encontrar un archivo, preguntándote: "¿En qué carpeta puse ese archivo CSS...?". Desde que aprendí Ctrl + P, el tiempo que paso buscando archivos se ha reducido a casi cero. Escribir style sugiere style.css. Realmente permite programar sin interrumpir tu hilo de pensamiento.

N.º 5: Todo comienza aquí. La paleta de comandos

Windows: Ctrl + Shift + P
Mac: Cmd + Shift + P

Similar al n.º 4, pero este te permite buscar y ejecutar no solo archivos, sino "todas las funciones (comandos)" de VSCode. Incluso si olvidas un atajo de teclado, puedes simplemente escribir el nombre de la operación que deseas realizar (por ejemplo, format o theme), y VSCode invocará esa función por ti.

Mi experiencia: Cuando pensé: "Espera, ¿cuál era el atajo para formatear el código de forma ordenada?", presioné Ctrl + Shift + P, escribí format y encontré el comando "Formatear documento". Mientras recuerdes este, puedes arreglártelas incluso si olvidas otros atajos; es realmente el "último recurso". Cuando instalo una nueva extensión, este es el primer lugar al que voy para ver qué nuevas funciones se han agregado.

[Avanzado] Creando tu entorno definitivo: Cambiando las asignaciones de teclas

Lo bueno de VSCode es que puedes personalizar los atajos de teclado a tu gusto. Si sientes que "este atajo es útil, pero las teclas son difíciles de presionar", cambiémoslo.

Aquí, te mostraré cómo abrir el archivo de configuración, keybindings.json, y compartiré algunos ejemplos de personalización que encontré útiles. Con solo copiar y pegar, puedes hacer que tu VSCode sea aún más fácil de usar.

1. Abrir keybindings.json

1. Primero, abre la Paleta de comandos. (Windows: Ctrl + Shift + P / Mac: Cmd + Shift + P)
2. En el cuadro de búsqueda, escribe keybindings.
3. De las sugerencias, selecciona "Preferencias: Abrir atajos de teclado (JSON)" y presiona Enter.

Esto abrirá un archivo de configuración llamado keybindings.json. Al principio podría decir solo []. Escribiremos nuestra configuración dentro de estos corchetes.

2. ¡Solo copia y pega! Configuraciones de personalización recomendadas

A continuación se muestran mis personalizaciones recomendadas. Intenta copiar todo este bloque de código y pegarlo dentro de los [] de tu keybindings.json.

[
    // {
    //   "key": "tecla original",
    //   "command": "comando a ejecutar",
    //   "when": "habilitar solo bajo una condición específica"
    // },
    
    // Ejemplo 1: Hacer que el atajo para abrir la terminal sea más fácil de presionar
    // El `Ctrl + `` predeterminado es difícil de presionar, así que vamos a cambiarlo
    {
        "key": "ctrl+shift+t", // Windows
        "command": "workbench.action.terminal.toggleTerminal"
    },
    {
        "key": "cmd+shift+t", // Mac
        "command": "workbench.action.terminal.toggleTerminal"
    },

    // Ejemplo 2: Hacer que cerrar el editor (pestaña) sea más fácil
    // Sobrescribir el `Ctrl+W` predeterminado
    {
        "key": "ctrl+q", // Windows
        "command": "workbench.action.closeActiveEditor"
    },
    {
        "key": "cmd+w", // El predeterminado para Mac es fácil de presionar, así que está bien como está
        "command": "workbench.action.closeActiveEditor"
    }
]

Explicación:

• El Ejemplo 1 es un atajo para abrir la "Terminal" para ejecutar comandos dentro de VSCode. Como la tecla predeterminada está en una posición un poco incómoda, la estamos cambiando a una tecla más intuitiva.
• El Ejemplo 2 es un atajo para cerrar el archivo abierto actualmente. Asignarlo a una tecla similar a cerrar una pestaña del navegador hace que sea más fácil para tus dedos recordarlo.

De esta manera, puedes especificar tu combinación de teclas preferida en la parte key y la función que deseas asignar en la parte command. Puedes averiguar qué commands están disponibles en la documentación oficial de asignación de teclas o buscando en la Paleta de comandos. Te recomiendo encarecidamente que construyas tu propio entorno de atajos definitivo.

Nota: keybindings.json es un archivo en formato JSON. Se requiere una coma , después de cada } excepto para el último elemento, así que ten cuidado con los errores de sintaxis al editar. Si ocurre un error, VSCode te lo señalará, así que sigue las instrucciones para corregirlo.

Conclusión: Un nuevo mundo de programación abierto por los atajos

Esta vez, he presentado los atajos de teclado de VSCode realmente útiles que he estado usando desde que era un programador principiante. Repasemos los 5 mejores atajos de nivel dios una vez más.

• Seleccionar y corregir la misma palabra: Ctrl + D / Cmd + D
• Mover línea: Alt + ↑ / ↓ / Option + ↑ / ↓
• Duplicar línea: Shift + Alt + ↑ / ↓ / Shift + Option + ↑ / ↓
• Abrir archivo: Ctrl + P / Cmd + P
• Abrir Paleta de comandos: Ctrl + Shift + P / Cmd + Shift + P

No necesitas aprenderlos todos de una vez. Comienza con el n.º 1, Ctrl + D (Cmd + D), e intenta usarlo conscientemente en tu programación de hoy. Cuando tus dedos recuerden el movimiento, tu velocidad de trabajo sin duda habrá mejorado.

Los atajos de teclado son herramientas poderosas para traducir tus ideas directamente en código sin detener tu hilo de pensamiento. Me alegraría enormemente si este artículo sirve como el primer paso en tu cómoda vida de programación.