En los años que llevo programando web he utilizado gran variedad de entornos de desarrollo o editores de texto, pero siempre haciendo más hincapié en la parte frontend (HTML, CSS, JS…). En los últimos meses me he visto con la necesidad de intensificar mis conocimientos en el backend, por lo que siendo Visual Studio Code mi editor habitual estos últimos años, he decidido a investigar un poco como configurar este maravilloso editor para la programación con PHP. En este artículo abordaré preguntas que me han surgido: ¿Cómo configurarlo correctamente?, ¿Los mejores plugins o extensiones? ¿Depurar código PHP?
Soporte PHP
Visual Studio Code es un gran editor para el desarrollo de PHP, dispone de características como el resaltado de sintaxis, concordancia de llaves en expresiones y snippets que pueden añadir funcionalidades a tu día a día. Sin embargo, esto no es suficiente para competir con otros sistemas IDE como PHPStorm o Eclipse entre otros. Así que además de estas características, podemos ampliar funcionalidades con las extensiones que encontraremos en la tienda de Visual Studio Code.
Lo primero que debemos hacer es asegurarnos que tenemos PHP correctamente instalado en nuestro sistema, si no es así, cuando creemos un nuevo fichero PHP, Visual Studio Code y en concreto la extensión PHP Language Features.
Si tenemos PHP instalado con WAMP, LAMP, XAMPP o hemos realizado una instalación manual, es posible que debas incorporar la ruta del ejecutable PHP al sistema. En mi caso, al trabajar sobre un sistema Windows, debo añadir la ruta del ejecutable PHP a la variable PATH del sistema. Si además vas a trabajar con varias versiones PHP 5.X o 7.X debes incorporar todas aquellas rutas del ejecutable PHP con las que vayas a trabajar. Si no deseas tocar las variables de entorno (o no tienes permisos), puedes añadir la ruta en el fichero de configuración de VSC de la siguiente manera:
"php.validate.executablePath": "C:\\wamp\\bin\\php\\php7.0.23\\php.exe"
Extensiones PHP recomendadas (imprescindibles)
Nos ayudará a programar más rápidamente auto-completando nuestro código PHP. Actualmente VSC dispone de auto-completado para PHP de forma nativa, pero esta extensión ofrece algunas características más que no deberíamos pasar por alto, como por ejemplo:
- Seguimiento de parámetros al escribir funciones
- Búsqueda por símbolos
- GO-TO para definiciones
- Información adicional con :hover
- Reporte de errores
Esta extensión permite aprovechar las bondades de Xdebug, es decir PHP Debug es un intermediario que permite utilizar dicha extensión con VSC. Para ello debes seguir los siguientes pasos:
- Instalar primeramente la extensión PHP Debug desde el gestor de extensiones o desde la tienda.
- Crear un archivo test.php e incluir la función phpinfo() para obtener la información generada. Copiar el HTML generado y seguir las instrucciones de Xdebug wizzard.
- Reiniciar el servidor web.
Provee a VSC una interfaz del plugin PHPCS que permitirá identificar posibles errores en nuestro código. Válido parar ficheros PHP, JavaScript y CSS. Permite detectar incoherencias basadas en el estándar y además permite la corrección automática gracias a un segundo plugin PHP CB Fixer del que hablaremos a continuación.
Para su instalación necesitaremos composer. Se puede realizar una instalación global o una instalación individual por proyecto.
Instalación global:
composer global require squizlabs/php_codesniffer
Instalación individual:
composer require --dev squizlabs/php_codesniffer
Extensión que permite optimizar (arreglar) tu código PHP basado en estándares como PSR-1, PSR-2, etc. Puede modernizar tu código, como por ejemplo convertir la función pow en el operador **. Si habitualmente vienes utilizando un linter para identificar problemas de estandarización de código, esta herramienta no sólo permite detectarlos sino también arreglarlos por ti.
Requiere PHP 5.6.x
Tareas con Visual Studio Code
Vamos a crear dos tareas en VSC que nos permitirán abrir los dos principales navegadores (Chrome y Firefox), con los que podremos depurar y comprobar que nuestra aplicación o página web funciona y se visualiza correctamente.
Inicie la consola de comandos y escriba “configurar tareas”, o desde el menú Terminal > configurar tareas… Si anteriormente no ha creado ninguna, se le pedirá que escoja qué tipo de tarea desea configurar: MSBuild, maven, .Net Core y Others. Escoja Others
{
"version": "2.0.0",
"tasks": [
{
"label": "Abrir en localhost (Firefox)",
"command": "explorer",
"windows": {
"command": "C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe"
},
"args": [
"localhost/${workspaceFolderBasename}/${relativeFile}"
],
"presentation": {
"reveal": "never"
},
"problemMatcher": []
},
{
"label": "Abrir en localhost (Chrome)",
"command": "explorer",
"windows": {
"command": "C:\\Program Files (x86)\\Google\\Chrom\\Application\\chrome.exe"
},
"args": [
"localhost/${workspaceFolderBasename}/${relativeFile}"
],
"presentation": {
"reveal": "never"
},
"problemMatcher": []
}
]
}
Posteriormente configuraremos los atajos de teclados correspondientes para realizar las tareas configuradas anteriormente. Para ello, nos dirigimos a Archivo > Preferencias > Métodos abreviados de teclado. Pulse sobre el icono {}, situado en la parte superior derecha, para abrir el archivo JSON correspondiente a los atajos de teclado en VSC. En el fichero keybinding.json añadimos las dos tareas:
[
{
"key": "ctrl+alt+l ctrl+alt+f",
"command": "workbench.action.tasks.runTask",
"args": "Abrir en localhost (Firefox)"
},
{
"key": "ctrl+alt+l ctrl+alt+c",
"command": "workbench.action.tasks.runTask",
"args": "Abrir en localhost (Chrome)"
}
]
Debido a la forma en la que se han configurado las tareas, es necesario tener abierto un fichero para poder ejecutar las tareas sin problemas.