Lección 2.4 — VS Code: tu editor de código
VS Code (Visual Studio Code) es el editor de código más popular del mundo. Lo creó Microsoft y es completamente gratuito. Lo vas a usar cuando necesites editar archivos PHP, CSS o JS directamente — algo que pasa con más frecuencia de lo que imaginas, incluso usando Divi 5.
functions.php, corregir un CSS específico, o revisar un error en un archivo. Para eso existe VS Code.
Paso 1 — Descargar e instalar VS Code
Descargar
Entra a code.visualstudio.com y descarga la versión para Windows. El instalador se llama algo como VSCodeSetup-x64.exe.
Durante la instalación, activa estas dos opciones aunque no estén marcadas por defecto:
- «Agregar acción Abrir con Code al menú contextual de archivos»
- «Agregar acción Abrir con Code al menú contextual de directorios»
Estas opciones te permiten hacer clic derecho en cualquier carpeta y abrirla directo en VS Code. Las vas a agradecer todos los días.
Paso 2 — Instalar extensiones para WordPress
Las extensiones son como plugins para VS Code — le agregan funciones específicas. Estas son las que necesitas:
| Extensión | Para qué sirve | Prioridad |
|---|---|---|
| PHP Intelephense | Autocompletado inteligente para PHP. Te sugiere funciones y detecta errores. | Esencial |
| WordPress Snippets | Fragmentos de código WordPress listos para insertar con un atajo. | Esencial |
| HTML CSS Support | Autocompletado de clases CSS dentro de archivos HTML y PHP. | Esencial |
| Prettier | Formatea tu código automáticamente. Lo deja limpio y bien ordenado. | Recomendada |
| GitLens | Control de versiones avanzado. Ver quién cambió qué y cuándo. | Recomendada |
Cómo instalar una extensión en VS Code
En VS Code, haz clic en el ícono de extensiones en la barra lateral izquierda — parece cuatro cuadraditos. O presiona el atajo:
Ctrl + Shift + X
En el campo de búsqueda, escribe el nombre exacto de la extensión. Por ejemplo: PHP Intelephense
Haz clic en Install en el resultado correcto. La extensión se activa de inmediato — no necesitas reiniciar nada.
Paso 3 — Cómo abrir tu proyecto WordPress en VS Code
Abre el Explorador de archivos de Windows y navega a:
C:\laragon\www\
Ahí vas a ver una carpeta con el nombre de tu proyecto WordPress.
Haz clic derecho sobre esa carpeta y selecciona «Open with Code».
VS Code se abre con toda la estructura de archivos de tu proyecto visible en el panel izquierdo.
Estructura de archivos de WordPress
← Panel de WP — NO tocar
← AQUÍ TRABAJAS TÚ ✅
← Divi 5 vive aquí
← Tus plugins instalados
← Imágenes y archivos subidos
← Motor de WP — NO tocar
← Configuración principal — con cuidado
- wp-admin/ y wp-includes/ → son el núcleo de WordPress, nunca los tocas directamente
- wp-content/ → aquí vive todo tu trabajo: temas, plugins e imágenes
- wp-config.php → solo lo editas en la instalación inicial o cuando hay un problema específico
Confirma que tienes todo listo antes de pasar al Módulo 3:
- Laragon instalado y abriendo sin errores
- Apache y MySQL en verde al hacer clic en «Start All»
- http://localhost muestra la pantalla de bienvenida de Laragon
- http://localhost/phpmyadmin abre la interfaz de phpMyAdmin
- VS Code instalado con PHP Intelephense, WordPress Snippets y HTML CSS Support