Cuando empezamos a programar en PHP, una de las primeras decisiones que tenemos que tomar es qué herramienta vamos a utilizar para escribir nuestro código. Existen IDEs muy completos, como PhpStorm, NetBeans o Eclipse PDT, pero para un curso desde cero una de las opciones más equilibradas es Visual Studio Code.
Visual Studio Code, normalmente conocido como VS Code, es un editor de código gratuito, ligero, multiplataforma y muy flexible. No es un IDE exclusivo para PHP, pero gracias a sus extensiones puede convertirse en un entorno muy potente para desarrollar aplicaciones web.
En este artículo veremos por qué VS Code es una buena opción para trabajar con PHP, qué ventajas tiene para el aprendizaje y qué extensiones conviene instalar.
📹 Instalación VSCODE
¿Qué es Visual Studio Code?
Visual Studio Code es un editor de código desarrollado por Microsoft. Está disponible para Windows, macOS y Linux, por lo que resulta muy cómodo en un entorno educativo donde cada alumno puede tener un sistema operativo diferente.
A diferencia de otros IDEs más pesados, VS Code parte de una base sencilla y se puede ampliar mediante extensiones. Esto significa que podemos instalar solo lo que necesitamos para cada momento del curso.
Por ejemplo, en un proyecto PHP podemos trabajar con archivos como estos:
mi-proyecto-php/
├── index.php
├── contacto.php
├── productos.php
├── css/
│ └── estilos.css
├── js/
│ └── app.js
├── includes/
│ ├── cabecera.php
│ └── pie.php
└── README.mdDesde VS Code podemos abrir toda la carpeta del proyecto y trabajar cómodamente con todos estos archivos.
📹 Mí primer Hola Mundo
¿Por qué usar VS Code para PHP?
PHP es un lenguaje que se ejecuta normalmente en un servidor web. Es decir, nosotros escribimos el código en archivos .php, pero para ver el resultado necesitamos ejecutarlo mediante un servidor como Apache, Nginx, el servidor integrado de PHP o un entorno como XAMPP, MAMP, Laragon o Docker.
VS Code encaja muy bien en este flujo porque nos permite escribir, organizar y revisar el código de forma clara.
El flujo básico sería:
Escribir código en VS Code
↓
Guardar el archivo PHP
↓
Ejecutarlo mediante un servidor
↓
Ver el resultado en el navegador
↓
Corregir errores y volver a probarEsta forma de trabajar ayuda mucho al alumno, porque ve claramente qué papel cumple cada herramienta.
| Herramienta | Función |
|---|---|
| VS Code | Escribir y organizar el código |
| PHP | Interpretar el código del servidor |
| Apache / Nginx / servidor PHP | Servir la aplicación web |
| Navegador | Mostrar el resultado |
| MySQL / MariaDB | Almacenar los datos |
| phpMyAdmin / DBeaver / DataGrip | Gestionar la base de datos |
Ventajas de VS Code en un curso de PHP
Es gratuito
Una ventaja muy importante es que VS Code es gratuito. Esto permite que todos los alumnos puedan instalarlo sin depender de licencias.
Para un entorno educativo esto es fundamental, porque evita problemas económicos y facilita que todos trabajen con la misma herramienta.
Funciona en Windows, macOS y Linux
VS Code está disponible para los principales sistemas operativos. Esto nos permite usarlo en diferentes escenarios:
| Sistema | Entorno PHP habitual |
|---|---|
| Windows | XAMPP, Laragon, Docker |
| macOS | MAMP, XAMPP, Docker, PHP instalado con Homebrew |
| Linux | Apache, Nginx, PHP, Docker |
El editor será el mismo, aunque el servidor PHP pueda cambiar según el sistema operativo.
Es ligero y sencillo
VS Code no es tan pesado como un IDE completo. Esto hace que sea más rápido de instalar, abrir y utilizar.
Para alumnos que empiezan, esto es una ventaja importante. Una interfaz demasiado cargada puede distraer más que ayudar.
Con VS Code podemos empezar con algo muy simple:
<?php
echo "Hola mundo desde PHP";
?>Y poco a poco ir avanzando hacia proyectos más completos.
Se adapta al nivel del alumno
Otra ventaja es que podemos ir añadiendo extensiones según avanza el curso.
Al principio podemos instalar solo lo básico. Más adelante, cuando trabajemos con bases de datos, Git, depuración o Docker, podremos añadir nuevas extensiones.
Esto permite que el alumno no se vea saturado desde el primer día.
VS Code no ejecuta PHP por sí solo
Este punto es muy importante.
VS Code sirve para escribir código, pero no sustituye al servidor PHP.
Para ejecutar un archivo PHP necesitamos tener PHP instalado y, normalmente, trabajar con un servidor web.
Por ejemplo, si tenemos este archivo:
<?php
$nombre = "Ana";
echo "Hola, " . $nombre;
?>No basta con abrirlo directamente en el navegador como si fuera un archivo HTML. Necesitamos ejecutarlo desde un servidor.
Una opción rápida es usar el servidor integrado de PHP. Desde la carpeta del proyecto podemos escribir:
php -S localhost:8000Después abrimos el navegador y accedemos a:
http://localhost:8000Para proyectos más completos podemos usar Apache, Nginx, XAMPP, MAMP, Laragon o Docker.
Extensiones recomendadas para PHP en VS Code
Una de las grandes ventajas de VS Code es su sistema de extensiones. A continuación veremos algunas de las más útiles para trabajar con PHP.
📹 Instalación de Extensiones o Plugins
PHP Intelephense
PHP Intelephense es una de las extensiones más importantes para programar en PHP con VS Code.
Añade funciones como:
| Función | Utilidad |
|---|---|
| Autocompletado | Ayuda a escribir funciones, variables, clases y métodos |
| Detección de errores | Marca posibles errores antes de ejecutar |
| Ir a definición | Permite saltar a donde está definida una función o clase |
| Ayuda contextual | Muestra información sobre parámetros y métodos |
| Mejor soporte para proyectos grandes | Entiende mejor la estructura del código |
Esta extensión debería instalarse desde el principio del curso.
Ejemplo:
<?php
function saludar($nombre) {
return "Hola, " . $nombre;
}
echo saludar("Laura");
?>Con PHP Intelephense, VS Code nos ayudará a detectar funciones, parámetros y posibles errores de escritura.
PHP Debug
PHP Debug permite conectar VS Code con Xdebug, una herramienta de depuración para PHP.
Depurar significa ejecutar el programa paso a paso para ver qué está ocurriendo realmente. Esto es muy útil cuando un programa no falla por sintaxis, pero no hace lo que esperamos.
Por ejemplo:
<?php
$edad = 17;
if ($edad >= 18) {
echo "Puede acceder";
} else {
echo "No puede acceder";
}
?>Con depuración podemos detener el programa antes del if y comprobar el valor real de la variable $edad.
PHP Debug permite:
| Función | Utilidad |
|---|---|
| Puntos de interrupción | Parar el programa en una línea concreta |
| Ejecución paso a paso | Ver cómo avanza el programa |
| Inspección de variables | Comprobar valores durante la ejecución |
| Depuración de formularios | Ver datos enviados por GET o POST |
| Detección de errores lógicos | Encontrar fallos que no son de sintaxis |
No es necesario instalarla el primer día, pero sí es muy recomendable cuando los alumnos ya trabajen con formularios, funciones, sesiones y bases de datos.
PHP DocBlocker
PHP DocBlocker ayuda a crear comentarios de documentación para funciones, clases y métodos.
Por ejemplo, si tenemos esta función:
function calcularTotal($precio, $cantidad) {
return $precio * $cantidad;
}Podemos documentarla así:
/**
* Calcula el precio total de una compra.
*
* @param float $precio
* @param int $cantidad
* @return float
*/
function calcularTotal($precio, $cantidad) {
return $precio * $cantidad;
}Esta extensión resulta útil cuando empezamos a trabajar con funciones y programación orientada a objetos.
Documentar el código es una buena práctica que ayuda a que otros programadores puedan entender mejor nuestro proyecto.
Prettier
Prettier es una extensión para formatear código.
En proyectos PHP no solo escribimos PHP. También solemos trabajar con HTML, CSS y JavaScript. Prettier ayuda a mantener estos archivos ordenados y con un formato consistente.
Por ejemplo, puede ayudarnos con código HTML como este:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página PHP</title>
</head>
<body>
<h1>Bienvenido</h1>
</body>
</html>Su principal utilidad es que todos los alumnos mantengan una estructura más limpia y parecida.
GitLens
GitLens mejora la integración de Git dentro de VS Code.
Cuando los alumnos empiecen a trabajar con repositorios, entregas en GitHub o control de versiones, esta extensión resulta muy útil.
Permite ver:
| Función | Utilidad |
|---|---|
| Historial de cambios | Consultar modificaciones realizadas |
| Autor de una línea | Saber quién cambió una parte del código |
| Comparación de versiones | Revisar diferencias entre archivos |
| Información del repositorio | Ver ramas, commits y cambios pendientes |
No es imprescindible para empezar con PHP, pero sí muy recomendable cuando el curso avance hacia proyectos reales.
Material Icon Theme
Material Icon Theme cambia los iconos de archivos y carpetas dentro de VS Code.
Aunque pueda parecer una extensión estética, en clase resulta bastante útil porque ayuda al alumno a identificar rápidamente los tipos de archivos.
Por ejemplo:
| Archivo | Tipo |
|---|---|
index.php | Archivo PHP |
estilos.css | Archivo CSS |
app.js | Archivo JavaScript |
conexion.sql | Archivo SQL |
README.md | Archivo Markdown |
Visualmente ayuda a que los proyectos sean más fáciles de entender.
Auto Rename Tag
Auto Rename Tag es una extensión muy útil cuando trabajamos con HTML.
Cuando cambiamos una etiqueta de apertura, la extensión modifica automáticamente la etiqueta de cierre.
Por ejemplo, si cambiamos:
<h1>Título</h1>por:
<h2>Título</h2>La extensión nos ayuda a evitar que una etiqueta quede mal cerrada.
Esto es especialmente útil en proyectos PHP donde mezclamos HTML con código PHP.
Error Lens
Error Lens muestra los errores y avisos directamente en la línea de código.
Esto puede ayudar mucho a los alumnos, porque no tienen que buscar el error en un panel inferior. Lo ven directamente en el lugar donde ocurre.
Resulta útil cuando ya tenemos instaladas extensiones de análisis como PHP Intelephense.
SQLTools
SQLTools permite trabajar con bases de datos desde VS Code.
Con esta extensión, y su driver correspondiente para MySQL o MariaDB, podemos conectarnos a una base de datos, lanzar consultas y revisar resultados.
Aun así, para alumnos que empiezan puede ser más didáctico usar primero phpMyAdmin, porque muestra visualmente las tablas, campos y relaciones.
Una progresión recomendable sería:
| Nivel | Herramienta |
|---|---|
| Inicial | phpMyAdmin |
| Medio | DBeaver |
| Avanzado | SQLTools en VS Code o DataGrip |
Extensiones recomendadas según el momento del curso
No conviene instalar todas las extensiones desde el primer día. Es mejor ir incorporándolas según avance el curso.
Primeros días del curso
| Extensión | Motivo |
|---|---|
| PHP Intelephense | Ayuda principal para programar en PHP |
| Material Icon Theme | Mejora la visualización de archivos |
| Prettier | Formatea HTML, CSS y JavaScript |
Cuando trabajemos con HTML, CSS y formularios
| Extensión | Motivo |
|---|---|
| Auto Rename Tag | Ayuda con etiquetas HTML |
| Live Server | Vista previa de HTML, CSS y JS |
| HTML CSS Support | Ayuda con clases CSS |
Cuando trabajemos con bases de datos
| Extensión | Motivo |
|---|---|
| SQLTools | Consultas SQL desde VS Code |
| SQLTools MySQL/MariaDB Driver | Conexión con MySQL o MariaDB |
| PHP Intelephense | Ayuda con código PHP de conexión |
Cuando trabajemos con Git y GitHub
| Extensión | Motivo |
|---|---|
| GitLens | Historial y revisión de cambios |
| GitHub Pull Requests | Trabajo con repositorios de GitHub |
Cuando trabajemos con depuración
| Extensión | Motivo |
|---|---|
| PHP Debug | Depuración con Xdebug |
| Error Lens | Visualización clara de errores |
Cuando trabajemos con Docker
| Extensión | Motivo |
|---|---|
| Docker | Gestión de contenedores |
| Dev Containers | Desarrollo dentro de contenedores |
Configuración básica recomendada
Podemos configurar VS Code para que sea más cómodo trabajar con PHP.
Para ello, abrimos la configuración en formato JSON y podemos añadir algo similar a esto:
{
"editor.formatOnSave": true,
"editor.wordWrap": "on",
"files.autoSave": "afterDelay",
"php.suggest.basic": false
}Veamos qué hace cada opción:
| Opción | Función |
|---|---|
editor.formatOnSave | Formatea el código al guardar |
editor.wordWrap | Ajusta líneas largas a la pantalla |
files.autoSave | Guarda automáticamente después de un breve tiempo |
php.suggest.basic | Desactiva sugerencias básicas de PHP para evitar duplicados con Intelephense |
Esta configuración puede variar según el nivel del alumno y las extensiones instaladas.
Estructura sencilla para un proyecto PHP
Para empezar, podemos usar una estructura muy simple:
curso-php/
├── index.php
├── contacto.php
├── productos.php
├── includes/
│ ├── cabecera.php
│ ├── menu.php
│ └── pie.php
├── css/
│ └── estilos.css
├── js/
│ └── app.js
└── img/
└── logo.pngEsta estructura permite explicar conceptos básicos como:
| Carpeta o archivo | Uso |
|---|---|
index.php | Página principal |
includes/ | Fragmentos reutilizables |
css/ | Hojas de estilo |
js/ | Archivos JavaScript |
img/ | Imágenes del proyecto |
Más adelante, cuando el proyecto crezca, podremos usar una estructura más organizada:
proyecto-php/
├── public/
│ ├── index.php
│ ├── css/
│ ├── js/
│ └── img/
├── config/
│ └── conexion.php
├── modelos/
│ └── Producto.php
├── controladores/
│ └── ProductoController.php
├── vistas/
│ └── productos/
│ ├── listar.php
│ ├── crear.php
│ └── editar.php
└── README.mdEsta segunda estructura ya nos acerca a proyectos más profesionales.
Ejemplo básico en VS Code
Podemos crear un archivo llamado index.php con este contenido:
<?php
$titulo = "Mi primera página con PHP";
$mensaje = "Estoy aprendiendo a programar aplicaciones web.";
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title><?php echo $titulo; ?></title>
</head>
<body>
<h1><?php echo $titulo; ?></h1>
<p><?php echo $mensaje; ?></p>
</body>
</html>Este ejemplo es interesante porque muestra una de las características habituales de PHP: la mezcla de código PHP con HTML.
Desde VS Code escribimos el código, pero para verlo correctamente tendremos que ejecutarlo desde un servidor PHP.
Recomendación para clase
Para un curso de PHP desde cero, mi recomendación sería empezar con pocas extensiones:
| Extensión | Prioridad |
|---|---|
| PHP Intelephense | Obligatoria |
| Material Icon Theme | Recomendada |
| Prettier | Recomendada |
| Auto Rename Tag | Recomendada cuando usemos HTML |
| GitLens | Cuando empecemos con Git |
| PHP Debug | Cuando empecemos con depuración |
| SQLTools | Cuando avancemos con bases de datos |
| Docker | Cuando trabajemos con contenedores |
No es buena idea instalar demasiadas extensiones al principio. Puede parecer que estamos mejorando el entorno, pero en realidad podemos confundir al alumno.
Lo ideal es que el entorno crezca al mismo ritmo que el curso.
Conclusión
Visual Studio Code es una herramienta muy adecuada para aprender PHP porque combina sencillez, potencia y flexibilidad.
Nos permite empezar con scripts básicos y avanzar poco a poco hacia proyectos más completos con HTML, CSS, JavaScript, formularios, sesiones, bases de datos, Git, depuración y Docker.
Pero conviene recordar una idea importante:
VS Code no es el servidor. VS Code es la herramienta donde escribimos el código. PHP necesita un entorno de ejecución para funcionar.
Por eso, en un curso de PHP deberíamos enseñar siempre la relación entre el editor, el servidor, el lenguaje y el navegador.
El objetivo no es solamente aprender a usar VS Code. El objetivo es entender el proceso completo de desarrollo de una aplicación web con PHP:
Editor → Código PHP → Servidor → Navegador → Pruebas → Corrección → Nueva versión
