Guía de Visual Studio Code Nivel Medio: Optimiza tu Flujo de Desarrollo por Santiago Soñora

“Hola, mundo” en Visual Studio Code

El 'Hola, mundo' en VSCode es abrir un archivo, escribir código y ejecutarlo desde el terminal integrado. A nivel intermedio, podrías configurarlo para usar un runner o task específico para ejecutarlo.

📋 Copiar

print("Hola, mundo")  # en un archivo .py

Resultado:

Output

Hola, mundo

Comandos básicos

Familiarizarse con estos comandos es esencial para interactuar eficientemente con Visual Studio Code:

Abrir carpeta de proyecto
📋 Copiar
```
File → Open Folder
```
Permite seleccionar una carpeta que se convierte en el espacio de trabajo del proyecto, fundamental para gestionar configuraciones de workspace.
Terminal integrada
📋 Copiar
```
Ctrl + `
```
Abre una o múltiples terminales dentro de VSCode, permitiendo ejecutar comandos, scripts o tasks sin salir del editor.
Buscar en archivos
📋 Copiar
```
Ctrl + Shift + F
```
Permite buscar texto o expresiones regulares en todos los archivos del proyecto. Ideal para refactoring o análisis de código.
Reemplazar en archivos
📋 Copiar
```
Ctrl + Shift + H
```
Permite buscar y reemplazar texto en múltiples archivos del proyecto simultáneamente.
Instalar extensiones
📋 Copiar
```
Ctrl + Shift + X
```
Abre el panel de extensiones para añadir soporte para lenguajes, herramientas de productividad, temas, linters y formatters.
Ir a archivo
📋 Copiar
```
Ctrl + P
```
Abre un buscador rápido para moverse entre archivos del proyecto. Tip: usa '>' para comandos o '#' para símbolos.
Abrir Paleta de Comandos
📋 Copiar
```
Ctrl + Shift + P
```
Accede rápidamente a todas las funcionalidades de VSCode, extensiones y comandos. Una herramienta clave para la productividad.
Formatear documento
📋 Copiar
```
Shift + Alt + F
```
Aplica un formato limpio al archivo según el lenguaje y las reglas configuradas, a menudo usando formatters externos (Prettier, Black, etc.).
Modo de depuración
📋 Copiar
```
F5
```
Inicia una sesión de depuración según la configuración en `launch.json`, permitiendo establecer breakpoints, inspeccionar variables y ejecutar código paso a paso.
Selección Múltiple (Multi-cursor)
📋 Copiar
```
Alt + Click o Ctrl + Alt + Down/Up
```
Permite colocar múltiples cursores para editar varias líneas o instancias de texto simultáneamente, ahorrando tiempo en tareas repetitivas.
Ir a Definición
📋 Copiar
```
F12
```
Navega directamente al código fuente donde una función, variable, clase o símbolo está definido. Imprescindible para entender bases de código.
Vista Rápida de Definición (Peek Definition)
📋 Copiar
```
Alt + F12
```
Muestra la definición de un símbolo en una ventana emergente dentro del archivo actual, sin tener que navegar a otro archivo.
Renombrar Símbolo
📋 Copiar
```
F2
```
Permite renombrar una variable, función, clase, etc., en todo el ámbito donde se utiliza, asegurando consistencia en el código.
Formatear Selección
📋 Copiar
```
Ctrl + K Ctrl + F
```
Formatea únicamente el bloque de código seleccionado, útil cuando no quieres formatear todo el archivo.
Mostrar Vista de Control de Código Fuente
📋 Copiar
```
Ctrl + Shift + G
```
Accede a la interfaz gráfica integrada para gestionar cambios de Git: ver staged/unstaged changes, hacer commits, push/pull, etc.

Conceptos Clave

Comprender estos conceptos fundamentales te ayudará a dominar Visual Studio Code de forma más organizada y eficiente:

Workspaces y Settings:

Comprender la diferencia entre la configuración global de usuario (`settings.json` global) y la configuración específica de cada proyecto (`.vscode/settings.json` en la carpeta del proyecto). Esto permite adaptar VSCode a las necesidades de cada proyecto sin afectar otros.
Tareas (Tasks):

Configurar y ejecutar scripts externos o acciones automatizadas (como compiladores, linters, test runners, etc.) directamente desde VSCode utilizando `tasks.json`. Permite automatizar flujos de trabajo repetitivos.
Configuraciones de Lanzamiento (Launch Configurations):

Definir cómo se depura tu código para diferentes entornos, lenguajes o frameworks mediante `launch.json`. Permite especificar argumentos, variables de entorno, rutas de programa, etc.
Integración Avanzada de Extensiones y Herramientas:

Configurar extensiones clave como linters (ESLint, Pylint), formatters (Prettier, Black) y otras herramientas específicas para que se ejecuten automáticamente o bajo demanda, mejorando la calidad y el estilo del código.
Control de Código Fuente Integrado (Git):

Utilizar eficientemente la vista de Control de Código Fuente para realizar operaciones comunes de Git como staging selectivo, commits, branching, merging simple, y gestión de remotos directamente desde la interfaz gráfica.

Casos de uso

Algunos ejemplos de aplicaciones prácticas donde se utiliza Visual Studio Code:

Desarrollo web full-stack:

Configurar VSCode con extensiones para frontend (HTML, CSS, JavaScript, frameworks como React, Angular, Vue) y backend (Node.js, Python/Django/Flask, Ruby/Rails) para un flujo de trabajo integrado.
Configuración de entornos de desarrollo específicos:

Adaptar VSCode para trabajar con tecnologías específicas, como contenedores (Docker), bases de datos, o plataformas cloud, utilizando extensiones y configuraciones de workspace.
Automatización de flujos de trabajo con Tasks:

Configurar y ejecutar tareas para automatizar builds, pruebas unitarias/de integración, despliegues simples, o la ejecución de scripts de mantenimiento directamente desde el editor.
Depuración de aplicaciones complejas:

Configurar `launch.json` para depurar setups más elaborados, como aplicaciones cliente-servidor, microservicios, o código que requiere variables de entorno específicas.
Colaboración en proyectos con control de versiones avanzado:

Utilizar la integración de Git para flujos de trabajo colaborativos: gestionar ramas, resolver conflictos básicos, comparar cambios y realizar code reviews (con extensiones como Pull Request GitHub).

Consejos para Principiantes

Aquí tienes algunas recomendaciones para facilitar tus inicios en Visual Studio Code:

Personaliza tus Atajos de Teclado:

Dedica tiempo a modificar o crear combinaciones de teclas en `keybindings.json` para las acciones que realizas con más frecuencia. Esto acelera enormemente la navegación y edición.
Domina la Paleta de Comandos (`Ctrl+Shift+P`):

Acostúmbrate a usar la Paleta de Comandos para acceder a cualquier funcionalidad. Es la forma más rápida de ejecutar comandos sin buscar en menús.
Configura tus Settings de Usuario y Workspace:

Explora a fondo las opciones de configuración en `settings.json` (tanto de usuario como de workspace) para adaptar el comportamiento del editor, el terminal, el editor de texto, etc., a tus preferencias y las del proyecto.
Explora y Configura Extensiones Clave:

No te limites a instalar extensiones; investiga sus configuraciones. Muchas extensiones de lenguaje, linters y formatters tienen opciones avanzadas que puedes ajustar en `settings.json`.
Utiliza Tasks para Automatizar:

Identifica tareas repetitivas en tu flujo de trabajo (compilar, testear, deployar) y configúralas en `tasks.json`. Podrás ejecutarlas con un atajo de teclado o desde la Paleta de Comandos.
Aprovecha al máximo la integración con Git:

Acostúmbrate a usar la vista de Control de Código Fuente para gestionar tus cambios. Aprende a hacer staging parcial, ver historial, comparar ramas, etc., directamente desde VSCode.

Herramientas relacionadas

Si te interesa Visual Studio Code, también podrías explorar estas herramientas:

Recursos útiles

Amplía tus conocimientos con estos enlaces y materiales: