StyleLint

Para realizar este paso es imprescindible tener instalado NodeJS en tu máquina.

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í

Crea un proyecto con Vite: npm create vite@latest

Cómo instalar StyleLint

En el directorio de nuestro proyecto Vite que hemos crado, debemos instalar Stylelint, la configuración estándar (o la que prefieras) y el plugin de Vite

npm install stylelint stylelint-config-standard vite-plugin-stylelint --save-dev

stylelint es el motor principal del linter a utilizar, stylelint-config-standard: Es un conjunto de reglas comúnmente aceptadas. Puedes elegir otro si lo prefieres. vite-plugin-stylelint: Es el plugin que integra Stylelint con el servidor de desarrollo de Vite, permitiéndote ver los errores directamente en la consola del navegador y como overlay.

Además, vamos a añadir una herramienta que nos va a permitir forzar que se use nesting CSS siempre y cuando sea posible. Para ello instalaremos:

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

Configuración

Configuración en Vite

Crea en el proyecto (en el caso de no tenerlo ya) el archivo vite.config.js (o .ts) y añádelo al array de plugins.

// vite.config.js
import { defineConfig } from 'vite';
import stylelint from 'vite-plugin-stylelint';

export default defineConfig({
  plugins: [
    // ...otros plugins que tengas (tailwind, etc.)
    stylelint({
      // Opcional: activa la corrección automática (fix)
      // fix: true,
      
      // Opcional: especifica los archivos a incluir
      include: ['src/**/*.{css,scss,sass}, css/**/*.{css,scss,sass}'],
    }),
  ],
});

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

Configuración .stylelintrc.json

Crea un archivo llamado .stylelintrc.json en la raíz de tu proyecto. Aquí le dices a Stylelint qué conjunto de reglas usar.

{
    "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"],
         "max-nesting-depth": 4,
         "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. Las dos últimas reglas corresponden a nesting CSS, estamos haciendo que como máximo se use una profundidad de 4 y obligando que se use siempre y cuando sea posible.

Una vez configurado nuestro stylelint, lo correcto sería añadir un script en nuestro package.json para que cada vez que lo ejecutemos lancemos una revisión a todos los archivos.

"scripts": {
  "prestart": "stylelint \"src/**/*.css\"",
  "start": "vite",
  "build": "vite build",
  "preview": "vite preview"
},

Ahora simplemente debes ejecutar el proyecto con npm start y abrir el enlace que te ofrece Vite o simplemente escribir o + Enter.

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”.

Configuración recomendada

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

// 1. Desactiva los linters nativos de VS Code
  // Esto evita que veas errores duplicados (los de VS Code y los de Stylelint).
"css.validate": false,
"scss.validate": false,
"less.validate": false,
"stylelint.enable": true,
"editor.formatOnSave": true,
// 2. Activa el "auto-fix" al guardar
// Esto es genial: Stylelint corregirá automáticamente los errores (como espacios,
// saltos de línea, etc.) cada vez que guardes el archivo.
"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í:

{
    ...
    "css.validate": false,
    "scss.validate": false,
    "less.validate": false,
    "stylelint.enable": true,
    "[css]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "stylelint.vscode-stylelint" 
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.stylelint": true
    }
}

<< shape-outside Minificación >>