Erste Schritte mit SCSS-Lint

scss-Lint: Eine Waffe, um Sass Code ordentlich und konsistent zu halten

In diesem Artikel wird die Verwendung von SCSS-Lint, einem leistungsstarken Ruby-Edelstein-Tool verwendet, um die Ordentlichkeit und Konsistenz der Sass-Codebasis aufrechtzuerhalten. Dies geschieht, indem es verdächtige Verwendung markiert und sicherstellt, dass das Stylesheet leicht zu lesen ist.

Kernpunkte:

• scss-lint ist ein leistungsstarkes Ruby-Edelstein-Tool, mit dem die Sauberkeit und Konsistenz der Sass-Codebasis aufrechterhalten wird, indem verdächtige Verwendung markiert und sicherstellen, dass Stylesheets leicht zu lesen sind. Sie müssen es vor dem Gebrauch installieren und das Befehlszeilen -Tool heißt scss-lint.
• Die Konfiguration von SCSS-Lint beinhaltet die Definition der Regeln, die über die YAML-Datei im Projektstammverzeichnis befolgt werden sollen. Diese Datei heißt normalerweise .scss-lint.yml und enthält alle Konfigurationen für Codestil -Prüfung. Sie können Optionen wie --config oder --exclude an SCSS-Lint übergeben, um den Codestil-Überprüfungsvorgang anzupassen.
• Es wird empfohlen, einen Pre-Commit-Hook zu verwenden, um den Code zu überprüfen, bevor Sie sich zum Remote-Repository verpflichten, um den Code ordentlich zu halten. Dies kann mit einem leichten NPM -Paket eingerichtet werden, das Git -Hooks über package.json Dateien unterstützt. Wenn SCSS-Lint während dieses Prozesses einen Fehler zurückgibt, wird das Commit abbrechen und der Code muss behoben werden, um das Commit zu bestehen.

Runnable -Code schreiben ist der einfachste Teil einer Website, einer Anwendung oder einer Softwareentwicklung. Das gesamte Projekt skalierbar, getestet, ordnungsgemäß dokumentiert und leicht zu tragen ist, ist der schwierige Teil.

Teil davon ist eine saubere und konsistente Codebasis. Sauber, denn die Aufrechterhaltung des hässlichen "seltsamen" Code ist definitiv keine angenehme Sache; Wenn der Code überall in der Software gleich aussieht, werden Sie sich bald daran gewöhnen, wie er geschrieben wird.

Mit der Sass -Seite können Sie einige Dinge tun, um den Code ordentlich und konsistent zu machen. Die erste besteht darin, einigen Codierungsführer wie dem CSS -Handbuch und dem Sass Guide zu folgen. Eine andere Sache ist, für Ihre Codebasis zu überprüfen.

Wenn Sie mit dem Wort

das Wort nicht vertraut sind, ist hier die Erklärung aus Wikipedia:

In der Computerprogrammierung bezieht sich "Check" zunächst auf ein bestimmtes Programm, das einige verdächtige und unportierbare Strukturen (möglicherweise Fehler) im C -Quellcode markiert. Jetzt wird dieser Begriff häufig verwendet, um Tools zu verweisen, die verdächtige Nutzung in Software in jeder Computersprache markieren.

Was ist der verdächtige Gebrauch in Sass? Es hängt davon ab, wie Sie "verdächtig" definieren, aber im weiteren Sinne ist es möglicherweise nur eine Frage der Sicherstellung, dass das Stylesheet leicht zu lesen und nicht kompliziert ist. Beschränken Sie beispielsweise die Verwendung des Selektornistens auf ein einzelnes Niveau.

Um unsere Sass-Code-Basis zu überprüfen, gibt es ein großartiges Tool namens SCSS-Lint. Lassen Sie uns nun über die schlechten Nachrichten sprechen: SCSS-Lint ist ein Ruby-Juwel, und Sie müssen dieses Juwel vorbereiten, egal wie Sie es ausführen (Cli, Grunzen, Schluck ...). Die gute Nachricht ist, dass einige schöne Leute derzeit NPM-Paketversionen von SCSS-Lint entwickeln, sodass wir diesen mühsamen zusätzlichen Schritt früher oder später loswerden können. OK, fangen wir an:

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

Hinweis: Aus Gründen der Namensgründe heißt das Edelstein scss_lint, aber das Befehlszeilen -Tool ist tatsächlich scss-lint. Die Bibliothek heißt SCSS-Lint. Weil es nicht kompliziert genug ist… :)

Erste Schritte mit CLI -Tools

scss-lint hat viele Optionen. Tatsächlich so sehr, dass es anfangs etwas überfordert sein kann. Glücklicherweise nutzen wir nicht oft viele Optionen, also schauen wir uns diese Optionen an.

Mit den Optionen -c oder --config können Sie den Pfad an die Konfigurationsdatei übergeben, mit der die Regeln für die Codebasis definiert werden sollen. Zum Beispiel:

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

Abhängig von Ihrem Projekt möchten Sie möglicherweise die Optionen -e oder --exclude verwenden, um bestimmte Dateien oder Ordner aus dem Codestil -Überprüfungsvorgang auszuschließen. Sie möchten beispielsweise Ihre Bibliothek oder Ihr Knotenmodul möglicherweise nicht überprüfen. Zum Beispiel:

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

Für eine komplexere Verwendung von --exclude können Sie sie in der Konfigurationsdatei definieren, die --config übergeben wird.

Es gibt andere Optionen, aber ich habe das Gefühl, dass dies ausreicht, um loszulegen.

Der erste an

übergebene Parameter ist der zu ausgeführte Ordner. Wenn die Standardeinstellung ausgelassen wird, ist der Standard der aktuelle Ordner. Wenn Sie einen bestimmten Ordner angeben möchten, können Sie: scss-lint .

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

Konfigurieren Sie den Code -Stil -Checker

Nachdem wir bereit sind, unsere Sass -Codebasis zu überprüfen, müssen wir definieren, welche Regeln eingehalten werden sollten. SCSS-Lint hat viele

Code-Style-Inspektoren

(sie werden genannt), so viele, dass alle hier aufgeführten Inspektoren zu lang sind. Ich schlage vor, Sie lesen die Dokumentation für den Codestil -Checker. Die Idee ist, dass Sie im Projektroot -Verzeichnis eine YAML -Datei mit allen Codestil -Check -Konfigurationen erstellen. Standardmäßig versucht SCSS-Lint, die

-Datei im aktuellen Ordner zu finden, daher schlage ich vor, dass Sie die Datei wie diese benennen. Wenn Sie jedoch einen anderen Namen bevorzugen, können Sie dies nur mit der Option

übergeben. .scss-lint.yml --config SASS Guide bietet Ihnen eine vorbereitete Konfigurationsdatei, die Sie in Ihrem Projekt verwenden können. Wenn Sie etwas anpassen möchten, schauen Sie sich unbedingt genauer an, aber insgesamt sollte es das Problem beheben.

Überprüfen Sie den Codestil, wenn Sie

senden Eine sehr schöne Sache ist die Verwendung eines Vor-Commit-Hakens, wenn Sie sich verpflichten, sicherzustellen, dass der Code sauber ist (

überprüft

). Ich habe in meinem vorherigen SitePoint-Artikel Sass-Tests und Pre-Commit-Haken behandelt.

Wenn Sie sich nicht sicher sind, was ein Vor-Commit-Haken ist, ist es im Grunde genommen ein Mechanismus, der einige Operationen ausführen soll, bevor Sie das Commit anwenden. Wenn eine Aktion ausgeführt wird, wird ein Fehler ausgelöst, das Commit wird abgebrochen.

Stellen Sie sicher, dass Sie den Code überprüfen, bevor Sie sich zum Remote -Repository verpflichten. Dies ist der perfekte Anwendungsfall für Git -Hooks. In diesem Abschnitt werden wir sehen, wie man es auf sehr einfache Weise einstellt.

Um dies zu tun, werden wir ein sehr leichtes NPM -Paket verwenden, das Git -Hooks direkt über package.json Dateien unterstützt. Es gibt viele Bibliotheken, die dies tun können, aber ich habe persönlich pre-commit gewählt. Wie unten gezeigt:

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

Bei der Übermittlung löst der Pre-Commit-Haken das FININT NPM-Skript aus (genau das gleiche wie

). Wie Sie aus dem Code sehen können, wird im FININT NPM -Skript den Befehl npm run lint ausgeführt. Wenn SCSS-Lint einen Fehler zurückgibt, wird das Commit abbrechen und der Code muss behoben werden, um das Commit zu übergeben. scss-lint .

Wenn Sie SCSS-Lint über Gulp, Grunzen oder ein anderes Tool ausführen, können Sie die Aufgabe im FINT-NPM-Skript ausführen, anstatt die

-Kinärer direkt zu verwenden. In ähnlicher Weise können Sie Optionen wie scss-lint oder --config übergeben. --exclude

Endgültige Gedanken

Wir können es immer besser machen, aber ich denke, dies ist eine großartige Einführung in die SCSS-Lint, und wir können sie tatsächlich sowohl für bestehende als auch für neue Projekte auf einfache und leistungsstarke Weise verwenden.

Leute, es gibt keinen Grund, weiterhin schmutzige Codes einzureichen, es schau es dir an, bevor du drückst!

(Der FAQ -Teil im Originaltext wird hier aufbewahrt, da sein Inhalt mit dem Thema des Artikels zusammenhängt und Informationen nach dem Umschreiben verloren gehen)

Was ist der Hauptzweck von SCSS -Lint?

SCSS -Lint ist ein Tool, das den Entwicklern hilft, einen konsistenten Codierungsstil in ihren SCSS -Dateien zu erhalten. Die gleiche Codebasis.

Wie installiere ich SCSS -Lint?

scss Lint ist ein Ruby -Juwel, so Sie können

aus der Befehlszeile ausführen, um Ihre SCSS -Dateien abzugeben.

gem install scss_lint Wie konfiguriere ich SCSS -Lint? scss-lint

scss und jeder Linter verfügt über eigene Optionen, die Sie konfigurieren können.

Kann ich SCSS -Lint mit anderen Tools verwenden?

Ja, SCSS -Lint kann in viele beliebte Tools und Redakteure integriert werden. Sie können es beispielsweise mit Aufgabenläufern wie Grunt und Gulp oder mit Code -Editoren wie Sublime Text und Atom verwenden. Auf diese Weise können Sie Ihre SCSS -Dateien im Rahmen Ihres Entwicklungsworkflows automatisch abgeben.

Was sind einige gemeinsame SCSS -Lint -Regeln?

scss Lint verfügt über eine Vielzahl von Regeln, die gute Praktiken im SCSS -Code erzwingen. Einige gängige Regeln umfassen die Durchsetzung einer konsistenten Einklebung, die Ablehnung der nachfolgenden Whitespace und die Erfordernis einer neuen Linie am Ende der Dateien. Es gibt auch Regeln für spezifischere SCSS -Funktionen, z.

Wie ignoriere ich bestimmte SCSS -Lintwarnungen?

Wenn es bestimmte Warnungen gibt, die Sie ignorieren möchten, können Sie dies tun, indem Sie einen Kommentar mit

vor der Codezeile hinzufügen. Um die Regel wieder zu erleben, können Sie mit // scss-lint:disable RuleName einen weiteren Kommentar hinzufügen. Sie können auch alle Linter für einen Codeabschnitt mit // scss-lint:enable RuleName. // scss-lint:disable all deaktivieren.

Kann ich SCSS -Lint mit CSS -Dateien verwenden?

SCSS -Lint wurde speziell für SCSS entwickelt, ein Superset von CSS. Dies bedeutet, dass es CSS-Code für den FININT-Code kann, aber es kann möglicherweise einige CSS-spezifische Syntax nicht verstehen. Wenn Sie in erster Linie mit CSS arbeiten, sollten Sie einen CSS-spezifischen Strinkern wie Stylelint verwenden.

Wie aktualisiere ich SCSS -Lint?

Sie können SCSS -Lint aktualisieren, indem Sie den Befehl gem update scss_lint in Ihrem Terminal ausführen. Dadurch wird die neueste Version des Edelsteins heruntergeladen und installiert. Es ist eine gute Idee, Ihre Tools auf dem neuesten Stand zu halten, um von den neuesten Funktionen und Fehlerbehebungen zu profitieren.

Was sind die Alternativen zum SCSS -Lint?

Es gibt mehrere Alternativen zum SCSS -Lint, darunter Stylelint, CSSlint und Sass Lint. Diese Tools haben ähnliche Funktionen, können jedoch unterschiedliche Regeln oder Konfigurationsoptionen haben. Sie sollten das Tool auswählen, das Ihren Anforderungen und Vorlieben am besten entspricht.

Wie deinstalliere ich SCSS -Lint?

Wenn Sie kein SCSS -Lint mehr benötigen, können Sie ihn deinstallieren, indem Sie den Befehl gem uninstall scss_lint in Ihrem Terminal ausführen. Dadurch wird das Edelstein aus Ihrem System entfernt. Wenn Sie es später neu installieren möchten, können Sie dies tun, indem Sie den Installationsbefehl erneut ausführen.

Das obige ist der detaillierte Inhalt vonErste Schritte mit SCSS-Lint. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!