Linting und Formatierung mit ESLint in VS Code

Blog

JavaScript-Tools sind unglaublich! In diesem Artikel erfahren Sie, wie Sie Ihren Code mit ESLint und Visual Studio Code formatieren und Vorschläge zur Verbesserung machen können!



ESLint kann Ihren Code formatieren und Ihnen sagen, wie Sie ihn verbessern können!

Inhaltsverzeichnis

  • Projektaufbau
  • ESLint-Setup
  • ESLint in Aktion
  • Formatieren beim Speichern
  • Anpassen der ESLint-Konfiguration
  • Einpacken

ESLint kann Ihren Code nicht nur formatieren, sondern auch analysieren und Vorschläge zur Verbesserung machen. ESLint ist konfigurierbar, sodass Sie die Formatierungsprobleme auswählen können, die Ihnen wichtig sind. Lass uns mal sehen!

Projektaufbau

Beginnen wir mit einem einfachen Projekt. Ich habe eins JavaScript Datei zu starten. Beachten Sie, dass aus der Perspektive der Formatierung einige Dinge nicht so gut aussehen.



  • inkonsistente Verwendung von Anführungszeichen
  • inkonsistente Verwendung von Semikolon
  • Abstand

Nachdem die JavaScript-Datei vorhanden ist, müssen wir dieses Projekt jetzt als ein . initialisieren NPM-Projekt durch Laufen npm init . Ich werde alle Standardwerte akzeptieren.



ESLint-Setup

Mit einem NPM-Projekt, das eine JavaScript-Datei enthält, können wir mit der Einrichtung von ESLint beginnen. Zuerst müssen wir es global auf unserem Computer installieren, indem wir es ausführen npm install -g eslint .

Wo kann man Kucoin kaufen?

Jetzt können wir dieses Paket verwenden, um eine ESLint-Konfiguration durch Ausführen zu initialisieren eslint --init . Sie werden mit einigen verschiedenen Fragen zu Ihrem Projekt aufgefordert, um die beste Konfiguration zu erstellen.

Eine Frage wird sein, welchem ​​Styleguide Sie folgen möchten. Mit anderen Worten, möchten Sie neu beginnen oder eine vorhandene Konfigurationsvorlage verwenden. Eine unglaublich beliebte ist von Airbnb, die ich unten ausgewählt habe.

Sie werden auch aufgefordert, zusätzliche Pakete zu installieren. Wählen Sie Ja.

Danach sollten Sie ein brandneues haben .eslintrc Datei in Ihrem Projekt. Meins ist ein JSON Datei basierend auf meiner Antwort während der Initialisierung.

ESLint in Aktion

Mit unserer Konfigurationsdatei werden Sie vielleicht überrascht sein, dass sie immer noch nichts für uns tut. Wenn Sie die JavaScript-Datei wieder öffnen, sieht sie immer noch gleich aus.

So integrieren Sie ESLint in Visual Studio-Code , müssen wir die ESLint-Erweiterung für Visual Studio Code installieren.

Wenn Sie sich jetzt die JavaScript-Datei noch einmal ansehen, bemerken Sie all die bunten Schnörkel. Die Suigglies sind je nach Schweregrad farblich gekennzeichnet. Schauen wir uns einige der Probleme an.

In Zeile eins wird mir gesagt, dass ich einfache Anführungszeichen anstelle von doppelten Anführungszeichen verwenden sollte. Wir werden dies in einer Sekunde beheben.

Als nächstes erhalte ich in Zeile 5 eine Meldung, dass ich keine console.log()-Nachrichten im Code belassen soll.

Schließlich erhalte ich in Zeile 7 eine Meldung, dass ich eine Variable (eine Pfeilfunktion) definiert habe, die nie verwendet wird. Wenn der Code nirgendwo verwendet wird, sollten wir ihn loswerden. Diese Art von Nachrichten eignen sich hervorragend, um toten Code zu finden und zu entfernen!

Formatieren beim Speichern

Richten Sie ESLint ein, um Ihren Code bei jedem Speichern zu formatieren!
Nachdem wir uns nun einige der verschnörkelten Nachrichten durchgelesen haben, können wir VS Code so anpassen, dass ESLint jedes Mal, wenn wir speichern, alle Probleme (hauptsächlich Formatierungen) beheben soll. Um das Einstellungsmenü zu öffnen, können Sie unten links auf das Zahnradsymbol klicken und dann Einstellungen auswählen.

Im Einstellungsmenü können Sie suchen Schlinge . In den Ergebnissen sollten Sie ein Kontrollkästchen für sehen ESLint: Automatische Korrektur beim Speichern. Stellen Sie sicher, dass dies aktiviert ist.

Speichern Sie sie nun wieder in der JavaScript-Datei. Sie sollten einige Änderungen sehen und ein paar der Schnörkel sind verschwunden. Hier sind einige der Formatierungen, die behoben wurden.

  • konsequente Verwendung von einfachen Anführungszeichen
  • richtige Einrückung innerhalb der Funktion
  • konsequente Verwendung von Semikolon

Anpassen der ESLint-Konfiguration

Sie können Ihre ESLint-Konfiguration vollständig an Sie und die Anforderungen Ihres Teams anpassen!
Unnötig zu erwähnen, dass wir noch ein paar verschnörkelte Nachrichten übrig haben, eine über console.log()-Nachrichten. Nehmen wir an, das interessiert uns nicht wirklich, weil dies eine Node-App ist und wir Log-Anweisungen für das spätere Debuggen beibehalten möchten. Wir können die ESLint-Konfigurationsdatei anpassen, um dies zu ermöglichen.

Sie können Ihre Konfiguration anpassen, indem Sie zum Abschnitt Regeln gehen. Sie müssen Schlüssel -> Wertepaare eingeben, wobei der Schlüssel der Name der Regel ist.

VS Code ist großartig, weil es Ihnen Intellisense bietet, wenn Sie mit der Eingabe von Regelnamen beginnen. Zum Beispiel fange ich an zu tippen Konsole und ich sehe die Nein - Konsole Options-Popup;

Der Wert ist dann der Schweregrad des Problems. Sie haben drei Möglichkeiten.

  • Error
  • aus
  • warnen

Wie Sie vielleicht erwarten, führt ein Fehler zu einem roten Squiggly, zu einem Warnsignal zu einem gelben und zu nichts. Schalten wir diese Regel aus.

Yay! Keine Schnörkel mehr unter unseren Log-Statements!

Einige Regeln sind etwas komplizierter, wenn sie zwei verschiedene Informationen benötigen, einen Schweregrad und einen Wert. Ein Beispiel ist die Wahl zwischen einfachen und doppelten Anführungszeichen. Um sowohl die gewählte Art von Anführungszeichen als auch die Schweregrade zu übergeben, können Sie beide Strings in ein Array wie folgt einfügen.

Einpacken

Ich liebe es, über die Tools für JavaScript zu schreiben, besonders in Verbindung mit Visual Studio Code. Es ist so aufregend, dass Tools den wirklich langweiligen Teil Ihres Codes automatisieren und Sie gleichzeitig mit Best Practices auf dem Laufenden halten können. Ich hoffe, das hilft Ihnen, schneller besseren Code zu schreiben!

#visual-studio #javascript #web-entwicklung

scotch.io

Linting und Formatierung mit ESLint in VS Code

JavaScript-Tools sind unglaublich! In diesem Artikel erfahren Sie, wie Sie ESLint und Visual Studio Code verwenden können, um Ihren Code zu formatieren, und geben Vorschläge zur Verbesserung!