En el post anterior instalamos y configuramos Visual Studio Code. Ahora vamos a ponerlo en práctica creando un proyecto desde cero. Aprenderemos a manejar el editor, organizar archivos y entender la estructura básica de un proyecto profesional en Python. 🚀
📓 Nota: Aunque usamos VSCode para proyectos estructurados, recuerda que Jupyter Notebook sigue siendo útil para prototipar y explorar datos, como vimos en los módulos 1 y 2. Aquí vamos a construir algo más robusto, dentro del Módulo 3: Desarrollo con Python. 🐍
En este tutorial, vamos a:
- Conocer la interfaz de VSCode y sus áreas principales.
- Aprender a crear y gestionar carpetas y archivos.
- Entender la estructura de un proyecto con arquitectura MVC.
- Usar atajos de teclado para ser más eficientes.
- Configurar el intérprete de Python si es necesario.
¿Listo? ¡Manos a la obra! 💪
🤔 ¿Qué es un IDE y por qué usamos VS Code?
Un IDE (Entorno de Desarrollo Integrado) es un programa que reúne todas las herramientas que necesitas para escribir, probar y depurar código en un solo lugar. En lugar de usar un editor de texto simple y ejecutar comandos en una terminal separada, un IDE te ofrece todo integrado: resaltado de sintaxis, autocompletado, terminal, depurador, control de versiones y mucho más.
Visual Studio Code es uno de los IDEs más populares porque es gratuito, ligero y multiplataforma, y cuenta con miles de extensiones que lo adaptan a cualquier lenguaje o framework, incluyendo Python y Flask. [ENLACE EXTERNO A DOCUMENTACIÓN DE VSCode]
🧩 Las 5 partes clave de Visual Studio Code
La captura que ves arriba nos ayuda a entender cómo está organizado VS Code. No es solo un editor de texto: es un entorno de desarrollo integrado (IDE) dividido en áreas funcionales. A continuación, te explicamos cada una de las 5 partes resaltadas en la imagen.
🔴 1. Barra de actividades (Recuadro rojo, izquierda)
Es la columna vertical más a la izquierda. Contiene los iconos que te permiten cambiar entre las vistas principales del editor: el Explorador de archivos (📄), la Búsqueda global (🔍), el Control de versiones (Git), la Depuración (🐞) y el gestor de Extensiones (🧩). ¿Para qué le sirve al usuario? Es el «centro de mando». Si quieres instalar un plugin para Python, haces clic en el icono de Extensiones. Si quieres hacer un commit, vas al de Git. Al pasar el mouse, te muestra el nombre de cada herramienta, lo que facilita el aprendizaje. Sin esta barra, estarías constantemente buscando opciones en los menús superiores.
🔵 2. Panel lateral / Explorador de archivos (Recuadro azul, junto a la izquierda)
Es el área que se despliega justo a la derecha de la barra de actividades. Su contenido cambia según lo que tengas seleccionado en la barra roja. Por defecto, muestra el árbol de navegación de tu proyecto (carpetas y archivos). ¿Para qué le sirve al usuario? Es el mapa de tu aplicación. Aquí ves la jerarquía de tu arquitectura MVC: carpetas como templates/, static/ y archivos como controlador.py. Te permite crear, renombrar, mover y eliminar archivos arrastrándolos, lo que hace que la organización de un proyecto sea visual y extremadamente rápida. Sin él, tendrías que usar la terminal para navegar entre carpetas.
🟠 3. Barra de menús superiores (Recuadro naranja, arriba)
Situada en la parte superior de la ventana, contiene los menús desplegables tradicionales: Archivo, Editar, Selección, Ver, Ir, Ejecutar, etc. ¿Para qué le sirve al usuario? Aunque la mayoría de las acciones se pueden hacer con atajos de teclado o desde la barra de actividades, esta barra es fundamental para acciones puntuales como «Guardar como», «Cerrar carpeta», o para acceder a la configuración global del editor. También es útil para encontrar opciones que aún no has memorizado.
🟩 4. Panel inferior / Terminal y problemas (Recuadro verde, abajo)
Situado en la parte baja de la pantalla, agrupa varias herramientas esenciales. Desde aquí puedes acceder a una terminal de comandos completa, ver los errores de tu código (en la pestaña «Problemas») o monitorear la salida de la depuración. ¿Para qué le sirve al usuario? Es el «cuarto de máquinas». Para el desarrollo con Flask, aquí abrirás tu terminal virtual para ejecutar pip install flask y activarás entornos virtuales. Además, cuando tu aplicación falle, los errores aparecerán en «Problemas», permitiéndote corregirlos sin salir del editor. La terminal integrada te evita tener que abrir una ventana externa de comandos.
🟨 5. Editor de código / Pestañas (Recuadro amarillo, centro)
Ocupa la mayor parte de la pantalla y es donde escribirás todo tu código (Python, HTML, CSS, etc.). Puedes tener múltiples archivos abiertos a la vez, organizados en pestañas en la parte superior del área amarilla. ¿Para qué le sirve al usuario? Es el corazón del IDE. Además de escribir código, ofrece herramientas avanzadas como el resaltado de sintaxis, autocompletado inteligente (IntelliSense) y sugerencias de código. Al hacer clic en una pestaña, puedes alternar rápidamente entre tu lógica (models.py) y tu interfaz (index.html), lo que acelera enormemente el desarrollo.
📂 ¿Cómo abrir una carpeta en Visual Studio Code?
Para trabajar en un proyecto, lo primero es abrir o crear una carpeta que será tu «espacio de trabajo». VSCode guarda el contexto de esa carpeta, por lo que al cerrar y volver a abrir, recordará los archivos que tenías abiertos.
Puedes hacerlo de varias formas:
- Desde la pantalla de inicio: Haz clic en
Abrir carpeta.... - Desde el menú: Ve a
Archivo → Abrir carpeta. - Desde la terminal: Navega hasta la carpeta y ejecuta
code .(requiere tener el comandocodeinstalado).
Si ya tienes una carpeta abierta y quieres cambiar a otra, usa Archivo → Cerrar carpeta para salir del espacio de trabajo actual.
⚠️ La diferencia clave: abrir un archivo vs abrir una carpeta
Uno de los errores más comunes entre principiantes es abrir un archivo suelto (por ejemplo, app.py) en lugar de abrir la carpeta completa del proyecto. Esto genera problemas con la terminal, las rutas relativas y la estructura del proyecto.
- Si abres solo
app.py: VS Code no sabe que ese archivo pertenece a un conjunto más grande. El explorador solo mostrará ese archivo, no podrás ver la carpetatemplates/nistatic/, y la terminal trabajará en la ubicación del archivo, no en la raíz del proyecto. Esto provocará errores al intentar importar módulos o al ejecutar Flask. - Si abres la carpeta completa: VS Code la convierte en tu espacio de trabajo. Verás todos los archivos y subcarpetas en el explorador, podrás crear nuevas carpetas y archivos dentro del proyecto, y la terminal se posicionará automáticamente en la raíz. Es la forma correcta de trabajar en cualquier proyecto de desarrollo.
📂 ¿Qué ocurre cuando abrimos una carpeta?
Cuando seleccionas una carpeta en VS Code, suceden varias cosas automáticamente:
- Seleccionas una carpeta desde el menú
Archivo → Abrir carpeta. - VS Code la convierte en tu espacio de trabajo. Todos los archivos y subcarpetas aparecen en el explorador (área azul).
- La terminal integrada se abre automáticamente en la raíz de esa carpeta, por lo que cualquier comando que ejecutes se aplicará dentro del proyecto.
- Puedes crear nuevos archivos y carpetas directamente desde el explorador.
- Si cierras VS Code y vuelves a abrir, recordará tu espacio de trabajo y los archivos que tenías abiertos.
Conclusión: Este proceso es la base de todo desarrollo. Siempre que inicies un nuevo proyecto, asegúrate de hacerlo abriendo una carpeta, no un archivo.
🔧 Una analogía para entender la interfaz de Visual Studio Code
Para que te resulte más fácil recordar cada parte, imagina que VS Code es un taller de carpintería:
- El explorador (área azul) es el armario donde guardas todas tus herramientas y materiales (archivos y carpetas).
- El editor (área amarilla) es la mesa de trabajo donde tallas la madera (escribes tu código).
- La terminal (área verde) es el banco de trabajo donde ejecutas órdenes y pruebas tus herramientas (comandos como
pythonopip). - La barra de actividades (área roja) es el panel de control desde el que cambias de tarea (explorar archivos, controlar versiones, etc.).
- Los problemas son el inspector que te avisa cuando algo no está bien en tu trabajo.
Esta analogía te ayudará a recordar qué hace cada parte sin tener que memorizar nombres técnicos.
🖥️ ¿Qué es la terminal integrada y por qué la usamos?
Muchos principiantes sienten cierto temor al ver una pantalla negra con texto. Pero la terminal no es más que una ventana que te permite hablar directamente con el sistema operativo y con Python. En lugar de hacer clic en botones, escribes comandos.
¿Para qué la usamos en desarrollo?
- Instalar librerías con
pip install flask. - Crear entornos virtuales.
- Ejecutar programas con
python app.py. - Ver los errores y mensajes de la aplicación en tiempo real.
- Navegar entre carpetas con
cd.
La terminal integrada de VS Code aparece en la parte inferior (área verde). Puedes abrirla y cerrarla con el atajo Ctrl + J (esto abre o cierra todo el panel inferior, así que si la pestaña activa no es «Terminal», deberás hacer clic en ella). No temas a la terminal: a lo largo del curso la usarás constantemente y te volverás tan cómodo con ella como con cualquier otra herramienta.
🔄 El ciclo de trabajo que repetirás una y otra vez
Cuando desarrolles tu aplicación, seguirás un ciclo que se repetirá decenas de veces. Es importante que lo interiorices desde el principio:
- Crear carpeta del proyecto.
- Crear archivos y carpetas dentro de esa estructura.
- Escribir código en el editor.
- Guardar el archivo con
Ctrl + S. - Ejecutar el programa desde la terminal o con el botón de ejecución.
- Comprobar el resultado en la terminal o en el navegador.
- Corregir errores (si aparecen) y volver a ejecutar.
🚀 Flujo de trabajo típico para una aplicación Flask
Ahora que ya conoces cada parte de VS Code, vamos a ponerlas en marcha explicando cómo se trabaja de forma natural al desarrollar una aplicación web con Flask. Este flujo conecta todas las áreas resaltadas:
1. Organización (🔵 Panel azul)
Abres tu carpeta de proyecto. Utilizas el panel lateral para crear la estructura MVC: las carpetas templates/ y static/, y los archivos app.py, models.py y requirements.txt.
2. Codificación (🟨 Editor amarillo)
Haces clic en app.py y se abre en el editor central. Aquí escribes la lógica de las rutas de Flask: definiciones de rutas, funciones y llamadas a render_template(). También escribes el código HTML en los archivos de templates y el CSS en el archivo static.
3. Configuración y Herramientas (🟠 Menú naranja)
Usas el menú superior para guardar archivos, abrir nuevas ventanas o acceder a la configuración global. También puedes usar el menú «Ejecutar» para iniciar la depuración.
4. Consola y Gestión (🟩 Terminal verde)
Abres el panel inferior con Ctrl + J y escribes en la terminal: pip install flask. Luego ejecutas el servidor con python app.py (o flask run). Justo ahí, en la terminal, verás los logs del servidor corriendo (los códigos 200, 404 o 500).
5. Depuración y Corrección (🟩 Terminal verde y 🟨 Editor amarillo)
Si tu aplicación falla, el rastro del error (Traceback) aparecerá en la terminal verde. Si es un error de sintaxis, se marcará en el editor central y aparecerá una alerta en la pestaña de «Problemas» (también en el área verde). Corriges el código, guardas (Ctrl+S), recargas la página, y el servidor en la terminal te indicará si el error se ha solucionado.
Este ciclo (Organizar → Escribir → Ejecutar → Corregir) se repite constantemente, y VS Code está diseñado para que este flujo sea lo más rápido y natural posible.
❌ Errores comunes al empezar (y cómo evitarlos)
Aquí tienes los errores más frecuentes que cometen los principiantes. Tómalos como una guía de qué evitar.
- ❌ Abrir un archivo en lugar de una carpeta: Ya lo hemos visto. Siempre abre la carpeta completa para que VS Code reconozca el proyecto.
- ❌ Crear archivos fuera del proyecto: Asegúrate de que el explorador esté posicionado dentro de tu carpeta de trabajo antes de crear nuevos archivos.
- ❌ Escribir código sin guardar:
Ctrl + Ses tu mejor amigo. Si no guardas, los cambios no se verán al ejecutar. - ❌ Ejecutar Python desde otra carpeta: Asegúrate de que la terminal esté posicionada en la raíz del proyecto (con
cdo abriendo la carpeta correctamente). - ❌ Cerrar accidentalmente la terminal: Si la cierras, vuelve a abrirla con
Ctrl + Jy posicionate en la carpeta correcta concd.
💾 ¿Dónde se guarda realmente mi proyecto?
Muchísimas personas se preguntan esto: ¿VS Code guarda mi proyecto automáticamente en algún lugar especial?
La respuesta es no. VS Code no tiene un «carpeta de proyectos» propia. Simplemente abre la carpeta que tú le indiques. Esa carpeta vive en tu disco duro, en la ubicación que tú hayas elegido (por ejemplo, Documentos/MisProyectos). VS Code solo la muestra y te permite trabajar con ella. Si borras la carpeta del disco, el proyecto desaparece.
Conclusión: Tú eres el responsable de guardar tus proyectos en un lugar que recuerdes. Organízate desde el principio.
🌟 Buena práctica: organiza tus proyectos
Te recomendamos crear una carpeta llamada Python o MisProyectosPython en un lugar accesible (por ejemplo, en Documentos). Dentro de esa carpeta guardarás todos tus proyectos del curso. Así tendrás todo ordenado y no perderás archivos.
✅ Antes de ejecutar tu código: lista de verificación
Antes de presionar el botón de ejecución, repasa mentalmente esta lista:
- ✔ Archivo guardado (
Ctrl + S). - ✔ La extensión del archivo es
.py. - ✔ La terminal integrada está abierta y posicionada en la carpeta del proyecto.
- ✔ Python está instalado y el intérprete correcto está seleccionado.
- ✔ Si usas entornos virtuales, el entorno está activado.
Si cumples todo esto, la ejecución será exitosa.
📝 Escribir y ejecutar código en Visual Studio Code
Vamos a probar que todo funciona. Crea un archivo hola.py en la raíz del proyecto y escribe:
# Primer programa en el proyecto MVC
print("¡Hola, mundo desde mi proyecto MVC!")
nombre = input("¿Cómo te llamas? ")
print(f"Bienvenido, {nombre}. ¡Tu primer proyecto con VSCode está listo!")
Para ejecutarlo:
- Haz clic en el triángulo verde ▶️ en la esquina superior derecha.
- O usa el atajo
Ctrl + F5. - O abre la terminal integrada (
Ctrl + J) y escribepython hola.py.
Resultado esperado:
¡Hola, mundo desde mi proyecto MVC! ¿Cómo te llamas? Mariano Bienvenido, Mariano. ¡Tu primer proyecto con VSCode está listo!
📝 Explicación línea por línea del primer programa
Para que entiendas qué está pasando, desglosamos el código:
print("¡Hola, mundo...")→ Muestra el texto en la pantalla.nombre = input("¿Cómo te llamas? ")→ Espera a que el usuario escriba su nombre y lo guarda en la variablenombre.print(f"Bienvenido, {nombre}...")→ Imprime el saludo personalizado usando la variablenombre.
Este sencillo programa ya te muestra cómo interactuar con el usuario y cómo usar variables.
🐍 Configurar el intérprete de Python (y la importancia del entorno virtual)
🧠 ¿Por qué es vital elegir el intérprete correcto?
Imagina que el intérprete de Python es el «motor» que va a ejecutar tu código. VS Code puede ver varios motores instalados en tu computadora: el Python global del sistema (que viene con tu SO), el de Anaconda, o el que tú has creado dentro de un entorno virtual (venv).
Cuando creas un entorno virtual e instalas librerías (como Flask o Django), esas librerías solo existen dentro de ese entorno virtual. Si dejas seleccionado el intérprete global del sistema, VS Code intentará ejecutar tu proyecto usando ese motor global, y se encontrará con que no reconoce las librerías que acabas de instalar. Esto te lanzará errores como:
ModuleNotFoundError: No module named 'flask'
Para un novato, este error puede ser frustrante porque piensa que instaló mal la librería, cuando en realidad lo único que falló fue la selección del motor. Siempre debes seleccionar el intérprete que apunte a la ruta de tu venv (suele tener una etiqueta como ('venv': venv) junto a la versión de Python).
🛠️ Cómo seleccionar el intérprete correcto
- Abre la paleta de comandos con
Ctrl + Shift + P. - Escribe
Python: Select Interpretery elige la opción que aparece. - Se abrirá una lista desplegable con todos los intérpretes disponibles en tu sistema.
- Elige el que corresponda a tu proyecto. Si creaste un entorno virtual dentro de tu carpeta, verás una opción que dice algo así como
./venv/bin/pythono./.venv/Scripts/python.exe.
💡 Un truco rápido: En la barra de estado inferior (la parte verde de la interfaz), justo a la izquierda, verás la versión de Python que está seleccionada actualmente (ej. Python 3.10.0). Haciendo clic en ese texto, se abrirá la misma lista desplegable para cambiar de intérprete al instante, sin necesidad de usar la paleta de comandos.
Si no estás seguro de la ruta de tu Python global, puedes abrir la terminal integrada (área verde inferior) y ejecutar:
- Linux/macOS:
which python3 - Windows:
where python
Una vez que hayas elegido el intérprete correcto (el del entorno virtual), VS Code recordará esta configuración para tu proyecto actual. A partir de ese momento, cuando ejecutes el proyecto, el motor sabrá exactamente dónde buscar tus librerías instaladas y el error de importación desaparecerá.
💻 ¿Cómo abrir la terminal integrada en VS Code?
Puedes abrir la terminal integrada de varias maneras:
- Con el atajo de teclado
Ctrl + J(Windows/Linux) oCmd + J(macOS) para mostrar/ocultar el panel inferior. Si la pestaña «Terminal» no está activa, haz clic en ella. - Desde el menú superior:
Ver → Terminal. - Desde la paleta de comandos:
Ctrl + Shift + Py escribe «Terminal: Create New Terminal».
La terminal se abrirá en la raíz de tu carpeta de proyecto, lista para que ejecutes comandos.
❓ ¿Por qué aparece ‘ModuleNotFoundError’ y cómo solucionarlo?
Este error es muy común cuando trabajas con entornos virtuales. Como explicamos antes, el intérprete de Python que está usando VS Code no tiene acceso a las librerías que instalaste en tu entorno virtual.
Solución: Asegúrate de que el intérprete seleccionado sea el de tu entorno virtual (con la etiqueta ('venv': venv)). Puedes hacerlo desde la paleta de comandos o haciendo clic en la versión de Python en la barra de estado.
Una vez seleccionado el intérprete correcto, el error desaparecerá.
▶️ ¿Cómo ejecutar un archivo Python en VS Code?
Tienes varias opciones:
- Hacer clic en el triángulo verde ▶️ en la esquina superior derecha del editor.
- Usar el atajo
Ctrl + F5(Windows/Linux) oCmd + F5(macOS). - Abrir la terminal integrada (
Ctrl + J) y escribirpython nombre_del_archivo.py.
Cualquier método funcionará si has seguido la checklist anterior.
[/su_box]
📖 Glosario de términos
- Proyecto: Una carpeta que contiene todos los archivos y carpetas de una aplicación o sitio web.
- IDE: Entorno de Desarrollo Integrado. Un programa que reúne herramientas para programar.
- Terminal: Una ventana de texto donde escribes comandos para interactuar con el sistema operativo.
- Intérprete: El programa que ejecuta tu código Python. Sin él, el código no funciona. Más info en cómo instalar Python 3.
- Entorno virtual: Un espacio aislado donde instalas librerías específicas para un proyecto, sin afectar a otros proyectos. Aprende más en el tutorial de Flask.
- Extensión: Un complemento que añade funcionalidades a VS Code (ej. para Python, Flask, etc.).
- Explorador: El panel lateral que muestra la estructura de carpetas y archivos de tu proyecto.
- Archivo: Un documento que contiene código o información (ej.
app.py). - Carpeta: Un contenedor que agrupa archivos y otras carpetas.
😅 No intentes memorizar todo de golpe, lo aprenderás igualmente en la práctica.
Es normal no recordar todos los atajos de teclado o todos los nombres de las áreas al principio. Los programadores profesionales también usan la ayuda y buscan comandos cuando los necesitan. Con la práctica diaria, los atajos y nombres se volverán automáticos.
Lo importante es entender el concepto de cada herramienta, no memorizar una lista.
❓ Preguntas frecuentes (FAQ)
🎯 Resumen y próximos pasos
En esta lección has aprendido:
- ✅ Las 5 áreas principales de Visual Studio Code y su función.
- ✅ Atajos de teclado para ser más eficiente.
- ✅ Cómo crear y organizar carpetas y archivos para un proyecto.
- ✅ La estructura básica de un proyecto MVC.
- ✅ Cómo configurar el intérprete de Python.
- ✅ Cómo escribir y ejecutar tu primer código.
En la siguiente lección profundizaremos en la arquitectura MVC y comenzaremos a construir una aplicación real con Flask. Aprenderás a conectar el modelo, la vista y el controlador, y a manejar las rutas de la aplicación. ¡No te lo pierdas!
📅 Última actualización: agosto 24, 2026