Instalar PHP CodeSniffer (phpcs) y WordPress Coding Standards en VSCode

Lo que haremos en este artículo será instalar phpcs y los estándares de WordPress para desarrollar themes, plugins o lo que queramos dentro del ecosistema de WordPress. Como experto en WordPress, me gusta ir siempre un poco más allá. Este tutorial te ayudará a potenciar todavía más el ecosistema WordPress.

En mi caso particular lo haré con VSCode y activaremos el PHP_CodeSniffer de manera individual en cada proyecto, ya que si lo hacemos de manera global en todos los proyectos, tendremos problemas y advertencias sobre los estándares de WordPress incluso si estamos desarrollando un proyecto en Laravel u otro framework. Incluso si queremos hacer un archivo plain PHP y tenemos activados los estándares de manera global, tendremos el PHP_CodeSniffer mirándolo todo.

Quizás algunos comandos no se ejecuten correctamente en Windows, estoy usando MacOS.

Instalar phpcs en nuestro ordenador

Antes de instalarlo podemos comprobar si ya lo tenemos instalado ejecutando el siguiente comando en nuestro terminal:

$ phpcs --version

Si el comando nos devuelve una respuesta como la siguiente es que lo tenemos instalado y podemos saltar este paso.

PHP_CodeSniffer version 3.5.8 (stable) by Squiz (http://www.squiz.net) 

Si no lo tenemos instalado tenemos dos maneras de hacerlo, global y local. En mi caso lo instalaré de manera global con composer, para tenerlo disponible en todo el sistema. Recuerda que esto no significa que el PHP_CodeSniffer se ejecute en todos los proyectos, simplemente disponemos de la instalación de manera global en nuestro sistema. Si tienes instalado composer de manera global puedes ejecutar el siguiente comando en tu consola:

$ composer global require squizlabs/php_codesniffer

Si no tienes instalado composer, puedes revisar la documentación e instalarlo: https://getcomposer.org/doc/00-intro.md

Verifica que puedes ejecutar phpcs

Para poder utilizar los paquetes que instales con composer de manera global, debes agregar al PATH el directorio ~/.composer/vendor/bin

Si no sabes como agregar el directorio a tu PATH, voy a darte un consejo de como hacerlo. Antes que nada verifica el shell que estas utilizando, en mi caso utilizo zsh.

Básicamente lo que debemos hacer es abrir el archivo ~/.zshrc con el comando:

$ open ~/.zshrc

Esto nos abrirá el archivo en un editor de texto. En el caso de que el archivo no exista y estés usando zsh, puedes crearlo con el comando:

$ touch ~/.zshrc

Y luego abrirlo con open ~/.zshrc

Una vez abierto debemos agregar lo siguiente:

#composer packages
export PATH=“$PATH:$HOME/.composer/vendor/bin”

Una vez termines de editar y guardar este archivo, debes ejecutar en la consola el siguiente comando para recargar la configuración o cerrar y volver a abrir la consola.

$ source ~/.zshrc

Ahora tenemos los paquetes globales de composer listos para ejecutar. Puedes probar a continuación ejecutar en la consola el comando:

$ phpcs --version
PHP_CodeSniffer version 3.5.8 (stable) by Squiz (http://www.squiz.net)

Un último consejo aquí, si utilizas bash en vez de zsh el procedimiento es el mismo pero editando el archivo ~/.bashrc

Instalar la extensión en VSCode

La que recomiendo utilizar es phpcs de shevaua. Al momento de escribir este artículo tiene 85.026 instalaciones. La puedes descargar aquí: https://marketplace.visualstudio.com/items?itemName=shevaua.phpcs

Crear el directorio y descargar los estándares de WordPress

Para almacenar los estándares de WordPress crearemos un directorio phpcs-standards en la raíz de nuestro usuario y clonaré el repositorio oficial.

Si quieres el enlace al repo: https://github.com/WordPress/WordPress-Coding-Standards

$ cd ~
$ mkdir phpcs-standards
$ cd phpcs-standards
$ git clone https://github.com/WordPress/WordPress-Coding-Standards

Comunicarle a phpcs que utilice los estándares de WordPress que hemos descargado

Podemos revisar la configuración actual de nuestro PHP_CodeSniffer con el comando:

$ phpcs --config-show

Esto nos devolverá si hay alguna ruta de estándares que tengamos configurada actualmente, en el caso de ser una instalacion nueva, no tendremos esa ruta definida.

Haremos la definición con el siguiente comando:

$ phpcs --config-set installed_paths ~/phpcs-standards/WordPress-Coding-Standards
Using config file: /Users/danielp/.composer/vendor/squizlabs/php_codesniffer/CodeSniffer.conf

installed_paths: /Users/danielp/phpcs-standards/WordPress-Coding-Standards

Hacer que VSCode utilice los estándares de WordPress de manera local (por proyecto)

Como te comentaba al inicio del artículo, lo instalaré de manera local en cada proyecto, no de manera global ya que trabajamos con otros frameworks como Laravel y no nos interesa que el PHP_CodeSniffer con los estándares de WordPress nos esté actuando en otros proyectos.

Para deshabilitarlo de manera global debemos modificar el archivo settings.json de VSCode. Este archivo lo abrimos presionando los botones CMD + SHIFT + P y buscamos la opción Open Settings (JSON). Este archivo corresponde a las opciones de usuario que se ejecutan de manera global en VSCode, agregaremos esta línea al final:

{
	"phpcs.enable": false,
}

Luego para activarlo en nuestro proyecto local, simplemente crearemos una carpeta dentro del proyecto con el nombre .vscode y dentro un archivo settings.json con el siguiente contenido.

{
	"phpcs.enable": true,
	"phpcs.standard": "WordPress"
}

Esto indicará a VSCode que se utilice phpcs con los estándares de WordPress de manera local en este proyecto.

Aviso importante sobre versiones de PHP: al momento de escribir este artículo, los estándares de WordPress para phpcs solo funcionan sobre PHP 7.4. Si estás usando versiones modernas de PHP como la 8.2, no se te marcarán los problemas.

Conclusión

Hemos instalado phpcs de manera global en nuestro sistema mediante composer, activado los estándares para el desarrollo con WordPress e instalada la extension de phpcs para VSCode. Por último lo hemos desactivado para que no actúe en todos los proyectos y lo hemos activado de manera local en nuestro proyecto.

phpcs en conjunto con los estándares para WordPress te ayudarán a lograr uniformidad en el código que desarrolles y en conjunto con VSCode, chequeará violaciones y estilos del código que escribas, mejorando la calidad de tu código fuente.

Si te he ayudado, ¡comparte ayudando a otros! 🤓