Cómo ocultar carpetas en VS Code para mantener una vista limpia del proyecto

Visual Studio Code (VS Code) es uno de los editores de código fuente más populares en la actualidad. Convirtiéndose en una herramienta esencial para muchas personas que trabajan necesitan trabajar con código debido a su flexibilidad, capacidad de extensión y características. En muchos proyectos, la estructura del directorio puede contener carpetas de soporte o temporales que pueden complicar la navegación. Carpetas como node_modules, .git o dist pueden ser esenciales para el proyecto, pero no se suele trabajar con ellas de forma manual. En esta entrada se explicará cómo ocultar carpetas en VS Code para mantener una vista más ordenada del proyecto.

¿Por qué es interesante ocultar carpetas en VS Code?

Por defecto, en VS Code se muestran casi todas las carpetas del proyecto, creando de esta manera ruido visual. Motivo por el que es interesante ocultar algunas carpetas. Mantener una vista limpia y organizada del proyecto puede tener varios beneficios:

1. Mejora la productividad: Ocultar carpetas y archivos innecesarios permite concentrarte en las partes más relevantes de tu código sin distracciones.
2. Facilita la navegación: Con menos elementos en el explorador de archivos, es más fácil encontrar los archivos que realmente se necesitan editar.
3. Evitar errores: Al no interactuar accidentalmente ni con las carpetas ni los archivos de sistema (como puede ser node_modules en Node.js), se reduce el riesgo de hacer cambios que puedan romper el proyecto.
4. Estética y orden: Una vista ordenada es más agradable visualmente y puede hacer que trabajar sea una experiencia más placentera.

Cómo ocultar carpetas en VS Code

El proceso para ocultar carpetas específicas en VS Code es realmente sencillo, solamente se deben indicar estas en el archivo settings.json. Alternativamente también se puede hacer en la configuración de usuario, por lo que afectará a todos los proyectos.

En Analytics Lane

Nuevo simulador FIRE en el laboratorio de aplicaciones de Analytics Lane

Configurando el archivo settings.json del espacio de trabajo

El archivo settings.json permite personalizar una amplia gama de configuraciones en VS Code. Entre la que se incluye la posibilidad de ocultar carpetas. Para modificar esta configuración solamente se deben seguir los siguientes pasos:

1. Abrir la configuración de VS Code: Presionar Ctrl + , (o Cmd + , en Mac) para abrir la configuración de VS Code.

2. Editar la configuración en JSON: En la pantalla de configuración, seleccionar la pestaña Àrea de trabajo. Para acceder al archivo settings.json se puede hacer clic en el icono de archivo en la esquina superior derecha de la pantalla de configuración o abrirlo directamente en la carpeta .vscode de proyecto.
3. Agregar la configuración para ocultar carpetas: Para ocultar las carpetas de un proyecto Node.js, se puede agregar la siguiente configuración en el archivo settings.json:

{
  "files.exclude": {
    "node_modules": true,
    "dist": true,
    "build": true,
    ".git": true,
    ".vscode": true
  }
}

En este ejemplo, se ocultanrán las carpetas node_modules, dist, build, .git y .vscode. Siendo posible personalizar esta lista agregando o eliminando carpetas según en función a las necesidades específicas de cada proyecto.

Usando la Configuración de Usuario (Global)

En el caso de que se desee aplicar estas configuraciones de manera global, para que se apliquen en todos los proyectos, se puede hacerlo mediante la configuración de usuario. Los pasos son similares:

1. Abrir la configuración de VS Code: Presionar Ctrl + , (o Cmd + , en Mac) para abrir la configuración.
2. Editar la Configuración en JSON: En la pantalla de configuración, seleccionar la pestaña Àrea de trabajo. Al igual que antes, hacer clic en el icono de archivo en la esquina superior derecha de la pantalla de configuración para “Abrir configuraciones (JSON)”.
3. Agregar la configuración para ocultar carpetas: Agregar la siguiente configuración:

{
  "files.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true,
    "**/.git": true,
    "**/.vscode": true
  }
}

Nótese que en este caso, se usa **/ para asegurar que la configuración se aplique a todas las carpetas en cualquier proyecto que abras en VS Code.

¿Qué hacer cuando se necesita editar una carpeta oculta?

Una vez que se ha configurado la exclusión de carpetas, puede surgir la necesidad de acceder y editar alguna de ellas, como .vscode. Para ello solamente se debe volver a abrir la configuración de VS Code y modificar el archivo correspondiente.

Carpetas que se pueden ocultar según el tipo de proyecto

Dependiendo del tipo de proyecto con el que se esté trabajando, existen diferentes carpetas que se pueden considerar ocultar. Algunos ejemplos son:

Proyectos de Node.js

• node_modules: Contiene todas las dependencias del proyecto instaladas a través de npm o yarn.
• dist o build: Directorios donde se generan los archivos de distribución o construcción del proyecto.
• .npm: Archivos de configuración y caché de npm.
• .yarn: Archivos de configuración y caché de yarn.

Proyectos de Python

• __pycache__: Contiene archivos bytecode compilados por Python.
• .pytest_cache: Archivos de caché generados por pytest.
• venv o env: Directorios del entorno virtual de Python.

Proyectos de Frontend (React, Angular, Vue)

• node_modules: Dependencias del proyecto.
• dist o build: Archivos de distribución.
• .cache: Caché del proyecto.

Conclusiones

Ocultar carpetas en VS Code puede hacer que el entorno de desarrollo sea más limpio y eficiente. Facilitando enfocarse en lo que realmente importa. Una configuración que se puede hacer completamente independiente del tipo de proyecto en el que se trabaje: Node.js, Python, frontend o cualquier otro. Dado que estas configuraciones son completamente reversibles y ajustables, esta es una buena opción para mejorar la productividad.

Imagen de Studio_Iris en Pixabay