PHPStorm : Détecter et corriger les erreurs SASS / SCSS (lint)

Configurer PHPStorm avec Sass Lint pour détecter puis corriger les erreurs Sass dans les fichiers .sass ou .scss.
PHPStorm linter SASS sur un fichier SCSS
Linter SASS sur un fichier .scss avec le plugin Sass Lint de PHPStorm

PHPStorm permet la détection des erreurs / warnings de vos fichiers SASS et SCSS, quelque chose de super efficace pour rendre le style propre et lisible pour tout le monde ! À savoir que comme tout linter, le linter SASS vous permettra seulement de détecter les erreurs / warnings suivant des règles précises. Ces règles ne vous empêcheront pas de « compiler » votre code SASS.

Pré-requis : Installer le paquet npm sass-lint

Le paquet à installer se trouve ici : https://www.npmjs.com/package/sass-lint

sudo npm install --global sass-lint

Si jamais vous n’avez pas npm installé :

Installer le linter SASS sous PHPStorm

  • Sous PHPStorm ouvrir « Settings » ;
  • Dans « Plugins » cliquez sur « Marketplace » ;
  • Recherchez « Sass Lint » puis installez-le.
PHPStorm installation SASS Lint
Installation du linter SASS sous PHPStorm avec le plugin Sass Lint

SCSS Lint semble être une ancienne version de SASS Lint, je vous incite à n’utiliser que SASS Lint. Le plugin PHPStorm SASS Lint fonctionne pour les fichiers .scss et .sass.

Configurer PHPStorm pour détecter les « warnings » SASS

  • Dans « Settings », aller dans « Other Settings » ;
  • Ouvrir le menu « Sass Lint » ;
  • Configurer le chemin vers Node (/usr/bin/node) ;
  • Configurer le chemin vers Sass-Lint (/usr/local/bin/sass-lint).
PHPStorm configuration SASS Lint
Configurer du linter Sass Lint sous PHPStorm pour les fichiers .scss et .sass

À ce stade vous devriez avoir des warnings dans vos fichiers SASS comme sur la capture d’écran en préambule !

Configurer le linter Sass

La documentation du programme se trouve sur le dépôt Git suivant : https://github.com/sasstools/sass-lint/tree/master.

La configuration par défaut de SASS Lint est la suivante.

options:
  formatter: stylish
files:
  include: '**/*.s+(a|c)ss'
rules:
  # Extends
  extends-before-mixins: 1
  extends-before-declarations: 1
  placeholder-in-extend: 1

  # Mixins
  mixins-before-declarations: 1

  # Line Spacing
  one-declaration-per-line: 1
  empty-line-between-blocks: 1
  single-line-per-selector: 1

  # Disallows
  no-attribute-selectors: 0
  no-color-hex: 0
  no-color-keywords: 1
  no-color-literals: 1
  no-combinators: 0
  no-css-comments: 1
  no-debug: 1
  no-disallowed-properties: 0
  no-duplicate-properties: 1
  no-empty-rulesets: 1
  no-extends: 0
  no-ids: 1
  no-important: 1
  no-invalid-hex: 1
  no-mergeable-selectors: 1
  no-misspelled-properties: 1
  no-qualifying-elements: 1
  no-trailing-whitespace: 1
  no-trailing-zero: 1
  no-transition-all: 1
  no-universal-selectors: 0
  no-url-domains: 1
  no-url-protocols: 1
  no-vendor-prefixes: 1
  no-warn: 1
  property-units: 0

  # Nesting
  declarations-before-nesting: 1
  force-attribute-nesting: 1
  force-element-nesting: 1
  force-pseudo-nesting: 1

  # Name Formats
  class-name-format: 1
  function-name-format: 1
  id-name-format: 0
  mixin-name-format: 1
  placeholder-name-format: 1
  variable-name-format: 1

  # Style Guide
  attribute-quotes: 1
  bem-depth: 0
  border-zero: 1
  brace-style: 1
  clean-import-paths: 1
  empty-args: 1
  hex-length: 1
  hex-notation: 1
  indentation: 1
  leading-zero: 1
  max-line-length: 0
  max-file-line-count: 0
  nesting-depth: 1
  property-sort-order: 1
  pseudo-element: 1
  quotes: 1
  shorthand-values: 1
  url-quotes: 1
  variable-for-property: 1
  zero-unit: 1

  # Inner Spacing
  space-after-comma: 1
  space-before-colon: 1
  space-after-colon: 1
  space-before-brace: 1
  space-before-bang: 1
  space-after-bang: 1
  space-between-parens: 1
  space-around-operator: 1

  # Final Items
  trailing-semicolon: 1
  final-newline: 1

Pour ma part j’utilise la configuration par défaut qui me convient très bien. Pour créer ou surcharger votre propre configuration, créer un fichier .sass-lint.yml dans le projet ouvert avec PHPStorm. Suivant la capture d’écran en introduction, voici le chemin où se trouve mon fichier de Lint Sass.

wordpress/wp-content/themes/mokime/.sass-lint.yml

À savoir que j’ai du spécifier le chemin d’accès de mon fichier de lint SASS car PHPStorm ne le trouvait pas dans l’arborescence. Peut-être qu’il nous faut le spécifier dans le fichier package.json ?

PHPStorm : Configuration du linter Sass avec un fichier .sass-lint.yml
Configuration personnalisée de Sass Lint avec des règles dans le fichier .sass-lint.yml

Vous pouvez désormais personnaliser les règles de votre lint Sass !

Corriger ses fichiers .scss ou .sass avec sass-lint-auto-fixer

Un paquet npm existe pour corriger les problèmes reconnus par le linter Sass automatiquement ! Il n’y a pas d’intégration avec PHPStorm, mais il est possible de le configurer manuellement et facilement.

Le paquet se nomme sass-lint-auto-fix, vous pouvez l’installer de manière globale comme sass-lint.

sudo npm install --global sass-lint-auto-fix

Configurer PHPStorm pour exécuter sass-lint-auto-fix via un raccourci

Afin d’utiliser le fixer Sass dans PHPStorm, il vous faudra créer un programme externe et mapper une touche clavier dessus pour exécuter ce programme.

  • Dans « Settings » ;
  • Aller dans « Tools » puis « External Tools » ;
  • Ajouter une nouvelle entrée pour « Sass Lint Auto Fix » ;
  • Renseinger le chemin vers le fixer (/usr/local/bin/sass-lint-auto-fix) ;
  • Puis l’argument à utiliser (soit le fichier courrant) du nom de $FilePath$.
PHPStorm : Utiliser un programme externe pour corriger son code Sass
Configurer un programme externe sous PHPStorm pour lancer le fixer Sass

Il vous suffira ensuite de créer le raccourci clavier pour exécuter la commande.

  • Dans « Settings » ;
  • Cliquer sur « Keymap » ;
  • Rechercher « Sass » ;
  • Le programme externe que nous venons de créer apparaît ;
  • Attribuer ensuite le raccourci clavier de votre choix.
PHPStorm Sass Lint auto fix
Utiliser le programme externe sass-lint-auto-fix sur PHPStorm

Configurer PHPStorm pour corriger automatiquement ses erreurs Sass / Scss

Il est également possible de corriger automatiquement les erreurs de vos fichiers .scss ou .sass avec un « File Watcher ». À la sauvegarde de votre fichier Sass, PHPStorm exécutera directement le programme sass-lint-auto-fix.

  • Dans « Settings » ;
  • Aller dans « Tools » puis « File Watchers » ;
  • Ajouter un nouveau « Watcher » nommé « sass-lint-auto-fix » ;
      • Configuration le type de fichier (SCSS Style Sheet) ;
      • Configurer le programme (/usr/local/bin/sass-lint-auto-fix) ;
      • Configurer l’argument ($FilePath$)
PHPStorm corriger automatiquement les erreurs Sass / Scss
Configurer sass-lint-auto-fix avec le File Watcher de PHPStorm

À la sauvegarde de votre fichier .scss, le File Watcher sera lancé et corrigera automatiquement le fichier .scss courant.

Article publié le

Dernière modification le

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.