Stylelint como lint de hojas de estilo

Stylelint es un lint especializado en la síntaxis del lenguaje CSS.

Nos permite imponer el estilo a seguir para escribir CSS ademas de analizar nuestro código CSS en busca de bugs.

Entre las principales características de este lint destacan:

• soporte para el uso de variables CSS
• soporte para cualquier selector de nivel 4
• proporciona más de 170 reglas para analizar código CSS
• permite exportar la configuración de las reglas mediante shareable configs
• extrae y analiza CSS contenido en Html, Markdown, CSS-in-JS o CSS contenido en JavaScript templates

¿Cómo utilizarlo en mi proyecto?

Lo primero será instalar stylelint en nuestro proyecto:

// instalar stylelint como una devDependency
npm install --save-dev stylelint

// lint todos los archivos css del proyecto
npx stylelint "**/*.css"

La pantalla nos recibirá con un error del tipo:

Error: No configuration provided

Esto se debe a que no hemos proporcionado un archivo que defina que reglas CSS queremos que sean analizadas e implantadas. Si bien es posible configurar algunas de las 170 reglas que stylelint nos proporciona, yo voy a optar por utilizar la configuración proporcionada por stylelint-config-standard.

// instalar configuracion de las reglas de CSS
npm install --save-dev stylelint-config-standard

Una vez instalado, configuramos stylelint-config-standard como la configuración a usar.

// fichero: stylelint.config.js
module.exports = {
  "extends": "stylelint-config-standard"
}

stylelint ha sido configurado y ya puede hacer lint del código CSS.

// lint todos los archivos css del proyecto
npx stylelint "**/*.css"