Cómo usar el código VS para el desarrollo de WordPress

Integración de código de WordPress VS

Si planea utilizar VS Code de forma inmediata con WordPress, debe saber que no es compatible con WordPress y PHP en general, así como con otros entornos de desarrollo como PhpStorm. Afortunadamente, hay extensiones disponibles para cambiar esto. Una de ellas es la extensión PHP Intelephense. Esta extensión se utiliza para agregar autocompletado PHP, soporte de navegación de símbolos y una forma mucho mejor de encontrar referencias en su espacio de trabajo.

Esta es una gran herramienta que le permite agregar autocompletado para las funciones principales de PHP. Sin embargo, no recogerá ninguna de las funciones principales de WordPress. Si desea usarlo con WordPress, le sugiero que instale la extensión de fragmentos de WordPress. El uso de esta herramienta le permitirá agregar útiles autocompletados para la mayoría de las funciones principales de WordPress, incluidas las clases y las constantes. Puede trabajar con estas herramientas muy fácilmente con los temas y complementos de WordPress. Hay algunas características de PHP Storm que no encontrará en VS Code, como sugerencias de parámetros y autocompletado para ganchos y filtros de acción. Sin embargo, lo que ofrece la herramienta es lo suficientemente bueno por ahora. Dado que es un nuevo editor de código, esperamos más integración en el futuro a medida que más personas continúen usándolo.

XDebug

Para aquellos que han usado xDebug, y luego entienden lo difícil que es configurarlo. Afortunadamente, VS Code hace que sea increíblemente fácil configurar xDebug, y en mi experiencia, simplemente funciona. Todo lo que se necesita hacer es instalar la extensión PHP Debug y volver a cargar el editor. En la depuración, haga clic en el icono de engranaje para crear una nueva configuración de depuración de PHP. Se creará un código VS / json de inicio en la raíz de su proyecto que contiene opciones para cualquier configuración de depuración que tenga. Deberá editar xDebug run en un puerto que no sea 9000, que es la configuración predeterminada al configurarlo. Una vez que haya configurado xDebug, puede comenzar a depurar de inmediato. Es una gran herramienta que no necesita jugar con las asignaciones de ruta o abrir múltiples ventanas para depurar diferentes sitios.

Depuración de JavaScript

Además de depurar PHP, también debe saber cómo depurar JavaScript. Dado que está integrado en el IDE, pasará poco tiempo jugando con la consola del navegador. Para hacer esto fácilmente, use Google Chrome como el navegador principal e instale el depurador para la extensión de Chrome que integra VS Code con el Protocolo de herramientas de desarrollo de Chrome. Una vez instalada la extensión, actualice el archivo json de inicio creado al configurar xDebug para que pueda agregar otra configuración de depuración para JavaScript. Debería ver la configuración de depuración de JavaScript en el menú desplegable de configuración de depuración, una vez que la haya agregado

A veces puede descubrir que los puntos de interrupción no funcionan. En este caso, es posible que deba agregar alguna configuración para indicarle a VS Code dónde buscar los archivos, si está usando algo como Browserify para agrupar sus archivos JavaScript. Esto se hace fácilmente en el lanzamiento. Archivo Json, utilizando el parámetro de anulación de ruta de mapa de origen.

Inicie una sesión de depuración de JavaScript e ingrese .scripts en la Consola de depuración de código VS si desea averiguar cómo son sus anulaciones. Se le mostrará una lista de los scripts que se cargaron durante la solicitud de depuración. También le mostrará los archivos a los que asignan y dónde el Código VS cree que están ubicados. Encontrará más información sobre el comando .scripts en la documentación.

En algunos casos, VS Code puede pensar que los archivos JavaScript se almacenaron en una estructura de archivo similar a la URL utilizada para cargar los archivos en WordPress cuando intenta depurar. Depuración de JavaScript. En este caso, puede usar otras integraciones útiles.

Otras extensiones útiles

Encontrará algunas otras extensiones que serán útiles en el desarrollo diario si continúa usando VS Code en todo su desarrollo de WordPress. Una de esas extensiones es la extensión Git Lens. Esta extensión se utiliza para agregar simples anotaciones de culpa de git a la línea en la que está trabajando actualmente, que funciona más rápido que la implementación de Php Storms. Esto es así porque se ejecuta en todo el archivo a la vez.

Otra extensión que vale la pena instalar, si trabaja con muchos JavaScript modernos, es la extensión Babel ES6 / ES7 utilizada para agregar resaltado de sintaxis para ES6 / ES7 (duh). También puede probar el complemento Instant Markdown instalado, utilizado para escribir publicaciones y es una forma increíble de obtener una vista previa de su descuento en el navegador.

Observaciones finales