Prettier + Stylelint: Sehr sauberes CSS schreiben (Oder: sauberen Code zu halten ist ein Zwei-Werkzeug Spiel)

Es ist wirklich schön, eine ganze Codebasis zu haben, die perfekt mit einer Reihe von Code-Stilrichtlinien übereinstimmt. Alle Dateien verwenden die gleiche Einrückung, den gleichen Anführungsstil, die gleichen Abstands- und Zeilenumbruchregeln, sogar kleine Dinge wie die Art und Weise, wie Nullen in Werten behandelt werden und wie Keyframes benannt werden.

Es scheint eine gewaltige Aufgabe zu sein, aber heutzutage ist es einfacher denn je. Es scheint mir, dass es zu einem Zwei-Werkzeug-Spiel geworden ist

1. Ein Werkzeug, um leicht zu behebende Probleme automatisch zu beheben
2. Ein Werkzeug, um vor schwerer zu behebenden Problemen zu warnen

Die halbe Miete: Prettier

Auch bekannt als „Korrigiere die Dinge für mich, bitte“.

Nach meinem besten Wissen ist Prettier ein ziemlich neues Projekt, das erst im Januar 2017 auf den Markt kam. Jetzt, im letzten Quartal 2017, scheint es, dass es von jedem und seiner Cousine benutzt wird. Sie nennen es einen Meinungsstarken Code-Formatierer.

Die große Idee: Beim Speichern eines Dokuments geschieht automatisch eine ganze Menge Codeformatierung. Das ist ein glorreicher Anblick. Einrückung und Abstände werden korrigiert. Anführungszeichen werden konsistent gemacht. Semikolons werden hinzugefügt.

Führen Sie Prettier einmal über Ihre Codebasis und vorbei sind die schlammigen Commits voller Codeformatierungs-Kram. (Sie könnten erwägen, einen temporären Git-Benutzer anzulegen, damit ein Benutzer nicht den Eindruck erweckt, eine Unmenge von Codezeilen mehr committet zu haben als ein anderer, wenn Ihnen das wichtig ist.) Allein das ist ein verdammt schöner Vorteil. Es erleichtert die Durchsicht von Commits erheblich und spart eine Menge mühsame Arbeit.

Wie dieser Beitrag andeutet, ist Prettier aber nur die halbe Miete. Sie werden feststellen, dass Prettier nur eine Handvoll Optionen unterstützt. Tatsächlich bin ich mir ziemlich sicher, dass es bei seiner Veröffentlichung überhaupt keine Konfiguration hatte. Meinungsstark, in der Tat.

Was es unterstützt, sind Dinge, die leicht zu beheben sind und keiner menschlichen Gehirnleistung bedürfen. Verwenden Sie versehentlich doppelte Anführungszeichen (uggkch Muskelgedächtnis), wenn Ihr Styleguide einfache Anführungszeichen vorsieht? Boom – geändert beim Speichern.

Es gibt andere potenzielle Probleme, die nicht so einfach zu beheben sind. Zum Beispiel haben Sie einen ungültigen #HEX-Code verwendet. Wahrscheinlich möchten Sie nicht, dass ein Computer rät, was Sie damit gemeint haben. Das ist besser, als es einfach als Fehler visuell markiert zu bekommen, damit Sie es beheben können.

Hier kommt der nächste Teil ins Spiel.

Die andere Hälfte der Miete: Stylelint

Auch bekannt als „Lass mich über Probleme wissen, damit ich sie beheben kann“.

Stylelint ist genau das. Tatsächlich haben Sie in dem obigen GIF, das zeigt, wie Prettier seine Arbeit macht, rote Punkte und rote Umrandungen in meinem Sublime Text-Editor gesehen. Das war nicht Prettier, das mir zeigte, was es beheben würde (Prettier zeigt keine Fehler an, es behebt einfach, was es kann). Das war Stylelint, das sein Linting durchführte und mir diese Fehler anzeigte.

Während Prettier etwa 10 Regeln unterstützt, unterstützt Stylelint etwa 150. Es gibt eine Standardkonfiguration, aber Sie können auch so fein granular wie gewünscht vorgehen und konfigurieren, wie Sie möchten. David Clark hat letztes Jahr hier auf CSS-Tricks darüber geschrieben.

Mit diesen Warnungen, die so klar sichtbar sind, können Sie sie schnell von Hand beheben. Es wird ziemlich zur zweiten Natur.

Alles zum Laufen bringen

Diese Werkzeuge funktionieren in einer Vielzahl von Code-Editoren.

Es ist sehr leicht zu denken „Ich installiere das einfach in meinen Code-Editor, und es funktioniert!“ Das passiert mir jedes Mal. Diese Werkzeuge zum Laufen zu bringen, ist wieder ein zweiteiliges Spiel.

1. Code-Editor-Plugin installieren.
2. Die npm / yarn Installationssachen erledigen. Das sind Node-basierte Werkzeuge. Das bedeutet nicht, dass Ihr Projekt in der Produktion etwas mit Node zu tun haben muss, dies ist eine lokale Entwicklung Abhängigkeit.

Dies sind bewusst getrennte Dinge. Der Kern dieser Werkzeuge ist der Code, der Ihren Code parst und die Probleme identifiziert, die er beheben wird. Das geschieht über APIs, die andere Werkzeuge aufrufen können. Das bedeutet, dass diese Werkzeuge nicht neu geschrieben und für die Arbeit in einer neuen Umgebung portiert werden müssen, stattdessen ruft diese neue Umgebung dieselben APIs auf wie alle anderen und tut, was sie mit den Ergebnissen tun muss.

Oben ist ein einfaches Projekt in Sublime Text mit installierten Prettier und Stylelint. Beachten Sie, dass `package.json` zeigt, dass wir unsere Werkzeuge installiert haben, und ich liste meine „Pakete“ auf, damit Sie sehen können, dass ich das Sublime Text Plugin jsPrettier installiert habe. Sie können dort auch die Dotfiles sehen, die die Regeln für beide Werkzeuge konfigurieren.

Lassen Sie sich nicht vom „js“-Teil irreführen. Sie könnten dieses Setup auf dem CSS Ihrer WordPress-Site verwenden. Es spielt wirklich keine Rolle, was Ihr Projekt ist.

Extravaganter werden

Hier gibt es sicherlich einige Verbesserungen, die vorgenommen werden können. Zum Beispiel

• Sie könnten erwägen, Stylelint so zu konfigurieren, dass Probleme ignoriert werden, die Prettier behebt. Sie werden ohnehin behoben, warum also die Fehler anzeigen.
• Sie könnten erwägen, Ihren Deployment-Prozess zu aktualisieren, um anzuhalten, wenn Stylelint-Probleme gefunden werden. Manchmal zeigt Stylelint einen Fehler an, der buchstäblich ein Problem verursachen wird, daher sollte er wirklich nicht in die Produktion gelangen.
• Wir haben hier meist über CSS gesprochen, aber JavaScript ist wohl noch wichtiger zum Linting (und Prettier unterstützt es auch). ES Lint ist wahrscheinlich der richtige Weg hier. Es gibt auch Werkzeuge wie Rubocop für Ruby, und ich bin sicher, es gibt Linter für fast jede erdenkliche Sprache.

Verwandt

• Stylelint Co-Creator David Clark stellt Stylelint vor
• Ashley Nolan über Stylelint, mit einigen interessanten historischen Daten
• Stoyan Stefanov über die Integration von Stylelint und TextMate
• Erzwingen des CSS-Syntaxstils
• Artem Sapegin über Warum Roboter unseren Code für uns formatieren sollten
• Das Kapitel von SurviveJS über Code-Formatierung.
• Mrm: Kommandozeilen-Tool, das Ihnen hilft, die Konfiguration Ihrer Open-Source-Projekte synchron zu halten