Début avec SCSS-lint

SCSS-lint: Une arme pour garder le code SASS rangé et cohérent

Cet article introduira comment utiliser SCSS-lint, un puissant outil de gemme Ruby, pour maintenir la netteté et la cohérence de la base de code SASS. Il le fait en marquant une utilisation suspecte et en garantissant que la feuille de style est facile à lire.

Points de base:

• SCSS-lint est un puissant outil de gemme Ruby qui aide à maintenir la netteté et la cohérence de la base de code SASS en marquant une utilisation suspecte et en garantissant que les feuilles de style sont faciles à lire. Vous devez l'installer avant utilisation et l'outil de ligne de commande est nommé scss-lint.
• La configuration de SCSS-lint implique de définir les règles à suivre via le fichier YAML dans le répertoire racine du projet. Ce fichier est généralement nommé .scss-lint.yml et contient toutes les configurations de vérification du style de code. Vous pouvez transmettre des options telles que --config ou --exclude à SCSS-lint pour personnaliser le processus de vérification du style de code.
• Il est recommandé d'utiliser un crochet pré-engagé pour vérifier le code avant de s'engager dans le référentiel distant pour garder le code bien rangé. Cela peut être configuré avec un package NPM léger qui fournit une prise en charge des hooks GIT via package.json des fichiers. Si SCSS-lint renvoie une erreur au cours de ce processus, le commit disparaîtra et le code doit être corrigé pour adopter l'engagement.

La rédaction du code exécutable est la partie la plus simple d'un site Web, d'une application ou de tout développement de logiciels. La partie difficile de rendre l'ensemble du projet évolutif, testé, correctement documentée et facile à contribuer.

Une partie de ceci est d'avoir une base de code propre et cohérente. Propre, car le maintien du code "étrange" laid n'est certainement pas une chose agréable; Si le code se ressemble partout dans le logiciel, vous vous habituerez bientôt à la façon dont il est écrit.

Avec le côté SASS, il y a certaines choses que vous pouvez faire pour rendre le code bien rangé et cohérent. La première consiste à suivre certains guides de codage, tels que le Guide CSS et le guide SASS. Une autre chose est de vérifier pour votre base de code.

Si vous n'êtes pas familier avec le mot

Vérifiez , voici l'explication de Wikipedia:

Dans la programmation informatique, "Check" fait initialement référence à un programme spécifique qui marque certaines structures suspectes et peuproduits (éventuellement des erreurs) dans le code source C. Maintenant, ce terme est souvent utilisé pour désigner des outils qui marquent l'utilisation suspecte dans les logiciels écrits dans n'importe quel langage informatique.

Quelle est l'utilisation suspecte de Sass? Cela dépend de la façon dont vous définissez "suspect", mais plus largement, il peut s'agir de s'assurer que la feuille de style est facile à lire et non compliquée. Par exemple, limitez l'utilisation de la nidification du sélecteur à un seul niveau.

Pour vérifier notre base de code SASS, il existe un excellent outil appelé SCSS-LINT. Parlons maintenant de la mauvaise nouvelle: SCSS-Lint est un joyau rubis, et vous devez préinstaller ce joyau, peu importe comment vous l'exécutez (CLI, grognement, gulp ...). La bonne nouvelle est que certaines personnes adorables développent actuellement des versions de package NPM de SCSS-lint, donc tôt ou tard nous pourrions nous débarrasser de cette étape supplémentaire fastidieuse. Ok, commençons:

<code class="language-bash">$ gem install scss_lint</code>

Remarque: Pour des raisons de dénomination, le gemme est nommé scss_lint, mais l'outil de ligne de commande est en fait scss-lint. La bibliothèque est nommée SCSS-lint. Parce que ce n'est pas assez compliqué… :)

En démarrage avec les outils CLI

SCSS-LINT a de nombreuses options. En fait, tant que cela peut être un peu dépassé au début. Heureusement, nous n'utilisons pas souvent beaucoup d'options, alors jetons un coup d'œil à ces options.

avec les options -c ou --config, vous pouvez transmettre le chemin d'accès au fichier de configuration, ce qui aidera à définir les règles à appliquer à la base de code. Par exemple:

<code class="language-bash">$ scss-lint . --config .scss-lint.yml</code>

Selon votre projet, vous pouvez utiliser les options -e ou --exclude pour exclure certains fichiers ou dossiers du processus de vérification du style de code. Par exemple, vous ne souhaiterez peut-être pas vérifier votre bibliothèque tierce ou votre module de nœud. Par exemple:

<code class="language-bash">$ scss-lint . --exclude ./node_modules/**/*</code>

Pour une utilisation plus complexe de --exclude, vous pouvez le définir dans le fichier de configuration transmis par --config.

Il existe d'autres options, mais j'ai l'impression que cela suffit pour commencer.

Le premier paramètre transmis à

est le dossier à exécuter. S'il est omis, la valeur par défaut est scss-lint, c'est-à-dire le dossier actuel. Si vous souhaitez spécifier un dossier spécifique, vous pouvez: .

<code class="language-bash">scss-lint ./assets/stylesheets</code>

Configurer le vérificateur de style de code

Maintenant que nous sommes prêts à vérifier notre base de code SASS, nous devons définir les règles qui doivent être suivies. SCSS-LINT a de nombreux inspecteurs de style de code

(ils sont appelés), tellement que tous les inspecteurs répertoriés ici sont trop longs. Je vous suggère de lire la documentation du vérificateur de style de code. L'idée est que vous créez un fichier YAML dans le répertoire racine du projet avec toutes les configurations de vérification du style de code. Par défaut, SCSS-lint essaiera de trouver le fichier

dans le dossier actuel, donc je vous suggère de nommer le fichier comme celui-ci. Cependant, si vous préférez un nom différent, vous pouvez le faire;

.scss-lint.yml SASS Guide vous fournit un fichier de configuration prêt à l'emploi à utiliser dans votre projet. Si vous souhaitez personnaliser quelque chose, assurez-vous de regarder de plus près, mais dans l'ensemble, cela devrait résoudre le problème. --config

Vérifiez le style de code lors de la soumission

Une très bonne chose est d'utiliser un crochet de pré-engagement lorsque vous vous engagez à s'assurer que le code est propre ( vérifié

). J'ai couvert les tests SASS et les crochets pré-comités dans mon précédent article de SitePoint.

Si vous n'êtes pas sûr de ce qu'est un crochet pré-engagé, il s'agit essentiellement d'un mécanisme conçu pour exécuter certaines opérations avant d'appliquer le commit. Si une action effectuée lance une erreur, le commit sera interdit.

Assurez-vous de vérifier le code avant de vous engager dans le référentiel distant, il s'agit du cas d'utilisation parfait pour les crochets GIT. Dans cette section, nous verrons comment le configurer de manière très simple.

Pour ce faire, nous utiliserons un package NPM très léger qui fournit une prise en charge des crochets GIT directement via package.json Fichiers. Il existe de nombreuses bibliothèques qui peuvent le faire, mais j'ai personnellement choisi pre-commit. Comme indiqué ci-dessous:

<code class="language-bash">$ gem install scss_lint</code>

Lors de la soumission, le Hook pré-Commit déclenche et exécute le script NPM Lint (exactement comme

). Comme vous pouvez le voir dans le code, le script NPM Lint exécute la commande npm run lint. Si SCSS-lint renvoie une erreur, le commit interdit et le code doit être corrigé pour passer le commit. scss-lint .

Si vous exécutez SCSS-lint via Gulp, Grunt ou tout autre outil, vous pouvez exécuter la tâche dans le script NPM Lint au lieu d'utiliser le binaire

directement. De même, vous pouvez transmettre des options comme scss-lint ou --config. --exclude

Réflexions finales

Nous pouvons toujours faire mieux, mais je pense que c'est une excellente introduction à SCSS-lint, et nous pouvons réellement l'utiliser pour les projets existants et nouveaux d'une manière simple et puissante.

les gars, il n'y a aucune raison de continuer à soumettre des codes sales, de le vérifier avant de pousser!

(La partie FAQ du texte original est conservée ici car son contenu est lié au sujet de l'article et les informations seront perdues après réécriture)

Quel est le but principal de SCSS Lint?

SCSS Lint est un outil qui aide les développeurs à maintenir un style de codage cohérent dans leurs fichiers SCSS. La même base de code.

Comment installer SCSS Lint?

SCSS Lint est un gemme Ruby, vous devez donc faire installer Ruby sur votre système pour l'utiliser. , vous pouvez exécuter

à partir de la ligne de commande pour peindre vos fichiers SCSS.

gem install scss_lint Comment configurer SCSS Lint? scss-lint

SCSS Lint peut être configuré en créant un fichier

dans le répertoire racine de votre projet. et chaque linter a son propre ensemble d'options que vous pouvez configurer.

Puis-je utiliser des peluches SCSS avec d'autres outils?

Oui, SCSS Lint peut être intégré à de nombreux outils et éditeurs populaires. Par exemple, vous pouvez l'utiliser avec des coureurs de tâches comme Grunt et Gulp, ou avec des éditeurs de code comme le texte sublime et l'atome. Cela vous permet de peindre automatiquement vos fichiers SCSS dans le cadre de votre flux de travail de développement.

Quelles sont les règles de peluche SCSS courantes?

SCSS Lint est livré avec un large éventail de règles qui appliquent de bonnes pratiques dans le code SCSS. Certaines règles communes incluent l'application de l'indentation cohérente, le fait de refuser des espaces de fuite et nécessitent une nouvelle ligne à la fin des fichiers. Il existe également des règles pour des fonctionnalités SCSS plus spécifiques, comme interdire l'utilisation de sélecteurs d'identification, ou nécessitant un espace avant l'autoroute d'ouverture d'une règle.

Comment ignorer certains avertissements de peluches SCSS?

S'il y a certains avertissements que vous souhaitez ignorer, vous pouvez le faire en ajoutant un commentaire avec // scss-lint:disable RuleName avant la ligne de code. Pour réactiver la règle, vous pouvez ajouter un autre commentaire avec // scss-lint:enable RuleName. Vous pouvez également désactiver tous les linceurs pour une section de code avec // scss-lint:disable all.

Puis-je utiliser SCSS Lint avec des fichiers CSS?

SCSS Lint est spécialement conçu pour SCSS, qui est un superset de CSS. Cela signifie qu'il peut être codé CSS, mais il peut ne pas comprendre une syntaxe spécifique au CSS. Si vous travaillez principalement avec CSS, vous voudrez peut-être envisager d'utiliser un linter spécifique au CSS comme Stylelint.

Comment mettre à jour SCSS Lint?

Vous pouvez mettre à jour SCSS Lint en exécutant la commande gem update scss_lint dans votre terminal. Cela téléchargera et installera la dernière version du gemme. C'est une bonne idée de garder vos outils à jour pour bénéficier des dernières fonctionnalités et corrections de bogues.

Quelles sont les alternatives à SCSS Lint?

Il existe plusieurs alternatives à SCSS Lint, notamment Stylelint, CSSlint et Sass Lint. Ces outils ont des fonctionnalités similaires, mais elles peuvent avoir différentes règles ou options de configuration. Vous devez choisir l'outil qui correspond le mieux à vos besoins et préférences.

Comment désinstaller SCSS Lint?

Si vous n'avez plus besoin de peluche SCSS, vous pouvez le désinstaller en exécutant la commande gem uninstall scss_lint dans votre terminal. Cela supprimera la gemme de votre système. Si vous souhaitez le réinstaller plus tard, vous pouvez le faire en exécutant à nouveau la commande d'installation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!