So richten Sie ESLint in Atom ein, damit Sie einen Beitrag zu Open Source leisten können

Hier geht es nicht um die Flusen, die Sie aus Wolle erhalten.

Wenn Sie einen Beitrag zu Open Source-Projekten wie Free Code Camp leisten möchten, müssen Sie zunächst das Flusen einrichten.

Die meisten Projekte haben ihre eigenen Stilstandards für JavaScript, und diese werden von Flusen-Tools wie ESLint automatisch erzwungen.

Richten wir ESLint so ein, dass es in Atom, einem der beliebtesten Code-Editoren, ausgeführt wird.

Bevor wir beginnen, hier ein kurzes Heads-up, von dem ich ein paar Annahmen mache:

  • Sie haben die Beitragsrichtlinien von Free Code Camp bis zu dem Teil befolgt, in dem Setup Linting steht.
  • Und so haben Sie die notwendigen Voraussetzungen (insbesondere Node.js und npm) installiert.
  • Sie haben mindestens Grundkenntnisse in der Verwendung von Befehlszeile und Git.
  • Sie verwenden Atom als Texteditor (obwohl dieser Artikel auch dann nützlich sein sollte, wenn Sie dies nicht tun. Sie müssen lediglich die Dokumentation Ihres Texteditors nach Anweisungen zu ESLint durchsuchen.)

Was genau ist Fusseln?

"Flusen ist der Vorgang, bei dem ein Programm ausgeführt wird, das den Code auf potenzielle Fehler analysiert."

Und ESLint ist ein Flusentool, das speziell für JavaScript-Code entwickelt wurde. Sie verwenden ESLint, um in JavaScript geschriebenen problematischen Code ("Fehler") zu finden.

Übrigens stammt das "ES" im Namen von ESLint von "ECMAScript", dem offiziellen Namen der JavaScript-Kernsprache.

Stellen Sie sich ESLint als Ihre Oma vor, die Ihnen sagt, wie Sie Ihr Leben leben sollen. Sie macht Sie auf Ihre Fehler aufmerksam und fordert Sie auf, sie zu beseitigen. Du hörst Oma zu, weil Oma es weiß.

Diese "Fehler" können objektiv sein. Dies bedeutet, dass sie durch Code verursacht werden, der nicht der Syntax von JavaScript (oder einer anderen Programmiersprache) entspricht. Auf diese Weise würde man sagen, dass der Linter Syntaxfehler erkennt.

Ich sage "objektive Fehler", weil diese Fehler JavaScript selbst inhärent sind. Wenn Sie am Ende einer Variablendeklaration ein Semikolon weglassen, ist dies nach Ansicht der JavaScript-Autoren objektiv ein Fehler - auch wenn Ihr Programm dadurch nicht am Laufen gehindert wird (siehe automatisches Einfügen von Semikolons).

Oder diese Fehler können subjektiv sein. Das bedeutet, dass Sie (nicht das Technical Committee 39, das Normungsgremium von ECMAScript) einen Satz von Regeln definiert haben, denen Ihr Code folgen soll. Diese Codierungsregeln werden in der Regel in einem JavaScript-Styleguide zusammengefasst, bei dem es sich um ein Dokument handelt, in dem eine Art bewährter Codierungsmethoden deklariert wird. Free Code Camp verwendet neben vielen anderen Softwareprojekten Style-Guides.

Der JavaScript-Styleguide von Airbnb ist einer der beliebtesten für JavaScript-Entwickler, und der Styleguide von Free Code Camp basiert darauf.

Der Zweck eines Styleguides besteht darin, einen „Schreibstandard“ zu haben, dem die Entwickler Ihres Projekts folgen, um den Code sauber, einfach und konsistent zu halten. Dies ist vergleichbar mit dem Konzept des AP Stylebook, dem Journalisten folgen. Der einzige Unterschied besteht darin, dass das AP Stylebook ein Styleguide für die englische Grammatik ist, während das Airbnb-Styleguide für JavaScript ist.

Nachdem Sie festgelegt haben, wie Code für Ihr Softwareprojekt geschrieben werden soll (dh Sie haben einen Styleguide ausgewählt oder einen eigenen erstellt), können Sie Ihre Flusenregeln für ESLint einrichten.

Die Funktionsweise von ESLint besteht darin, dass Sie angeben, welche Regeln (dh, Sie nehmen Ihre Styleguide-Regeln und wandeln sie in Fusselregeln um) es kennen und worauf es achten sollte, damit ESLint Sie auf die Schulter klopfen und informieren kann wenn Sie problematischen Code schreiben.

Um ESLint über Ihre Flusenregeln zu informieren, konfigurieren Sie diese in einer Konfigurationsdatei mit dem Namen .eslintrc oder .eslintConfig oder package.json, die ESLint automatisch sucht und liest. Während Sie sich weiterentwickeln, warnt ESLint Sie vor Fehlercodes, die diese Regeln nicht einhalten, sodass Sie während der Codierung Änderungen vornehmen können. Das ist wie ein Oma-Pair-Programm mit dir.

ESLint ist so konzipiert, dass es vollständig konfigurierbar ist, dh, Sie können jede Regel deaktivieren und nur mit einer grundlegenden Syntaxüberprüfung ausführen oder die gebündelten Regeln und Ihre benutzerdefinierten Regeln mischen und anpassen, um ESLint perfekt für Ihr Projekt zu machen Wörter, die Sie mischen und mit objektiven und subjektiven Regeln kombinieren können.

Sie haben Optionen, wenn es um JavaScript-Flusentools geht. In diesem Artikel konzentrieren wir uns jedoch auf ESLint, da Free Code Camp dies in den Beitragsrichtlinien festlegt. Und anderswo ist es weit verbreitet.

Sie haben auch Optionen, wenn es um JavaScript-Styleguides geht. Es ist gut, sich mit Airbnb vertraut zu machen, da es zum Zeitpunkt des Schreibens über 45.000 Sterne auf GitHub hat und immer mehr verwendet wird.

Richten Sie Linting für Free Code Camp ein

ESLint kann auf zwei Arten installiert werden: global und lokal. Wir werden uns auf die lokale Installation konzentrieren, dh auf Ihr lokales Arbeitsverzeichnis, d. H. Ihr geklontes Free Code Camp-Repository.

1: Öffne deinen Free Code Camp-Klon in deinem Texteditor (dies setzt voraus, dass du Free Code Camp tatsächlich auf deinen Computer geklont hast)

2: Wechseln Sie im Terminal von CD (Verzeichnis wechseln) in Ihr Free Code Camp-Verzeichnis

3: Geben Sie npm install eslint --save-dev in Terminal ein

4: Gehen Sie in Ihrem Atom-Texteditor zu Preferences >> Install >> und geben Sie linter-eslint in das Suchfeld Search Packages ein

Hinweis: Sie können Atom-Pakete auch über die Befehlszeile mit dem Befehl apm installieren. In dieser Anleitung finden Sie ein Beispiel.

5: linter-eslint und linter installieren.

6: Schließen Sie in Ihrem Free Code Camp-Verzeichnis alle .js-Dateien und öffnen Sie sie erneut

Und jetzt, wenn Sie das nächste Mal JavaScript schreiben, sollten Sie sehen, dass ESLint funktioniert!

Hinweis: Ich habe einen wichtigen Schritt ausgelassen: Konfigurieren von ESLint, d. H. Den Teil, in dem Sie ESLint anpassen und über Ihre Flusenregeln informieren. Das habe ich getan, weil beim Klonen des Free Code Camp-Repositorys bereits ESLint-Konfigurationsdateien enthalten sind, siehe z. B. eslintrc und package.json. Sie müssen also keine eigene Konfiguration vornehmen.

Für den Fall, dass Sie an einem Projekt arbeiten, in dem Sie ESLint konfigurieren müssen, verweise ich Sie auf die folgenden Links:

  • ESLint konfigurieren.
  • Erste Schritte mit ESLint v1.0
  • npm, eslint
  • Airbnbs erweiterbare gemeinsame ESLint-Konfiguration

Einwickeln:

  1. Beim Flusen wird nach problematischem Code gesucht.
  2. ESLint ist ein solches Werkzeug, das das Flusen ausführt.
  3. ESLint kann ein großartiges Lernwerkzeug sein, da es Sie dazu zwingt, sauberen, konsistenten Code zu schreiben und gute Codierungsgewohnheiten zu entwickeln.
  4. In vielen Open Source-Projekten werden Sie aufgefordert, ESLint auszuführen.
  5. Sie sollten ESLint in Ihrem Texteditor einrichten, um einen Beitrag zu Free Code Camp zu leisten.
  6. Wenn Sie Atom nicht verwenden, lesen Sie in den Dokumenten Ihres Texteditors nach, wie Sie ESLint installieren.
  7. Bleib auf Kurs.

Wenn Sie Fragen haben, können Sie mich unter @gilbertginsberg twittern oder mich bei GilbertIndex finden.