Skip to content

StyleLint

En este documento vamos a hablar de StyleLint, una herramienta que nos permitirá revisar nuestro código CSS en busca de problemas o malas prácticas y que, además, ofrece una integración sencilla con la herramienta Vite explicada en documentos anteriores.

Nota

Los contenidos explicados en este documento se han extraído de esta web.

1. Primeros pasos

StyleLint ofrece algunas características útiles en el diseño web como son:

  • Comprobación de sintaxis CSS, incluyendo opciones más recientes
  • Corrección automática de errores (autofix)
  • Activación/Desactivación de reglas según nuestras preferencias

1.1. Instalación en proyectos Vite

Una vez hayamos creado nuestro proyecto Vite, ejecutamos este comando desde la carpeta del proyecto:

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

donde:

  • stylelint es el módulo principal
  • stylelint-config-standard es el conjunto de reglas estándar de StyleLint, sobre buenas prácticas CSS, orden y consistencia en las declaraciones, etc. Aunque podemos emplear otras alternativas si queremos (más información aquí)
  • vite-plugin-stylelint es el plugin para integrar StyleLint con Vite, y esto nos permitirá ver los errores detectados en el navegador.
  • stylelint-use-nesting es un módulo opcional, pero recomendable. Permite forzar a que se use nesting CSS cuando sea posible.

1.2. Configuración en Vite

Una vez tengamos instalados los módulos, falta añadir un par de retoques en la configuración del proyecto.

En primer lugar, deberemos crear el archivo de configuración de Vite, vite.config.js, si no lo tenemos ya, e incluir stylelint en la sección de plugins. Un ejemplo de archivo podría ser este:

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}'],
    }),
  ],
});

Añadimos también el fichero de configuración de stylelint, llamado .stylelintrc.json, incluyendo los paquetes de configuración que usaremos, y algunas reglas que queramos definir nosotros. Aquí vemos un ejemplo:

{
    "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"
    }
}

Como vemos en el ejemplo anterior, cargamos la configuración standard y el plugin para usar nesting. Además, en la sección rules definimos nuestras propias reglas particulares. Entre otras cosas, indicamos que los bordes sólo pueden indicarse en píxeles, porcentaje, rem o em, y que las unidades admitidas en general para otras propiedades son porcentajes, unidades viewport y otras relativas incluidas. Finalmente, definimos la configuración del nesting, admitiendo hasta 4 niveles.

Para terminar, añadimos un nuevo script en el fichero package.json llamado prestart para revisar todos los archivos implicados con estas reglas:

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

Si ejecutamos npm run prestart podremos ver en el terminal un listado con los problemas encontrados:

2. Uso en VS Code

Para utilizar cómodamente StyleLint en VS Code podemos instalar la extensión correspondiente.

Ahora vamos a configurarlo para que esté continuamente revisando el código CSS del proyecto. Pulsamos F1 y escribimos settings.json en el cuadro que aparecerá. Elegimos Abrir configuración de usuario json.

Al final de este fichero añadimos lo siguiente: en primer lugar desactivamos los comprobadores de código que pueda haber en VS Code y activamos los de StyleLint, para evitar errores duplicados:

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

Cada vez que guardemos cambios en el CSS, podremos ver en la pestaña Problems del terminal de Code (y también marcados en rojo en el CSS) los errores que ha detectado.

De forma opcional, podemos también activar el auto-fix de StyleLint cuando guardemos nuestros CSS. Esto hará que se corrijan automáticamente ciertos errores (nesting, propiedades o valores desaconsejados...) cada vez que guardemos.

"editor.codeActionsOnSave": {
      "source.fixAll.stylelint": "explicit"
},

Ejercicio 1

Vamos a retomar este ejercicio de un documento anterior, donde se trabajaba con media queries para posicionar unas cajas según diferentes resoluciones de pantalla. Sobre el ejercicio resuelto, se pide:

  • Añadirlo a un proyecto Vite
  • Incorporar StyleLint al proyecto
  • Instalar la extensión de StyleLint para VS Code, si no la tienes ya instalada. Configúrala con auto-fix
  • Usar StyleLint para reestructurar nuestro CSS. Fíjate en lo que corrige automáticamente y repara tú el resto
  • Empaquetar el proyecto en Vite y ejecutarlo