HervéRenault.fr

Logo de CSS3

Configurer stylelint

stylelint est un module Node.js qui permet de respecter un standard de formatage de ses fichiers CSS ou SCSS, et qui repère des erreurs comme le non-respect de la spécifité des sélecteurs.

Si on le lance directement dans un nouveau projet par stylelint style.css, on voit un message d'erreur pas très sympa :

Error: No configuration provided for /mon/répertoire/de/travail/style.css
    at configurationError (/usr/local/lib/node_modules/stylelint/lib/utils/configurationError.js:12:49)
    at getConfigForFile (/usr/local/lib/node_modules/stylelint/lib/getConfigForFile.js:65:4)
    at async isPathIgnored (/usr/local/lib/node_modules/stylelint/lib/isPathIgnored.js:26:17)
    at async lintSource (/usr/local/lib/node_modules/stylelint/lib/lintSource.js:41:20)
    at async /usr/local/lib/node_modules/stylelint/lib/standalone.js:203:27
    at async Promise.all (index 0)
    at async standalone (/usr/local/lib/node_modules/stylelint/lib/standalone.js:246:22)

Alors qu'en fait, il suffirait qu'il dise de faire d'abord npm init stylelint qui crée un fichier .stylelintrc.json

Ensuite, si on veut linter du SCSS, il faut ajouter npm install --save-dev stylelint-config-standard-scss et ajouter cette ligne au fichier .stylelintrc.json :

"extends": "stylelint-config-standard-scss"

Si on veut ignorer des règles, par exemple pour des sélecteurs qui ne respectent pas la convention de nommage kebab, il faut ajouter dans .stylelintrc.json :

{
  "extends": "stylelint-config-standard",
  "extends": "stylelint-config-standard-scss",
  "rules": {
      "selector-id-pattern": null,
      "selector-class-pattern": null
  }
}