📘 Manual de Visual Studio Code

Visual Studio Code (VS Code) es un editor de código fuente gratuito y de código abierto desarrollado por Microsoft. Es ligero, potente y altamente personalizable, ideal para desarrolladores de todos los niveles. Es un editor de código muy popular y versátil, que ofrece una gran cantidad de características diseñadas para facilitar el desarrollo de software.

Características principales:

• Multiplataforma: VS Code está disponible para los tres sistemas operativos principales: Windows, macOS, y Linux.
  
  • Es ideal para equipos de trabajo donde los desarrolladores usan diferentes sistemas operativos.
  • Ofrece la misma experiencia de usuario en todas las plataformas, por lo que puedes cambiar entre sistemas operativos sin problemas.
• IntelliSense: IntelliSense es una tecnología de autocompletado de código que sugiere palabras clave, funciones, métodos y variables a medida que escribes. Es un autocompletado inteligente de código
  
  • Autocompletado inteligente: Basado en el contexto de tu código (lenguaje de programación, librerías importadas, etc.).
  • Documentación en línea: Al sugerir funciones o métodos, también muestra detalles sobre cómo utilizarlos.
  • Reducción de errores: Minimiza errores tipográficos o de sintaxis.
• Git integrado: VS Code incluye herramientas para trabajar con Git, el sistema de control de versiones más usado.. Es decir, control de versiones sin salir del editor
  
  • Puedes realizar tareas de Git (como hacer commits, crear ramas, resolver conflictos, etc.) directamente desde el editor.
  • Ofrece una vista visual de los cambios en tus archivos, lo que facilita comparar versiones.
  • Incluye soporte para extensiones de otros sistemas de control de versiones, como SVN o Mercurial.
• Extensiones: VS Code tiene un mercado de extensiones donde puedes descargar herramientas adicionales para personalizar el editor y ampliar sus capacidades.
  
  • Puedes agregar soporte para nuevos lenguajes de programación, frameworks, linters, temas, y más.
    Ejemplos populares:
  • Prettier: Para formatear código automáticamente.
  • ESLint: Para identificar problemas en tu código JavaScript/TypeScript.
  • Remote - SSH: Para trabajar en servidores remotos.
  • Live Server: Para ver cambios en tiempo real en proyectos web.
  Hay extensiones tanto gratuitas como de pago.
• Terminal integrada Incluye una terminal directamente en el editor, lo que te permite ejecutar comandos sin cambiar a otra ventana o aplicación. No necesitas cambiar de ventana
  
  • Puedes trabajar en tu código y ejecutar scripts, comandos de Git o herramientas de compilación desde el mismo lugar.
  • Admite múltiples terminales, por lo que puedes tener varias abiertas al mismo tiempo (por ejemplo, una para tu servidor de desarrollo y otra para tareas de compilación).
• Depuración (Debugging) VS Code incluye herramientas para depurar tu código mientras se ejecuta.
  
  • Puedes agregar puntos de interrupción (breakpoints) para pausar la ejecución del programa y analizar variables o el flujo del código.
  • Soporta depuración para muchos lenguajes, como JavaScript, Python, C++, Java, entre otros.
  • Con extensiones, puedes configurar depuradores para herramientas específicas, como Node.js, React Native o Docker.

Descarga e instalación:

1. Visita code.visualstudio.com
2. Descarga la versión para tu sistema operativo
3. Ejecuta el instalador y sigue las instrucciones
4. Al finalizar, abre VS Code desde el menú de aplicaciones

Interfaz básica - Áreas principales:

• Activity Bar: Barra lateral izquierda con iconos principales
• Side Bar: Panel que muestra el explorador de archivos, búsqueda, etc.
• Editor: Área central donde editas tus archivos
• Status Bar: Barra inferior con información del archivo actual
• Panel: Área inferior para terminal, problemas, output, etc.

Activity Bar - Íconos principales:

• 📁 Explorer: Navega por tus archivos y carpetas del proyecto. Aquí abres, creas, renombras y eliminas archivos. También muestra el esquema del archivo actual
• 🔍 Search: Busca y reemplaza texto en todos los archivos de tu proyecto. Soporta expresiones regulares y búsqueda sensible a mayúsculas
• 🔀 Source Control: Gestiona Git y otros sistemas de control de versiones. Ver cambios, hacer commits, push, pull, etc.
• ▶️ Run and Debug: Ejecuta y depura tu código. Configura breakpoints, inspecciona variables y sigue la ejecución paso a paso
• 🧩 Extensions: Busca, instala y gestiona extensiones para añadir funcionalidades a VS Code
• 👤 Accounts: (Parte inferior) Sincroniza configuración entre dispositivos usando tu cuenta de Microsoft o GitHub
• ⚙️ Settings: (Parte inferior, ícono de engranaje) Accede a configuración, temas, atajos de teclado y preferencias

Menú File - Gestión de archivos:

• New File: Crea un nuevo archivo. Usa Ctrl + N
• Open File/Folder: Abre archivos individuales o carpetas completas (proyectos)
• Open Recent: Lista de proyectos y archivos abiertos recientemente
• Save/Save As: Guarda el archivo actual. Ctrl + S
• Auto Save: Actívalo para guardar automáticamente los cambios
• Preferences: Acceso a Settings, Keyboard Shortcuts, Color Theme, etc.
• Close Editor/Folder: Cierra el archivo o proyecto actual

Menú Edit - Edición de código:

• Undo/Redo: Deshacer y rehacer cambios. Ctrl + Z / Ctrl + Y
• Cut/Copy/Paste: Operaciones básicas de edición
• Find/Replace: Buscar y reemplazar en el archivo actual. Ctrl + F / Ctrl + H
• Find in Files: Buscar en todo el proyecto. Ctrl + Shift + F
• Toggle Line Comment: Comenta o descomenta líneas. Ctrl + /
• Toggle Block Comment: Comentarios de bloque. Shift + Alt + A

Menú Selection - Selección avanzada:

• Select All: Selecciona todo el contenido. Ctrl + A
• Expand Selection: Expande la selección al elemento contenedor. Shift + Alt + →
• Add Cursor Above/Below: Añade cursores múltiples para editar varias líneas simultáneamente
• Select All Occurrences: Selecciona todas las apariciones del texto seleccionado. Ctrl + Shift + L
• Column Selection Mode: Cambia a modo de selección en columnas

Menú View - Visualización:

• Command Palette: Abre la paleta de comandos. Ctrl + Shift + P
• Open View: Abre vistas específicas como Explorer, Search, etc.
• Appearance: Cambia tema, tamaño de fuente, zoom, muestra/oculta barras
• Editor Layout: Divide el editor horizontal o verticalmente
• Explorer/Search/Source Control: Atajos para abrir estas vistas
• Terminal: Muestra/oculta la terminal integrada. Ctrl + `
• Problems/Output/Debug Console: Paneles de información importantes

Menú Go - Navegación rápida:

• Go to File: Búsqueda rápida de archivos. Ctrl + P
• Go to Line: Salta a una línea específica. Ctrl + G
• Go to Symbol: Navega a funciones, clases, variables. Ctrl + Shift + O
• Go to Definition: Va a la definición de una función/variable. F12
• Back/Forward: Navega por el historial de posiciones del cursor

Menú Run - Ejecución y depuración:

• Start Debugging: Inicia el depurador. F5
• Run Without Debugging: Ejecuta sin depurar. Ctrl + F5
• Toggle Breakpoint: Añade/quita punto de interrupción. F9
• Add Configuration: Crea archivo de configuración para depuración

Menú Terminal - Terminal integrada:

• New Terminal: Abre una nueva terminal. Ctrl + Shift + `
• Split Terminal: Divide la terminal en paneles
• Run Task: Ejecuta tareas automatizadas configuradas
• Run Build Task: Ejecuta tarea de compilación. Ctrl + Shift + B

Las extensiones potencian VS Code. Para instalarlas, haz clic en el icono de extensiones en el Activity Bar o presiona Ctrl + Shift + X.

Navegación y edición:

• Ctrl + P - Búsqueda rápida de archivos
• Ctrl + Shift + P - Paleta de comandos
• Ctrl + B - Mostrar/ocultar barra lateral
• Ctrl + ` - Abrir/cerrar terminal integrada
• Ctrl + / - Comentar/descomentar línea
• Alt + ↑/↓ - Mover línea arriba/abajo
• Shift + Alt + ↑/↓ - Duplicar línea arriba/abajo
• Ctrl + D - Seleccionar siguiente ocurrencia
• Ctrl + F - Buscar en archivo actual
• Ctrl + H - Buscar y reemplazar

Gestión de ventanas:

• Ctrl + \ - Dividir editor
• Ctrl + W - Cerrar pestaña actual
• Ctrl + Tab - Cambiar entre pestañas
• Ctrl + 1/2/3 - Cambiar entre editores divididos

Multi-cursor:

• Alt + Click - Añadir cursor adicional
• Ctrl + Alt + ↑/↓ - Añadir cursor arriba/abajo
• Ctrl + Shift + L - Seleccionar todas las ocurrencias

Organización del workspace:

• Usa File > Open Folder para abrir la carpeta raíz de tu proyecto
• Guarda tu configuración de workspace con File > Save Workspace As...
• Mantén una estructura de carpetas clara y organizada
• Utiliza el archivo .vscode/settings.json para configuraciones específicas del proyecto

Configuración recomendada:

• Activa el autoguardado: File > Auto Save
• Habilita el formateo automático al guardar: "editor.formatOnSave": true
• Configura el tamaño de tabulación: "editor.tabSize": 2 o 4
• Muestra espacios en blanco: "editor.renderWhitespace": "all"

Uso de Git integrado:

• Haz clic en el icono de Source Control en el Activity Bar
• Revisa cambios con visualización lado a lado
• Realiza commits con mensajes descriptivos
• Usa ramas (branches) para nuevas funcionalidades

Snippets personalizados:

• Accede a File > Preferences > User Snippets
• Crea snippets para código que escribes frecuentemente
• Usa prefijos cortos y memorables

Emmet para HTML/CSS:

• Emmet viene integrado y acelera la escritura de HTML
• Escribe div.container>ul>li*5 y presiona Tab
• Funciona con abreviaciones CSS también

Depuración (Debugging):

• Haz clic en el icono de Run and Debug o presiona Ctrl + Shift + D
• Configura breakpoints haciendo clic en el margen izquierdo del editor
• Usa la consola de depuración para evaluar expresiones

Terminal integrada:

• Abre múltiples terminales con el botón +
• Cambia entre terminales desde el menú desplegable
• Divide terminales para trabajar en paralelo

Zen Mode para concentración:

• Actívalo con Ctrl + K Z
• Oculta todas las barras y distracciones
• Perfecto para sesiones de coding intensivas

Tasks (Tareas automatizadas):

• Crea archivo .vscode/tasks.json
• Automatiza compilación, tests, deployment, etc.
• Ejecuta con Ctrl + Shift + B

El IntelliSense no funciona:

• Verifica que tengas instalada la extensión del lenguaje
• Recarga la ventana: Developer > Reload Window
• Revisa la configuración de "editor.quickSuggestions"

VS Code está lento:

• Desactiva extensiones que no uses
• Excluye carpetas grandes de la búsqueda (node_modules, .git)
• Reduce el tamaño del historial: "workbench.editor.limit.value": 10

Git no se detecta:

• Asegúrate de tener Git instalado en tu sistema
• Configura la ruta: "git.path": "ruta/a/git"
• Reinicia VS Code después de instalar Git

Problemas con extensiones:

• Desactiva todas las extensiones y actívalas una por una
• Verifica que sean compatibles con tu versión de VS Code
• Busca extensiones alternativas si una causa problemas

Documentación oficial:

• code.visualstudio.com/docs - Documentación completa
• code.visualstudio.com/shortcuts - PDFs con todos los atajos
• marketplace.visualstudio.com - Tienda de extensiones

Comunidad y soporte:

• Stack Overflow con tag visual-studio-code
• GitHub: github.com/microsoft/vscode
• Discord y Reddit de VS Code

Cursos y tutoriales:

• Canal oficial de VS Code en YouTube
• Tutoriales interactivos en el propio VS Code
• Cursos gratuitos en plataformas educativas