VSCode - Crear Archivos y Directorios sin usar el ratón
Tags: spanish, vscode, productivity, webdev
Published: 2021-10-31 02:51:40

Idiomas: [🇺🇸] [English](https://dev.to/equiman/vscode-create-files-and-folders-on-the-go-2hd6) - [🇪🇸] [Español](https://dev.to/equimancho/vscode-crear-archivos-y-directorios-sin-usar-el-raton-1c19)

---

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

{% post https://dev.to/equimancho/migrando-a-teclado-en-ingles-para-desarrollo-a91 %}

---

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.

```json
{
    "explorer.autoReveal": true
}
```
<figcaption>settings.json</figcaption>

![auto-reveal](https://dev-to-uploads.s3.amazonaws.com/i/7xhy52t7f80l8dp29mp0.gif)

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.

```json
[
    {
        "key": "ctrl+n",
        "command": "explorer.newFile",
        "when": "explorerViewletFocus"
    },
    {
        "key": "ctrl+shift+n",
        "command": "explorer.newFolder",
        "when": "explorerViewletFocus"
    }
]
```
![keyboard-config](https://dev-to-uploads.s3.amazonaws.com/i/ycd0einx7mkgnu7n7lq3.gif)

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.

```json
[
    {
        "key": "ctrl+shift+n",
        "command": "workbench.action.newWindow",
        "when": "!explorerViewletFocus"
    }
]
```

## Usar

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

![demo](https://dev-to-uploads.s3.amazonaws.com/i/fu4sf4xv4zjb023ulud5.gif)

---

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

{% link https://dev.to/equiman/iterm2--oh-my-zsh--powerlevel9k-best-terminal-combination-for-geeks-58l5 %}

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

```bash
take Name && touch name{.css,.js,.test.js} 
```

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](https://dev-to-uploads.s3.amazonaws.com/i/g24j8nkx0g9tzv2zqfni.gif)

---

**That’s All Folks!**
**Happy Coding** 🖖

[![cerveza](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4zle20oa7anpfjvap8n.png)](https://github.com/sponsors/deinsoftware)