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

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 npm avec un gestionnaire de paquet (recommandé)
• Installer npm avec les binaires node

Installer le linter SASS sous PHPStorm

• Sous PHPStorm ouvrir « Settings » ;
• Dans « Plugins » cliquez sur « Marketplace » ;
• Recherchez « Sass Lint » puis installez-le.

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

À 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 ?

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

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.

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$)

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