Inicio

Primeros Pasos con VS Code

Quiere escribir código, pero Notepad o TextEdit le resulta muy limitante. Necesita algo que le ayude a programar más rápido, con resaltado de sintaxis, autocompletado y herramientas integradas. VS Code es como un cuaderno inteligente para código: entiende lo que escribe y le ayuda en el proceso. Visual Studio Code es gratuito, funciona en cualquier sistema operativo y millones de desarrolladores lo utilizan.

Conceptos Clave

• Editor - Área principal donde escribe código
• Explorer - Barra lateral que muestra sus archivos y carpetas
• Extensions - Complementos que agregan nuevas funciones a VS Code
• Terminal Integrada - Línea de comandos integrada en VS Code

Lo Que Necesitará

• Computadora con Windows, macOS o Linux
• Conexión a Internet
• ~500 MB de espacio en disco
• 20-25 minutos

Paso 1: Descargue e Instale VS Code

• Vaya a code.visualstudio.com
• Haga clic en el botón Download (detecta su sistema operativo automáticamente)
• Ejecute el instalador:
  • Windows: Haga doble clic en el archivo .exe y haga clic en Next en las indicaciones. En la pantalla Select Additional Tasks, marque también Add “Open with Code” action to Windows Explorer directory context menu para poder abrir carpetas de proyecto desde el Explorador de archivos más adelante
  • Mac: Abra el archivo .dmg, arrastre VS Code a Aplicaciones
  • Linux: Siga las instrucciones para su gestor de paquetes
• Inicie VS Code

Verá una pestaña de bienvenida con opciones para comenzar.

Paso 2: Recorra la Interfaz

VS Code tiene cinco áreas principales:

• Activity Bar (Barra de Actividad, borde izquierdo) - Iconos para Explorer, Search, Git, Extensions, etc.
• Barra Lateral - Muestra el contenido de la actividad seleccionada (archivos, resultados de búsqueda)
• Editor (centro) - Donde escribe código
• Panel (parte inferior) - Terminal, Problems, Output
• Barra de Estado (borde inferior) - Información sobre su archivo y proyecto

Haga clic en el icono Explorer (parte superior de la Activity Bar) para ver el navegador de archivos.

Paso 3: Abra una Carpeta y Explore

• Haga clic en File → Open Folder
• Vaya a su carpeta Documentos y cree una nueva carpeta vacía para practicar, por ejemplo vscode_practice (use el botón New Folder de la ventana)
• Seleccione esa nueva carpeta y luego haga clic en Open (o Select Folder)
• Si se le pregunta “Do you trust the authors?”, haga clic en Yes, I trust the authors

La barra lateral Explorer ahora muestra los archivos de su carpeta:

• Haga clic en una carpeta para expandirla
• Haga clic en cualquier archivo para abrirlo en el editor
• Haga clic en el icono Search en la Activity Bar (lupa) para buscar en todos los archivos

Paso 4: Cree un Archivo Markdown

• En Explorer, pase el mouse sobre el nombre de la carpeta en la parte superior y luego haga clic en el icono New File (página con +) que aparece
• Nómbrelo README.md
• Agregue este contenido:

# Mi Proyecto

Este es un **proyecto de demostración** para aprender VS Code.

## Características
- Fácil de editar
- Formato Markdown
- Vista previa en vivo

## Próximos Pasos
1. Agregar más contenido
2. Probar otros tipos de archivos
3. Explorar extensiones

• Haga clic en File → Save para guardar

Markdown es un formato de texto simple que usa símbolos como # para encabezados, ** para negrita y - para listas. Se usa ampliamente para documentación y para comunicarse con LLMs como ChatGPT y Claude.

Paso 5: Instale la Extensión Markdown Preview

• Haga clic en el icono Extensions en la Activity Bar (el icono de cuadrados)
• Escriba Markdown Preview Enhanced en el cuadro de búsqueda
• Encuentre Markdown Preview Enhanced en los resultados
• Haga clic en Install

Paso 6: Previsualice Su Archivo Markdown

• Abra README.md si aún no está abierto
• Haga clic derecho en el editor y seleccione Markdown Preview Enhanced: Open Preview to the Side

Se abre un panel de vista previa que muestra su Markdown formateado: edite a la izquierda y vea los cambios a la derecha en tiempo real.

Paso 7: Use la Terminal Integrada

• Haga clic en Terminal → New Terminal
• Pruebe estos comandos:

Listar archivos:

ls

(En Windows Command Prompt, use dir)

Mostrar directorio de trabajo:

pwd

(En Windows Command Prompt, use cd)

Crear una carpeta nueva:

mkdir notes

Revise Explorer: aparece la carpeta notes. La terminal se ejecuta en su carpeta de proyecto, por lo que los comandos afectan directamente su proyecto.

Paso 8: Use Agentes de IA en VS Code (Opcional)

VS Code incluye GitHub Copilot Chat, un asistente de IA que puede explicar, escribir y depurar código.

• Abra el archivo README.md (o cualquier otro archivo en su proyecto)
• Haga clic en Chat → Open Chat en la barra de título (o presione Ctrl+Alt+I en Windows/Linux, Ctrl+Cmd+I en Mac)
• Si se le solicita, inicie sesión con su cuenta de GitHub (hay un plan gratuito disponible)
• En el panel de chat que se abre, escriba: “Explica este archivo”
• Presione Enter

GitHub Copilot analizará su archivo y explicará qué hace. Puede pedirle que escriba código nuevo, corrija errores o responda preguntas como “¿Cómo agrego más características?”

Consejo: Para edición en línea, resalte código en cualquier archivo y presione Ctrl+I (Windows/Linux) o Cmd+I (Mac) para pedirle a Copilot que modifique, corrija o explique solo esa sección.

Cómo Reabrir Su Proyecto

• Abra VS Code desde el menú Inicio (Windows), Spotlight (Mac) o Applications (Linux)
• Haga clic en File → Open Recent → seleccione su carpeta
• O haga clic en File → Open Folder y navegue hasta ella

Solución de Problemas

• La vista previa no se muestra: Asegúrese de que la extensión Markdown Preview Enhanced esté instalada y que tenga un archivo .md abierto
• La terminal muestra el directorio incorrecto: Haga clic en el icono de papelera en el panel de la terminal, luego en Terminal → New Terminal
• El menú Chat no es visible: Es posible que las funciones de IA estén desactivadas. Abra Settings (presione Ctrl+, en Windows/Linux o Cmd+, en Mac), busque disable AI features y desmarque la opción. Luego pase el mouse sobre el icono de Copilot en la barra de estado (parte inferior) y seleccione Use AI Features
• Las extensiones no funcionan: Haga clic en View → Command Palette, escriba “reload window” y seleccione Developer: Reload Window

Flujo de Trabajo Completo

1. Abra una carpeta en VS Code
2. Cree y edite archivos
3. Use extensiones para previsualizar
4. Use la terminal para ejecutar comandos
5. Use IA para entender y mejorar el código
6. Guarde y repita

Próximos Pasos

• Pruebe otros tipos de archivos: Cree archivos .html, .css, .js o .py y vea el resaltado de sintaxis de VS Code
• Explore las funciones de IA: Pídale a la IA que escriba código, corrija errores o sugiera mejoras para sus proyectos
• Instale más extensiones: Pruebe “Prettier” para formato automático o “GitLens” para funciones de Git
• Aprenda atajos: Haga clic en Help → Keyboard Shortcuts Reference para acelerar su flujo de trabajo

Creado por Steven Ge el 7 de diciembre de 2025.