Crear carpetas

Organizar proyectos con carpetas y subcarpetas

Una estructura de carpetas bien organizada es fundamental para mantener proyectos de desarrollo manejables y profesionales. Visual Studio Code facilita esta organización mediante herramientas intuitivas que permiten crear jerarquías lógicas de directorios desde el panel Explorer.

Creación de carpetas desde el Explorer

El panel Explorer ofrece múltiples formas de crear carpetas nuevas. La más directa es hacer clic derecho en el espacio vacío del Explorer o sobre una carpeta existente y seleccionar "New Folder" del menú contextual. También puedes usar el icono de carpeta con símbolo "+" que aparece al pasar el cursor sobre el nombre del workspace.

mi-proyecto/
├── src/
├── assets/
└── docs/

Al crear una carpeta, VSCode te permite escribir el nombre inmediatamente, incluyendo rutas completas con barras diagonales. Por ejemplo, escribir src/components/buttons creará automáticamente toda la estructura de subcarpetas necesaria.

Estructura básica para proyectos web

Los proyectos web siguen patrones de organización reconocidos que facilitan el mantenimiento y la colaboración. Una estructura típica incluye separación clara entre código fuente, recursos estáticos y documentación:

proyecto-web/
├── index.html
├── css/
│   ├── styles.css
│   └── reset.css
├── js/
│   ├── main.js
│   └── utils.js
├── images/
│   ├── icons/
│   └── photos/
└── assets/
    ├── fonts/
    └── videos/

Esta organización por tipo de archivo permite localizar recursos rápidamente y mantiene el proyecto escalable. La carpeta css contiene todas las hojas de estilo, js agrupa los archivos JavaScript, e images almacena recursos gráficos organizados por subcategorías.

Anidación de subcarpetas

Las subcarpetas permiten crear jerarquías más profundas cuando los proyectos crecen en complejidad. Para crear subcarpetas, simplemente haz clic derecho sobre una carpeta existente y selecciona "New Folder", o usa la notación de ruta al crear carpetas nuevas.

src/
├── components/
│   ├── header/
│   │   ├── Header.js
│   │   └── header.css
│   ├── footer/
│   │   ├── Footer.js
│   │   └── footer.css
│   └── navigation/
│       ├── NavBar.js
│       └── nav.css
└── pages/
    ├── home/
    └── about/

Esta estructura modular agrupa archivos relacionados funcionalmente, facilitando el mantenimiento y la reutilización de componentes. Cada subcarpeta puede contener sus propios archivos de estilo, lógica y recursos específicos.

Movimiento de archivos entre carpetas

VSCode permite mover archivos entre carpetas mediante arrastrar y soltar (drag & drop) directamente en el Explorer. Selecciona uno o varios archivos, mantenlos presionados y arrástralos a la carpeta destino. El editor actualizará automáticamente las referencias relativas en muchos casos.

Para operaciones más precisas, usa el menú contextual con las opciones "Cut" y "Paste", o los atajos de teclado Ctrl+X y Ctrl+V. Esto es especialmente útil cuando necesitas mover archivos entre carpetas que no están visibles simultáneamente en el Explorer.

Patrones de organización por tipo de proyecto

Diferentes tipos de proyecto requieren estructuras específicas adaptadas a sus necesidades:

Proyecto de aplicación web estática:

sitio-web/
├── public/
│   ├── index.html
│   ├── about.html
│   └── contact.html
├── src/
│   ├── css/
│   ├── js/
│   └── images/
└── docs/

Proyecto de desarrollo frontend moderno:

app-frontend/
├── src/
│   ├── components/
│   ├── pages/
│   ├── services/
│   └── utils/
├── public/
├── assets/
└── tests/

Proyecto de documentación:

documentacion/
├── content/
│   ├── guides/
│   ├── tutorials/
│   └── reference/
├── images/
└── templates/

Mejores prácticas de organización

Mantén nombres de carpetas descriptivos y consistentes, evitando espacios y caracteres especiales. Usa guiones o guiones bajos para separar palabras: user-profiles o user_profiles.

Agrupa archivos relacionados en la misma carpeta y crea subcarpetas cuando una carpeta contenga más de 10-15 archivos. Esto mantiene la navegación ágil y reduce la sobrecarga visual en el Explorer.

Establece una jerarquía lógica donde las carpetas más importantes estén en el nivel superior y los detalles específicos en niveles más profundos. Por ejemplo, src/components/buttons/primary/ es más claro que tener todos los archivos en el mismo nivel.