Estándares WordPress para JavaScript y CSS en VSC

En artículos previos he hablado sobre los estándares de WordPress para PHP, como instalar PHP CodeSniffer y los diferentes estándares de WordPress (general, documentación, WooCommerce…), que podéis ver aquí:

Vamos ahora a centrarnos en su uso con Visual Studio Code y especialmente en JavaScript y, SASS (SCSS) y CSS.

phpcs en VSC

Una vez que hemos comprobado que nos funciona correctamente phpcs en la línea de comandos y con los estándares de WordPress que vamos a utilizar, para poder utilizarlos en nuestro editor, instalamos la extensión.

Hasta hace poco, la elección más adecuada era la extensión phpcs de Ioannis Kappas, pero ha dejado de mantenerla, por lo que si la utilizáis, os recomiendo cambiarla.

La elección más adecuada es la extensión phpcs de shevaua que podéis encontrar en https://marketplace.visualstudio.com/items?itemName=shevaua.phpcs

Después ya depende de si la tenéis activada globalmente o la queréis activar por proyecto, en cuyo caso pondréis en el archivo .vscode/settings.json del proyecto:

    // PHPCS.
    "phpcs.enable": true,
    "phpcs.executablePath": "/root/.config/composer/vendor/bin/phpcs",
    "phpcs.standard": "WordPress",
    "phpcs.showWarnings": true,
    "phpcs.autoConfigSearch": true,

Con la primera línea para activarlo y la tercera para definir el estándar, sería suficiente, pero podemos configurar, por ejemplo, donde se encuentra el ejecutable si no está disponible globalmente, etc.

Las demás opciones relativas al proyecto, las configuro en el archivo .phpcs.xml para por ejemplo indicar el text-domain o la versión de PHP a revisar.

Estándares de JavaScript

Al igual que PHP y HTML, WordPress tiene sus propios estándares para JavaScript. Para que el editor nos vaya marcando los errores, utilizamos el linter ESLint.

Instalamos los estándares ejecutando en la consola de nuestro proyecto:

npm install @wordpress/eslint-plugin --save-dev

Una vez instalados, desde Visual Studio Code instalamos la extensión de Microsoft ESLint.

Creamos nuestro archivo de configuración del proyecto .eslintrc.json y le añadimos el siguiente contenido:

{
  "extends": [ "plugin:@wordpress/eslint-plugin/recommended" ]
}

Y verificamos con un archivo JavaScript que nos está marcando correctamente los errores.

Estándares de CSS/SCSS

Los estándares de CSS los podemos encontrar en la sección correspondiente del handbook. Para que el editor nos vaya marcando los errores, utilizamos el linter Stylelint.

Al igual que con JavaScript, instalamos los estándares ejecutando el comando desde la consola (en el directorio del proyecto):

npm install @wordpress/stylelint-config --save-dev

Una vez instalados, desde Visual Studio Code instalamos la extensión oficial de Stylelint.

Creamos nuestro archivo de configuración del proyecto .stylelintrc.json y le añadimos el siguiente contenido:

{
    "extends": [
        "@wordpress/stylelint-config",
        "@wordpress/stylelint-config/scss"
    ]
}

En este caso hemos añadido la validación de las reglas tanto para CSS como para SASS (SCSS), si no utilizamos SASS podemos ignorar la segunda línea de configuración.

Y de nuevo comprobamos con un archivo CSS/SASS que nos esté marcando correctamente los errores.