Wie Sie Ihre Probleme in Sublime beseitigen können

Sublime ist ein leichter Texteditor und bei vielen Webentwicklern sehr beliebt. Jetzt weiß ich, dass es auf dem Markt viele hochentwickelte IDEs mit Intellisense, Code-Vervollständigung und so weiter gibt. Aber dieser Beitrag ist für diejenigen, die ihren bevorzugten Texteditoren treu geblieben sind! Wenn Sie also Sublime für Ihre Projekte verwenden, können Sie einige der raffinierten Funktionen nutzen, die es bietet. Flusen ist einer von ihnen.

Beginnen wir mit der Definition des Begriffs „Flusen“.

Beim Flusen wird Ihr Code auf mögliche Fehler überprüft. Dies kann entweder die Syntax oder der Codestil sein.

Der Flusenprozess kann in drei Entwicklungsstadien durchgeführt werden:

  1. Über Ihren Editor (Live-Flusen)
  2. Durch den Erstellungsprozess
  3. Verwenden eines Pre-Commit-Hooks in der Versionskontrolle

In diesem Beitrag werden wir uns mit Live-Flusen im Editor befassen. Es gibt viele beliebte Linters für JavaScript wie JSHint, JSCS und ESLint. Ich werde ESLint verwenden, da ESLint ES6-Code unterstützt, sehr erweiterbar und sehr einfach zu verwenden ist. Wenn Sie interessiert sind, können Sie sich hier die Vergleiche zwischen den verschiedenen Lintern ansehen!

Schritt 1

Sie müssen zuerst das ESLint npm-Paket installieren. Der Befehl lautet wie folgt:

npm install -g eslint

Die Option '-g' besteht darin, das Paket auf dem globalen Server zu installieren. Installieren Sie 'npm', falls Sie es noch nicht installiert haben. In Sublime wird eine Datei geöffnet, in der Sie aufgefordert werden, zwei weitere Plugins herunterzuladen. Sie müssen diese Plugins mit Sublimes Package Control installieren.

Öffnen Sie die Paketsteuerung mit Befehl / Strg + Umschalt + P und wählen Sie die Option 'Paketsteuerung: Paket installieren'. Laden Sie dann die beiden Plugins herunter.

  1. SublimeLinter-eslint
  2. SublimeLinter-Contrib-Eslint

SublimeLinter ist das Framework, das Flusen bereitstellt. Verschiedene Sprachen werden nicht unterstützt. Der sprachspezifische Linter muss separat installiert werden.

Das Sublime-Contrib-Eslint-Plugin fungiert als Schnittstelle zwischen ESLint und SublimeLinter. Sie können den Installationsvorgang auf der Hauptwebsite überprüfen, wenn Sie irgendwo hängen bleiben.

Nach erfolgreicher Installation der Plugins müssen Sie Ihren Editor zurücksetzen, damit die Änderungen wirksam werden. Jetzt werden wir ESLint in Aktion sehen!

Schritt 2

Puh! Das waren viele Installationen. Jetzt können Sie endlich die Großartigkeit von Linting ausprobieren! Öffnen Sie Ihre Datei in Sublime und sehen Sie die Macht ... aber warten Sie, nichts ist passiert. Warum das? Ärgere dich nicht. Sie haben alles korrekt installiert, aber ESLint selbst macht nichts. Sie müssen die Grundkonfiguration bereitstellen, und dies ist ein sehr unkomplizierter Vorgang. Hier ist wie:

  1. Starten Sie das Terminalprogramm im Home-Verzeichnis Ihres Projekts
  2. Geben Sie diesen Befehl ein
eslint --init

Es wird eine Eingabeaufforderung angezeigt, in der Sie einige Fragen zu Ihren Codierungseinstellungen stellen, und eine .eslintrc-Datei wird für Sie generiert. Diese Datei enthält die Regeln, die Sie gerade ausgewählt haben. Sie können zusätzliche Konfigurationen hinzufügen, falls Sie dies wünschen.

Wie Sie sehen können, beschwert sich ESLint über den Einzug und die Tatsache, dass die Variable foo nirgendwo verwendet wird. Sie können jeden Fehler oder jede Warnung überprüfen, indem Sie den Mauszeiger über den markierten Teil des Codes bewegen oder die Meldung in der Statusleiste von Sublime unten überprüfen.

Das war es also! Ich hoffe du konntest mitmachen. Flusen ist ein ziemlich cooles Werkzeug, um Fehler in Ihrem Code zu erkennen. Es stellt sicher, dass Sie die Code-Richtlinien befolgen und jederzeit sauberen Code schreiben. Ich hoffe, Sie alle fanden diesen Beitrag hilfreich und wie immer viel Spaß beim Codieren!