🇪🇸 Extensiones y configuración de VSCode para Drupal
El editor es la herramienta en la que vives.
Tenerlo bien configurado para Drupal específicamente — no solo para PHP genérico — marca una diferencia real. Esta es la configuración exacta que uso.
Extensiones
Twig
El motor de plantillas de Drupal es Twig, y sin soporte de sintaxis los archivos son texto plano. Esta extensión te da resaltado de sintaxis, autocompletado para etiquetas y filtros de Twig, y emparejamiento de llaves dentro de los archivos .html.twig.
Búscala como Twig en el panel de Extensiones e instala la de whatwedo GmbH (tiene el soporte más activo compatible con Drupal).
Drupal
La extensión Drupal agrega snippets para patrones comunes: hooks, servicios, definiciones de rutas y más. En lugar de escribir de memoria la firma completa de un hook_form_alter(), escribes el prefijo del snippet y él rellena la estructura.
También ayuda con los patrones de archivos de módulo como .module, .install e .info.yml.
PHP Intelephense
Esta es la que lo cambia todo para el desarrollo en PHP.
PHP Intelephense te da:
- Ir a definición preciso en todo tu proyecto Drupal y la carpeta vendor
- Autocompletado de clases, métodos y propiedades
- Documentación al hacer hover, extraída de los docblocks
- Búsqueda de símbolos en todos los archivos PHP
Sin ella, trabajar con el contenedor de servicios de Drupal, la API de entidades o el sistema de typed data implica mucho grep manual. Con ella, presionas F12 y estás ahí.
Instala la versión gratuita. La versión premium agrega más funciones, pero el nivel gratuito cubre todo lo que necesitas en el día a día.
Markdown Preview Enhanced
Útil para escribir archivos .md con vista previa en vivo. Cuando estás documentando un módulo, escribiendo un README o redactando contenido que va a quedar en el repositorio, poder ver el resultado renderizado sin salir del editor ahorra cambios de contexto.
Configuración
Tamaño de tabulación: 2 espacios
Los estándares de código de Drupal requieren indentación de 2 espacios, no 4. VSCode trae 4 por defecto, así que este es el primer ajuste a cambiar.
Archivo → Preferencias → Configuración (o Ctrl + ,)
Busca Tab Size y cambia el valor de 4 a 2.
Mientras estás ahí, verifica también que Editor: Insert Spaces esté activado para que los tabs se conviertan automáticamente en espacios.
Atajos que vale la pena conocer
Estos tres cubren la mayor parte de la navegación en un proyecto Drupal:
| Atajo | Qué hace |
|---|---|
Ctrl + P | Abrir archivo por nombre — escribe parte del nombre y salta directo |
Ctrl + Shift + F | Buscar en todo el workspace — encuentra una cadena en cualquier archivo |
Shift + Alt + F | Formatear el archivo actual — ejecuta el formateador activo sobre lo que tengas abierto |
Ctrl + P se vuelve esencial en proyectos Drupal donde los archivos están repartidos entre modules/custom/, themes/, web/, src/ y más. Dejas de pensar en la estructura de carpetas y solo escribes lo que buscas.
Ctrl + Shift + F es el que usas cuando necesitas encontrar todos los lugares donde se implementa un hook, todas las referencias a un ID de servicio, o todas las plantillas que sobreescriben una región específica.
