DEV Community 👩‍💻👨‍💻

Cover image for VSCode - Crear Archivos y Directorios sin usar el ratón
Camilo Martinez for equimancho

Posted on • Updated on

VSCode - Crear Archivos y Directorios sin usar el ratón

Idiomas: [🇺🇸] English - [🇪🇸] Español


¡Mira má, sin manos ratón!

Si estás intentando reducir la interacción con el ratón durante el desarrollo para aumentar la productividad, estás en el lugar correcto.

Hace un tiempo cuando trabajaba haciendo reportes y macros en Excel me convertí en una especie de maniático por los atajos de teclado porque prácticamente las fechas límite que me daba mi jefe era: "Necesito ese reporte para ayer".

Cuando alguien me pedía ayuda para aprender Excel orientado a negocios, la primera lección que les daba era desconectar el mouse. Obviamente al principio les daba muy duro, pero era necesario si en realidad querían aprender a moverse rápido.


⚠️ Yo uso VSCode en inglés y la distribución de teclado en-US, algo que les recomiendo hacer. Los atajos de este artículo están diseñados para ese idioma, pero fácilmente los puedes acomodar al lenguaje que uses.


En VSCode la opción por defecto para crear archivos y directorios requiere un montón de interacción con el ratón, y yo sinceramente lo odio. Así que te voy a compartir una forma que encontré de hacerlo a toda velocidad, obviamente, sin usar el ratón.

Aprender

Primero que todo necesitamos aprender este útil atajo. Se usa para intercambiar el foco entre la ventana de código y el explorador de archivos.

OS Atajo
mac Command + Shift + E
win/linux Ctrl + Shift + E

Adicionando esta configuración puedes hacer que automáticamente el explorador de archivos seleccione en el árbol el archivo en el que estás trabajando.

{
    "explorer.autoReveal": true
}
Enter fullscreen mode Exit fullscreen mode
settings.json

auto-reveal

A mi me gusta esta opción porque así no tengo la necesidad de estar usando tanto las teclas de navegación dentro del explorador de archivos. Algunas veces es bueno, otras no tanto, así que lo mejor es que lo pruebes para saber si te gusta o no.

Crear

El próximo paso es adicionar mis atajos de teclado secretos a la configuración.

[
    {
        "key": "ctrl+n",
        "command": "explorer.newFile",
        "when": "explorerViewletFocus"
    },
    {
        "key": "ctrl+shift+n",
        "command": "explorer.newFolder",
        "when": "explorerViewletFocus"
    }
]
Enter fullscreen mode Exit fullscreen mode

keyboard-config

En Windows y Linux, adicionalmente necesitas esta configuración para desactivar la creación de una nueva ventana option when it's focused on file explorer.

[
    {
        "key": "ctrl+shift+n",
        "command": "workbench.action.newWindow",
        "when": "!explorerViewletFocus"
    }
]
Enter fullscreen mode Exit fullscreen mode

Usar

Eso fue todo. Ahora desconecta tu ratón y disfruta!

demo


Alternativa

También amo la terminal. Si aún no usas ZSH, te recomiendo que le des una oportunidad y creeme nunca más vas a querer regresar.

Este artículo está en inglés (espero traducirlo pronto) y dirigido a usuario de macOS, pero ZSH también se puede usar en Linux y ahora en Windows a través de WSL.

En ZSH tenemos dos comando mágicos:

  • take crea un directorio y se cambia de ruta automáticamente. En vez de correr los comandos mkdir y luego cd.
  • touch crea un archivo o múltiples archivos al tiempo.

El truco para crear un componente en una sola línea es:

take Name && touch name{.css,.js,.test.js} 
Enter fullscreen mode Exit fullscreen mode

Explicación:

  • take Name este comando crea un directorio llamando Name y cambia la ruta automáticamente.
  • Luego dentro de ese directorio el comando touch name{.css,.js,.test.js} usa el mismo prefijo name y crea 3 archivos name.css, name.js y name.test.js con los valores indicados entre las llaves.

command-line


That’s All Folks!
Happy Coding 🖖

ko-fi

Top comments (0)

What image format should you use in your next project? 🤔