Visual Studio Code

Guía completa de instalación, configuración y extensiones esenciales

¿Qué es Visual Studio Code?

Visual Studio Code es un editor de código fuente desarrollado por Microsoft. Es gratuito, de código abierto y cuenta con soporte para debugging, control de versiones Git integrado, resaltado de sintaxis y una enorme cantidad de extensiones.

Instalación de Visual Studio Code

Paso 1: Descargar VS Code

Visita la página oficial de Visual Studio Code y descarga la versión compatible con tu sistema operativo.

Paso 2: Ejecutar el instalador

Ejecuta el archivo descargado y sigue el asistente de instalación. En Windows, se recomienda marcar "Add to PATH" para mayor comodidad.

Paso 3: Configuración inicial

Al abrir VS Code por primera vez, selecciona tu tema preferido y configura los ajustes básicos según tus necesidades.

Paso 4: Instalar extensiones esenciales

Accede a la pestaña de extensiones (Ctrl+Shift+X) e instala las extensiones recomendadas para tu stack de desarrollo.

Configuración Básica

Abrir VS Code desde terminal

  • En Windows: code .
  • En Mac/Linux: code .
  • Para abrir un archivo específico: code archivo.php

Configuración de settings.json

Accede a la configuración con Ctrl+, y haz clic en el icono de "Open Settings (JSON)" en la esquina superior derecha:

Archivo → Preferencias → Configuración

Configuración recomendada para desarrollo web

Ejemplo de settings.json:

{
    "editor.fontSize": 14,
    "editor.tabSize": 2,
    "editor.wordWrap": "on",
    "files.autoSave": "afterDelay",
    "emmet.includeLanguages": {
        "php": "html"
    },
    "html.format.indentInnerHtml": true,
    "css.format.enable": true,
    "php.validate.executablePath": "C:/xampp/php/php.exe"
}

Extensiones Esenciales para Desarrollo Web

Extensiones para PHP

  • PHP Intelephense - Autocompletado inteligente para PHP
  • PHP Debug - Depuración de código PHP
  • PHP Server - Servidor PHP integrado

Extensiones para HTML/CSS

  • Live Server - Servidor local con recarga automática
  • Auto Rename Tag - Renombra etiquetas HTML automáticamente
  • CSS Peek - Navegación rápida a definiciones CSS

Extensiones de Productividad

  • GitLens - Mejora la integración con Git
  • Prettier - Formateo automático de código
  • Bracket Pair Colorizer - Colorea pares de corchetes
  • Material Icon Theme - Iconos modernos para el explorador

Atajos de Teclado Importantes

Navegación y Edición

Ctrl + P Abrir archivo rápido
Ctrl + Shift + P Paleta de comandos
Ctrl + ` Abrir terminal integrado
Ctrl + B Mostrar/ocultar explorador

Edición de Código

Alt + ↑/↓ Mover línea
Ctrl + D Seleccionar siguiente ocurrencia
Ctrl + / Comentar/descomentar línea
F12 Ir a definición

Integración con XAMPP

Configurar PHP en VS Code

Para usar XAMPP con VS Code, configura la ruta del ejecutable de PHP:

En settings.json:

{
    "php.validate.executablePath": "C:/xampp/php/php.exe",
    "php.suggest.basic": true
}

Depuración con Xdebug

Configura Xdebug en XAMPP y VS Code para debugging:

Configuración de launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9000,
            "pathMappings": {
                "/var/www/html": "${workspaceFolder}"
            }
        }
    ]
}

Solución de Problemas Comunes

Extensiones no funcionan

Si las extensiones no cargan correctamente:

  • Reinicia VS Code
  • Verifica que la extensión sea compatible con tu versión
  • Revisa la consola de desarrollador (Ctrl+Shift+I)

Terminal no se abre

Si el terminal integrado no funciona:

  • Verifica que tu shell esté configurado correctamente
  • En Windows, prueba cambiando entre CMD, PowerShell o Git Bash
  • Reinicia VS Code

Autocompletado no funciona

Si IntelliSense no sugiere código:

Pasos para solucionar problemas de autocompletado

Paso 1: Verificar configuración de lenguaje

Asegúrate de que el archivo tenga la extensión correcta y VS Code reconozca el lenguaje.

En la esquina inferior derecha, verifica que muestre el lenguaje correcto (PHP, JavaScript, etc.)

Paso 2: Reinstalar extensiones de lenguaje

Desinstala y reinstala las extensiones específicas del lenguaje:

  • Para PHP: PHP Intelephense
  • Para JavaScript: ES6 Snippets
  • Para HTML: HTML CSS Support
Paso 3: Limpiar caché de VS Code

Cierra VS Code y elimina la carpeta de caché:

En Windows:
%APPDATA%\Code\Cache
En Mac:
~/Library/Application Support/Code/Cache
Paso 4: Verificar configuración de IntelliSense

En settings.json, asegúrate de que IntelliSense esté habilitado:

{
    "editor.quickSuggestions": {
        "other": true,
        "comments": false,
        "strings": true
    },
    "editor.suggestOnTriggerCharacters": true,
    "editor.acceptSuggestionOnEnter": "on"
}

Flujo de Trabajo Recomendado

1. Configuración del Workspace

Crea un workspace para tu proyecto y configura las extensiones específicas necesarias.

2. Uso de Snippets

Aprovecha los snippets integrados y crea los tuyos propios para código repetitivo.

3. Integración con Git

Usa el control de versiones integrado para gestionar cambios en tu código.

4. Debugging

Configura puntos de interrupción y usa el debugger integrado para encontrar errores.