Instalación de Visual Studio Code
usamos para desarrollar con WordPress, cómo descargarlo e instalarlo paso a paso
en Windows, cómo abrir tu primer proyecto y cómo instalar extensiones de PHP
para trabajar cómodamente. Al terminar esta lección vas a tener VS Code listo
para editar archivos de tu sitio WordPress.
¿Qué es Visual Studio Code y por qué lo necesitás?
En la lección anterior instalamos Laragon, que es el motor que
hace funcionar WordPress en tu computadora. Ahora necesitamos una herramienta
para ver y editar el código de nuestro sitio: los archivos PHP,
CSS, HTML y JavaScript que forman WordPress y tu plantilla.
Visual Studio Code (o VS Code para acortar) es un editor de
código gratuito creado por Microsoft. Es el editor más popular
del mundo para desarrollo web — lo usan más de 15 millones de programadores.
Es liviano, rápido y tiene miles de extensiones que lo hacen súper poderoso.
¿Por qué VS Code y no otro editor?
| Editor | Ventaja | Desventaja | ¿Lo usamos? |
|---|---|---|---|
| ✅ Visual Studio Code | Gratuito, liviano, extensiones para PHP/WordPress, IA integrada (Copilot), multiplataforma | Puede sentirse abrumador al inicio (muchas opciones) | Sí — este usamos |
| Sublime Text | Ultra rápido, interfaz limpia | No es gratuito (licencia $99), menos extensiones | No |
| Notepad++ | Gratuito, simple | Solo Windows, sin autocompletado inteligente, se siente anticuado | No |
| PhpStorm | Potente para PHP, todo integrado | De pago ($249/año), pesado, consume mucha RAM | No |
| Bloc de notas de Windows | Ya viene instalado | No tiene nada: sin colores, sin archivos múltiples, sin extensiones | Jamás ❌ |
gratuito, funciona en Windows/Mac/Linux, tiene soporte nativo para PHP, CSS,
HTML y JavaScript, y con la extensión GitHub Copilot tenés un
asistente de inteligencia artificial que te ayuda a programar. No hay mejor
opción para desarrollo WordPress.
Requisitos previos
| Requisito | Detalle |
|---|---|
| Sistema operativo | Windows 10 o superior (64 bits) |
| Espacio en disco | Mínimo 500 MB libres |
| RAM | 4 GB mínimo (8 GB recomendado) |
| Conexión a internet | Solo para descargar. Después funciona offline |
| Laragon instalado | De la lección anterior — necesitamos la carpeta C:\laragon\www\ |
Paso a paso — Descargá Visual Studio Code
Buscá «vsc» en Google
o
o
g
l
e
Imágenes
Vídeos
Noticias
Abrí Google y escribí «vsc» (las iniciales de Visual Studio
Code). El primer resultado es el sitio oficial:
code.visualstudio.com. Hacé clic ahí.
VS Code de otros sitios. La versión oficial es gratuita, no tiene virus
ni publicidad.
Elegí la versión para Windows
Arm64
La página te muestra las versiones para cada sistema operativo. Como
estamos en Windows, hacé clic en el botón azul que dice
«↓ Windows». Se descarga automáticamente el instalador.
(comprada después de 2018), elegí x64. Si tenés una
laptop con procesador ARM (como algunas Surface), elegí
Arm64. En la mayoría de los casos, x64
es la correcta.
Instalación de Visual Studio Code
Aceptá el acuerdo de licencia
Cuando ejecutés el archivo descargado (VSCodeUserSetup-x64-X.X.X.exe),
se abre el instalador. Lo primero que te pide es aceptar el acuerdo de licencia.
- Seleccioná «Acepto el acuerdo»
- Hacé clic en «Siguiente»
para uso personal y comercial. Es de código abierto bajo licencia MIT. No vas
a pagar nada, nunca. La licencia simplemente describe los términos legales de uso.
Configurá las tareas adicionales
Este paso es muy importante. El instalador te pregunta qué
tareas adicionales querés activar. Acá te explico cada una:
| Opción | ¿Qué hace? | ¿Activarla? |
|---|---|---|
| Crear acceso directo en el escritorio | Pone un ícono de VS Code en tu escritorio para abrirlo rápido | ✅ Sí |
| «Abrir con Code» en archivo | Al hacer clic derecho en un archivo, te da la opción de abrirlo con VS Code | Opcional (útil pero no obligatorio) |
| «Abrir con Code» en directorio | Al hacer clic derecho en una carpeta, podés abrirla como proyecto en VS Code | Opcional (útil pero no obligatorio) |
| Registrar Code como editor | Los archivos de código (.php, .css, .html) se abren con VS Code por defecto | ✅ Sí |
| Agregar a PATH | Podés abrir VS Code desde la terminal escribiendo code . |
✅ Sí — Muy importante |
Especialmente «Agregar a PATH» — esto te permite abrir
proyectos desde la terminal de Laragon escribiendo simplemente
code . (code espacio punto). Es súper útil.
Después de marcar las opciones, hacé clic en «Siguiente».
Revisá el resumen y hacé clic en «Instalar»
El instalador te muestra un resumen de todo lo que va a hacer. Revisá que
las opciones que elegiste estén correctas y hacé clic en el botón
«Instalar».
Esperá mientras se instala
El instalador empieza a extraer los archivos de VS Code en tu computadora.
Vas a ver una barra de progreso verde que va avanzando.
Solo esperá — tarda entre 30 segundos y 2 minutos dependiendo
de la velocidad de tu disco.
usuario:
C:\Users\TuNombre\AppData\Local\Programs\Microsoft VS Code\.No necesitás recordar esta ruta — Windows lo maneja automáticamente.
¡Instalación completada! Hacé clic en «Finalizar»
¡Listo! La instalación se completó. Antes de hacer clic en «Finalizar»,
asegurate de que la casilla «Ejecutar Visual Studio Code»
esté marcada — así se abre automáticamente cuando terminés.
Hacé clic en «Finalizar» y VS Code se va a abrir.
Ahora vamos a configurarlo para trabajar con WordPress.
Primer contacto — Abrí tu proyecto de WordPress
Abrí la carpeta del proyecto en VS Code
Cuando VS Code se abre por primera vez, ves una pantalla de bienvenida. Para
trabajar con tu proyecto de WordPress, necesitás abrir la carpeta
donde están tus archivos.
¿Cómo abrir tu proyecto?
Tenés 3 formas de hacerlo:
| Método | Cómo hacerlo |
|---|---|
| 1. Desde el menú | File → Open Folder → Navegá hasta C:\laragon\www\ → Seleccioná tu proyecto |
| 2. Atajo de teclado | Presioná Ctrl + K y después Ctrl + O → Elegí la carpeta |
| 3. Desde la terminal de Laragon | Abrí la terminal de Laragon → Escribí cd www/wp-learnpress → Escribí code . |
code . (code espacio punto) le dice a VS Code: «abrí la carpetadonde estoy parado ahora mismo». El punto (
.) significa «carpetaactual». Esto funciona gracias a que activamos «Agregar a PATH»
durante la instalación.
En la barra lateral izquierda (el panel EXPLORER) vas a ver
todos los archivos y carpetas de tu proyecto. Desde ahí podés navegar,
abrir y editar cualquier archivo con un doble clic.
Conocé la interfaz de VS Code
VS Code tiene 5 áreas principales. No necesitás memorizar todo
ahora — con el uso diario se te van a hacer naturales. Pero es bueno saber
qué es cada cosa:
| Área | Ubicación | Para qué sirve |
|---|---|---|
| Barra de actividad | Columna izquierda (íconos) | Cambiar entre Explorer, Búsqueda, Git, Extensiones, etc. |
| Panel Explorer | Barra lateral izquierda | Ver todos los archivos y carpetas de tu proyecto |
| Área de edición | Centro (la parte más grande) | Donde editás el código. Podés abrir varias pestañas |
| Panel inferior | Abajo (se oculta si no hay nada) | Terminal integrada, errores, output |
| Barra de estado | Franja azul al fondo | Info rápida: errores, lenguaje del archivo, línea actual |
Atajos de teclado esenciales que vas a usar siempre
| Atajo | Qué hace | ¿Cuándo usarlo? |
|---|---|---|
Ctrl + Shift + P |
Abre la Paleta de Comandos — buscás cualquier acción | Todo el tiempo — es el buscador universal de VS Code |
Ctrl + P |
Busca un archivo por nombre | Para encontrar archivos rápido sin navegar carpetas |
Ctrl + Shift + F |
Busca texto en todos los archivos del proyecto | Para encontrar dónde se usa una función, clase o texto |
Ctrl + S |
Guardar el archivo actual | Cada vez que hacés un cambio |
Ctrl + Z |
Deshacer el último cambio | Cuando cometés un error |
Ctrl + ` |
Abre/cierra la terminal integrada | Para ejecutar comandos sin salir de VS Code |
Ctrl + Alt + I |
Abre el chat de Copilot (IA) | Para pedir ayuda a la inteligencia artificial |
Instalá las extensiones de PHP
VS Code viene «vacío» de fábrica — no sabe nada de PHP ni de WordPress. Para que
entienda tu código, necesitás instalarle extensiones. Las
extensiones son como «superpoderes» que le agregás a VS Code.
Abrí el Marketplace de extensiones
Para abrir el Marketplace de extensiones:
- Hacé clic en el ícono de cubos 🧩 en la barra lateral izquierda
- O usá el atajo
Ctrl + Shift + X
En el buscador de extensiones escribí «php». Te van a aparecer
las extensiones más populares para trabajar con PHP.
Extensiones que te recomiendo instalar
De todas las extensiones que aparecen, estas son las que vas a necesitar
para trabajar cómodamente con WordPress:
| Extensión | Autor | ¿Qué hace? | ¿Obligatoria? |
|---|---|---|---|
| PHP Intelephense | Intelephense | Autocompletado inteligente, detección de errores, navegación de código PHP | ✅ Sí |
| PHP Debug | Xdebug | Permite depurar (debugear) código PHP paso a paso | Recomendada |
| PHP (DEVSENSE) | DEVSENSE | Soporte todo-en-uno para PHP: IntelliSense, formateo, linting | Alternativa a Intelephense |
PHP Intelephense o PHP (DEVSENSE) es suficiente
para empezar. Si instalás ambas pueden entrar en conflicto. Elegí una de las dos.
Te recomiendo PHP Intelephense — es la más popular (16.9 millones
de descargas).
¿Cómo instalar una extensión?
- Buscá la extensión en el Marketplace (por ejemplo, «PHP Intelephense»)
- Hacé clic en el botón azul «Install»
- Esperá unos segundos — se instala automáticamente
- ¡Listo! No necesitás reiniciar VS Code
Otras extensiones útiles (opcionales)
| Extensión | ¿Qué hace? |
|---|---|
| GitHub Copilot | Asistente de IA que te sugiere código mientras escribís. Es como tener un programador al lado |
| Spanish Language Pack | Traduce la interfaz de VS Code al español (menús, ajustes, mensajes) |
| Auto Rename Tag | Cuando renombrás una etiqueta HTML de apertura, automáticamente renombra la de cierre |
| Prettier | Formatea tu código automáticamente para que se vea limpio y ordenado |
| Live Server | Abre archivos HTML en el navegador y se actualiza solo cuando guardás |
Problemas comunes y cómo resolverlos
| Problema | Causa probable | Solución |
|---|---|---|
| VS Code no reconoce archivos PHP | No tenés extensiones de PHP instaladas | Instalá PHP Intelephense desde el Marketplace |
El comando code . no funciona en terminal |
No activaste «Agregar a PATH» durante la instalación | Reinstalá VS Code y marcá esa opción. O reiniciá la computadora |
| La interfaz está en inglés | VS Code viene en inglés por defecto | Instalá la extensión «Spanish Language Pack» y reiniciá |
| VS Code se ve muy pequeño o muy grande | Zoom de la interfaz desajustado | Presioná Ctrl + 0 para volver al zoom normal, o Ctrl + +/- para ajustar |
| No aparece el panel Explorer | Se ocultó la barra lateral | Presioná Ctrl + B para mostrar/ocultar la barra lateral |
¿Cómo sé que todo funciona correctamente?
- VS Code se abre sin errores
- Podés ver los archivos de tu proyecto en el panel Explorer
- Al abrir un archivo
.php, el código se ve con colores (syntax highlighting) - La extensión PHP Intelephense está instalada y activa
- La barra de estado azul muestra «PHP» cuando abrís un archivo
.php - El comando
code .funciona desde la terminal de Laragon
🎯 Resumen de esta lección
- Visual Studio Code es el editor de código gratuito más popular del mundo, ideal para WordPress
- Se descarga desde code.visualstudio.com — siempre el sitio oficial
- Durante la instalación, activá: acceso directo, registrar como editor y agregar a PATH
- Para abrir tu proyecto: File → Open Folder →
C:\laragon\www\tu-proyecto - O desde terminal:
code .(el método más rápido) - Instalá PHP Intelephense como extensión esencial para PHP y WordPress
- Los atajos más importantes:
Ctrl+Shift+P(comandos),Ctrl+P(buscar archivo),Ctrl+S(guardar) - VS Code + Laragon = tu entorno de desarrollo completo para WordPress
Módulo 00 · Lección 2 de 3 |
Anterior: Lección 01 → Instalá Laragon |
Siguiente: Lección 03 → Instalá WordPress en Laragon