StyleLint
Características de StyleLint Cómo instalar StyleLint Configuración Integración StyleLint en VSCODE

<< shape-outside Minificación >>

StyleLint es un tipo de herramienta linter para detectar code smell, es decir, es una herramienta encargada de comprobar posibles problemas y/o malas prácticas de nuestro código.

Características de StyleLint

Las características que nos ofrece Stylelint son las siguientes:

Admite la sintaxis más reciente de CSS
Corrige de forma automática algunos estilos de errores (Autofix)
Te permite activar/desactivar aquellas reglas que desees utilizar y configurarlas según tus preferencias.
Te permite crear tus propias reglas.

Nosotros vamos a pasar a utilizar StyleLint dento de nuestros proyectos Vite, para aquellos que todavía no estáis familiarizados con este gestor de proyectos, os recomiendo que repaséis del tema de JavaScript la sección correspondiente. Más info aquí

Cómo instalar StyleLint

Como requisito antes de instalar StyleLint es que tengas npm, en el caso de no tenerlo instalado previamente, visita la guía de la web para hacerlo en función de tu SO. Para Debian /Ubuntu sería:

1. Descargamos e importamos Nodesource GPG key

sudo apt-get update
sudo apt-get install -y ca-certificates curl gnupg
sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg

2. Creamos el repositorio deb

NODE_MAJOR=20
echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list

3. Actualizamos e instalamos node

sudo apt-get update
sudo apt-get install nodejs -y

Una vez tengamos npm instalado pasaremos a instalar StyleLint y configurarlo con el comando:

npm init stylelint stylelint-config-standard

npx stylelint -v

Configuración

Nos creamos un proyecto Vite en nuestro directorio de trabajo:

npm create vite

El siguiente paso será instalar y configurar stylelint, para ello ejecutaremos los comandos:

A continuación para la configuración de stylelint, lo primero que haremos será configurar nuestro linter CSS y para deberemos crearnos el archivo .stylelintrc.json en la raíz del proyecto (si es que no nos lo ha creado ya durante la instalación)

Dentro del archivo que hemos creado incluimos las siguientes líneas.

npm init stylelint stylelint-config-standard

Y le ponemos que nos revise también que estamos usando nesting

npm install stylelint-use-nesting --save-dev

Tras esto iremos al archivo de configuración: .stylelintrc.json

{
    "extends": ["stylelint-config-standard"]
}

Con esto le estamos diciendo que lea la configuración base del paquete que instalamos antes (stylelint-config-standard), por lo que ya debería funcionar nuestro linter con las reglas básicas que están definidas en este paquete. Podemos añadir otra configuración además del stylelint-config-standard, se pueden añadir más paquetes de configuración.

{
    "plugins": [
    "stylelint-use-nesting"
  ],
    "extends": ["stylelint-config-standard"],
    "rules": {
        "declaration-property-unit-allowed-list": {
            "/^border/": ["px", "%", "rem", "em"],
            "/^font-size|^padding|^gap|^margin/": ["rem", "em"]
        },
        "unit-allowed-list": ["%", "vw", "px", "rem", "vh", "fr", "em"],
         "csstools/use-nesting": "always"
    }
  }

Con las reglas añadidas anteriormente, estamos obligando a que nuestro proyecto tenga use esas medidas sólo, así con la configuración estándar, donde una de las características que tiene es el orden de los selectores.

Integración StyleLint en VSCODE

Para integrar esta herramienta con vscode debemos instalarnos la extensión oficial de stylelint.

Esta extensión se comunica como si se ejecutara de forma continua el comando npx stylelint rutaCSS, incluso te dice la regla que está afectando si nos posicionamos sobre el error. Para configurar la opción fix en nuestro vscode pulsaremos F1 y escribimos: settings json y seleccionamos el que dice “Abrir configuración de usuario json”.

Dentro de este archivo, al final añadiríamos:

"css.validate": false,
"scss.validate": false,
"less.validate": false,
"stylelint.enable": true,
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
      "source.fixAll.stylelint": true
},

Mediante css.validate, scss.validate y less.validate al estar a false, estamos diciendo a vscode que no use su linter en estos archivos, ya que usaremos styleLint. La propiedad stylelint.enable en true, estamos haciendo que StyleLint esté activado en VSCode mostrando los errores en la pestaña de “Problemas”.

La propiedad editor.formatOnSave hace que cada vez que guardemos un fichero formatee el documento. La propiedad editor.codeActionsOnSave determina qué se haŕa al guardar el fichero, en nuestro caso al ponerle source.fixAll.stylelint a true intentará corregirnos los problemas automáticamente, es decir, es como si hubiéramos ejecutado el comando npx stylelint rutaCSS con la oppción --fix.

Hemos puesto la propiedad editor.formatOnSave en un ámbito global, eso quiere decir que se ejecutará al guardar cualquier tipo de archivo. Si sólo queremos que se formatee nuestro código al guardar un archivo css, debería ser así: