Cómo escribir código cumpliendo los estándares de WordPress (WordPress coding standards) en VSCode

Si eres desarrollador de WordPress, es posible que te suene el concepto de WordPress coding standards o estándares de código en WordPress.

Básicamente (extraído de la web de WordPress.org directamente) “los estándares de código de WordPress sirven para crear una línea base para la colaboración y revisión en varios aspectos del proyecto de código abierto y la comunidad de WordPress, desde el código principal hasta los temas y plugins.

La comunidad de WordPress desarrolló los estándares contenidos y forman parte de las mejores prácticas que se recomienda que sigan los desarrolladores y contribuyentes principales.”

Es decir, si contribuyes a la comunidad de WordPress creando o manteniendo temas y/o plugins, debes seguir estos estándares.

Como desarrollador WordPress, puedes hacer lo que quieras, obviamente, pero si sigues estos estándares, y tu equipo también, tendréis un código más limpio y más fácil de mantener entre todos.

Herramientas necesarias

Las herramientas que vamos a necesitar son las siguientes:

Instalar Composer

Para instalar Composer, basta con ejecutar los siguientes comandos, en orden (extraídos directamente de la página de Composer):

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '55ce33d7678c5a611085589f1f3ddf8b3c52d662cd01d4ba75c0ee0459970c2200a51f492d557530c71c15d8dba01eae') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

Los cuatro comandos anteriores hacen lo siguiente:

  • Descargar el archivo instalador de Composer y alojarlo en el directorio actual
  • Verificar el instalador mediante SHA-384
  • Ejecutar el instalador
  • Borrar el instalador

Lo más normal es que quieras tener acceso a Composer desde cualquier directorio así que si es así, te sugiero que muevas el archivo composer.phar a una carpeta que está por defecto en el PATH de MacOS:

sudo mv composer.phar /usr/local/bin/composer

Instalando el proyecto WordPress-coding-standards

A continuación, debemos descargar el proyecto WordPress-coding-standards de github.com. Para ello, ejecutaremos los siguientes comandos:

cd /data/projects/tools

git clone git@github.com:WordPress/WordPress-Coding-Standards.git

cd WordPress-Coding-Standards

composer install

Siendo “/data/project/tools” la carpeta que yo he elegido para instalar el repositorio de WordPress-Coding-Standards. En tu caso, elige la carpeta que quieras en el primer paso y muévete a ella.

Si todo ha ido bien, el último comando debería devolver por pantalla algo como esto:

PHP CodeSniffer Config installed_paths set to ../../../,../../phpcompatibility/php-compatibility,../../phpcsstandards/phpcsdevtools,../../phpcsstandards/phpcsextra,../../phpcsstandards/phpcsutils

Instalando la extensión PHP Sniffer & Beautifier.

Primero instalamos la extensión PHP Sniffer & Beautifier en VSCode tal cual instalamos cualquier otra extensión.

Una vez instalada, pulsamos CMD+SHIFT+P y en la barra de búsqueda que se abre escribimos “settings.json” y en las sugerencias mostradas seleccionamos “Preferences: Open User Settings (JSON)” o bien en español “Preferencias: Abrir ajustes de usuario (JSON)”

El archivo que se nos abre es un archivo de tipo JSON, al que deberemos añadir estas líneas dentro:

"phpsab.executablePathCBF": "/data/projects/tools/WordPress-Coding-Standards/vendor/squizlabs/php_codesniffer/bin/phpcbf",
"phpsab.executablePathCS": "/data/projects/tools/WordPress-Coding-Standards/vendor/squizlabs/php_codesniffer/bin/phpcs",
"phpsab.autoRulesetSearch": false,
"phpsab.standard": "WordPress",
"phpsab.snifferArguments": [
    "--ignore=*/wp-admin/*,*/wp-includes/*"
]

Recuerda sustituir “/data/projects/tools/” por la carpeta donde hayas decidido alojar el proyecto de Github WordPress-Coding-Standards

Si alguna ruta en concreto no quieres que sea rastreada porque no estás codificando en WordPress si no sólo en PHP, por ejemplo, puedes añadir en la última opción del código anterior:

"phpsab.snifferArguments": [
    "--ignore=*/path1/*,*/path2/*,*/path3/*"
]

Hecho todo, sólo quedaría cerrar VSCode y volver a abrirlo y ya deberíamos tener instalado el CodeSniffer que se encargará de velar porque nuestro código cumpla con los estándares de WordPress al codificar.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *