Configuración de Visual Studio Code para Desarrollo con Docker

Introducción

En este tutorial instalaremos y configuraremos Visual Studio Code con las extensiones necesarias para desarrollar proyectos Laravel en un entorno Docker. También aprenderemos a conectarnos a nuestra máquina virtual mediante SSH para trabajar con el código dentro del contenedor.

Paso 1: Verificar el Estado de los Contenedores

1.1 Verificar servicios activos

# Listar contenedores en ejecución
docker compose ps

Salida esperada:

NAME               IMAGE               COMMAND                  SERVICE   CREATED         STATUS         PORTS
laravel_app        laravel-app         "docker-php-entrypoi…"   app       2 hours ago     Up 2 hours     9000/tcp
laravel_nginx      nginx:alpine        "/docker-entrypoint.…"   nginx     2 hours ago     Up 2 hours     0.0.0.0:8000->80/tcp
laravel_db         mysql:8.0           "docker-entrypoint.s…"   db        2 hours ago     Up 2 hours     0.0.0.0:3306->3306/tcp

1.2 Verificar acceso a la aplicación

Abrir en el navegador:

http://localhost:8000

o usando el dominio configurado en el archivo hosts.

Paso 2: Instalar Visual Studio Code

2.1 Descargar VS Code

Desde la página oficial:

https://code.visualstudio.com/download

Desde terminal (Windows - usando PowerShell):

# Usando winget (Windows Package Manager)
winget install Microsoft.VisualStudioCode

Desde terminal (Linux - Ubuntu/Debian):

# Instalar mediante Snap
sudo snap install code --classic

# O mediante APT
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/
sudo sh -c 'echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/trusted.gpg.d/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list'
sudo apt update
sudo apt install code

Desde terminal (macOS):

# Usando Homebrew
brew install --cask visual-studio-code

2.2 Instalación paso a paso (Windows)

Ejecutar el instalador descargado
Aceptar los términos de licencia
Seleccionar la ruta de instalación (por defecto)
Seleccionar componentes adicionales:
- ✅ Crear acceso directo en el escritorio
- ✅ Agregar "Abrir con Code" al menú contextual
- ✅ Agregar "Code" a la variable PATH
Hacer clic en Instalar
Finalizar la instalación

Paso 3: Instalar Extensiones para PHP/Laravel

3.1 Abrir Visual Studio Code

# Desde terminal
code .

3.2 Acceder al mercado de extensiones

Hacer clic en el ícono de Extensiones (cuadro cuadrado) en la barra lateral izquierda
O usar el atajo: Ctrl+Shift+X

3.3 Extensiones esenciales para PHP

Extensión	Nombre	Descripción
PHP Intelephense	`bmewburn.vscode-intelephense-client`	Autocompletado avanzado, refactorización, análisis de código
PHP Extension Pack	`felixfbecker.php-pack`	Paquete de extensiones PHP (instalación recomendada)
PHP Namespace Resolver	`mehedidracula.php-namespace-resolver`	Importación automática de clases usando `Ctrl+Enter`

Instalación desde terminal:

code --install-extension bmewburn.vscode-intelephense-client
code --install-extension felixfbecker.php-pack
code --install-extension mehedidracula.php-namespace-resolver

3.4 Extensiones para Laravel (recomendadas 2024-2026)

Extensión	Nombre	Descripción
Laravel Extension Pack	`onecentlin.laravel-extension-pack`	Paquete completo para Laravel
Laravel Blade Snippets	`onecentlin.laravel-blade`	Snippets para Blade
Laravel Artisan	`ryannaddy.laravel-artisan`	Ejecuta comandos Artisan desde VS Code
Blade Formatter	`shufo.vscode-blade-formatter`	Formateador de archivos Blade

3.5 Extensiones para Plantillas Blade

# Instalación desde terminal
code --install-extension onecentlin.laravel-blade
code --install-extension shufo.vscode-blade-formatter

3.6 Extensiones de Formateo

Extensión	Nombre	Descripción
Prettier	`esbenp.prettier-vscode`	Formateo automático de código
ESLint	`dbaeumer.vscode-eslint`	Linting para JavaScript
EditorConfig	`editorconfig.editorconfig`	Consistencia en estilos de código

3.7 Extensiones de Utilidad

Extensión	Nombre	Descripción
Docker	`ms-azuretools.vscode-docker`	Gestión de contenedores desde VS Code
Remote - SSH	`ms-vscode-remote.remote-ssh`	Conexión SSH a máquinas remotas
GitLens	`eamodio.gitlens`	Visualización avanzada de Git
Error Lens	`usernamehw.errorlens`	Destaca errores en el código

3.8 Instalación masiva desde terminal:

# Extensiones PHP/Laravel
code --install-extension bmewburn.vscode-intelephense-client
code --install-extension felixfbecker.php-pack
code --install-extension mehedidracula.php-namespace-resolver
code --install-extension onecentlin.laravel-extension-pack
code --install-extension onecentlin.laravel-blade
code --install-extension ryannaddy.laravel-artisan

# Formateo
code --install-extension esbenp.prettier-vscode
code --install-extension shufo.vscode-blade-formatter

# Utilidades
code --install-extension ms-azuretools.vscode-docker
code --install-extension ms-vscode-remote.remote-ssh
code --install-extension eamodio.gitlens

Paso 4: Configurar VS Code para PHP

4.1 Crear configuraciones de espacio de trabajo

Crear archivo .vscode/settings.json en la raíz del proyecto:

mkdir -p .vscode
nano .vscode/settings.json

{
  "php.validate.executablePath": "php",
  "php.suggest.basic": false,
  "intelephense.files.maxSize": 5000000,
  "intelephense.files.exclude": [
    "**/vendor/**",
    "**/node_modules/**",
    "**/storage/**"
  ],
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[php]": {
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
  },
  "[blade]": {
    "editor.defaultFormatter": "shufo.vscode-blade-formatter"
  },
  "files.associations": {
    "*.blade.php": "blade"
  },
  "prettier.singleQuote": true,
  "prettier.semi": true,
  "prettier.useTabs": false,
  "prettier.tabWidth": 2
}

4.2 Crear recomendaciones de extensiones

Crear .vscode/extensions.json:

{
  "recommendations": [
    "bmewburn.vscode-intelephense-client",
    "onecentlin.laravel-extension-pack",
    "esbenp.prettier-vscode",
    "ms-azuretools.vscode-docker",
    "shufo.vscode-blade-formatter"
  ]
}

Paso 5: Conectar VS Code a la Máquina Virtual

5.1 Verificar dirección IP del host

# En Linux/macOS
ip addr show
# o
ifconfig

# En Windows (PowerShell)
ipconfig

# Buscar la IP de la máquina virtual (ej: 192.168.1.200)

5.2 Configurar Remote - SSH

Instalar la extensión Remote - SSH (ms-vscode-remote.remote-ssh)
Presionar Ctrl+Shift+P y buscar Remote-SSH: Connect to Host...
Seleccionar Add New SSH Host...
Ingresar: ssh usuario@192.168.x.x
Seleccionar el archivo de configuración SSH (generalmente ~/.ssh/config)
Conectarse ingresando la contraseña

5.3 Configuración SSH avanzada

Crear/editar ~/.ssh/config:

Host laravel-dev
    HostName 192.168.1.200
    User tu_usuario
    IdentityFile ~/.ssh/id_rsa
    ForwardAgent yes

5.4 Abrir proyecto remoto

# Conectarse y abrir el directorio del proyecto
code --folder-uri vscode-remote://ssh-remote+laravel-dev/home/udemy/laravel

Paso 6: Configurar Docker en VS Code

6.1 Extensión Docker

Instalar la extensión Docker (ms-azuretools.vscode-docker)
En la barra lateral, aparecerá el ícono de Docker
Ver los contenedores activos:
- laravel_app
- laravel_nginx
- laravel_db

6.2 Comandos útiles desde VS Code

# Desde el panel de Docker
- Hacer clic derecho en un contenedor → "Start" / "Stop"
- "Attach Shell" para abrir una terminal
- "View Logs" para ver logs

Paso 7: Configuración de Debug para PHP

7.1 Crear configuración de debug

Crear .vscode/launch.json:

mkdir -p .vscode
nano .vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Listen for Xdebug",
      "type": "php",
      "request": "launch",
      "port": 9003,
      "pathMappings": {
        "/var/www/html": "${workspaceFolder}"
      }
    },
    {
      "name": "Launch currently open script",
      "type": "php",
      "request": "launch",
      "program": "${file}",
      "cwd": "${fileDirname}",
      "port": 9003
    }
  ]
}

7.2 Configurar Xdebug en el contenedor

Agregar al docker-compose.yml:

  app:
    environment:
      - XDEBUG_MODE=debug
      - XDEBUG_CONFIG=client_host=host.docker.internal
    extra_hosts:
      - "host.docker.internal:host-gateway"

Paso 8: Atajos de Teclado Útiles en VS Code

Atajo	Acción
`Ctrl+Shift+P`	Comandos de VS Code
`Ctrl+P`	Buscar archivo
`Ctrl+Shift+F`	Buscar en archivos
`Ctrl+Enter`	Importar clase (PHP Namespace)
`F12`	Ir a definición
`Shift+F12`	Ver referencias
`Ctrl+Shift+` ` \| Abrir terminal integrada \|
`Ctrl+K S`	Guardar todo
`Ctrl+Shift+B`	Ejecutar tarea de build

Paso 9: Snippets para Laravel

9.1 Crear snippets personalizados

Crear .vscode/php.code-snippets:

{
  "Laravel Controller": {
    "prefix": "controller",
    "body": [
      "<?php",
      "",
      "namespace App\\Http\\Controllers;",
      "",
      "use Illuminate\\Http\\Request;",
      "",
      "class ${1:ControllerName} extends Controller",
      "{",
      "    public function index()",
      "    {",
      "        return view('${2:view-name}');",
      "    }",
      "}"
    ],
    "description": "Crea un controlador Laravel"
  },
  "Laravel Migration": {
    "prefix": "migration",
    "body": [
      "<?php",
      "",
      "use Illuminate\\Database\\Migrations\\Migration;",
      "use Illuminate\\Database\\Schema\\Blueprint;",
      "use Illuminate\\Support\\Facades\\Schema;",
      "",
      "return new class extends Migration",
      "{",
      "    public function up()",
      "    {",
      "        Schema::create('${1:table}', function (Blueprint \$table) {",
      "            \$table->id();",
      "            \$table->timestamps();",
      "        });",
      "    }",
      "",
      "    public function down()",
      "    {",
      "        Schema::dropIfExists('${1:table}');",
      "    }",
      "};"
    ],
    "description": "Crea una migración Laravel"
  }
}

16- Configuración de Visual Studio Code para Desarrollo con Docker