Startseite » Codierung » Anleitung zur Verwendung von SublimeLinter für Entwickler

    Anleitung zur Verwendung von SublimeLinter für Entwickler

    Linter ist ein unverzichtbares Werkzeug in der modernen Webentwicklung. Es hilft uns dabei, Fehler zu vermeiden und bewährte Methoden beim Schreiben von Codes durchzusetzen. Wenn Sie SublimeText verwenden, empfehle ich dringend, SublimeLinters zu installieren. Im Laufe der Jahre hat sich SublimeLinters zu einer Tool Suite für Elektrowerkzeuge in SublimeText entwickelt und offizielle Pakete mitgebracht, die mit Linters verschiedener Programmiersprachen verbunden sind.

    In diesem Lernprogramm erfahren Sie, wie Sie SublimeLinter installieren und einrichten. Lass uns einfach anfangen.

    Fertig machen

    Die einfachste Möglichkeit, SublimeLinter 4 zu installieren, ist das SublimeText Package Control. Seitdem in SublimeLinter 3, jeder linter muss separat installiert werden. Dadurch kann SublimeLinter effizienter ausgeführt werden, indem nur der Linters dass wir installiert haben.

    Da ich in meinen Projekten meistens HTML, CSS, JS und PHP verwende, möchte ich gerne Linters für diese Sprachen installieren. In dem Paketkontrolle, Ich installiere SublimeLinter zusammen mit den folgenden Plugins:

    • SublimeLinter-html-ordentlich
    • SublimeLinter-Stylelint
    • SublimeLinter-eslint
    • SublimeLinter-php

    Damit diese Plugins funktionieren, müssen wir auch das installieren linter für die Sprachen HTML Tidy, CSSLint, JSHint und PHP CLI.

    Für diejenigen, die OSX verwenden, sind Tidy und PHP im System vorinstalliert. Führen Sie zur Überprüfung die folgenden beiden Befehle nacheinander aus.

     tidy --version php --version 

    Diese Befehle zeigen Ihnen die Tidy- und PHP-Version, die Sie haben. Sie können sie in Sublime Text verwenden.

    Wenn Sie Windows oder Linux verwenden oder diese nicht installiert haben, können Sie die folgenden Anweisungen befolgen.

    HTML Tidy installieren

    So installieren Sie HTML Tidy:

    • In OSX, Führen Sie diesen Befehl in Terminal aus brauen Sie installieren Homebrew / Dupes / ordentlich
    • In Linux, Verwenden Sie diesen Befehl sudo apt-get install ordentlich.
    • In Windows, Sie können das EXE-Installationsprogramm von TidyBatchFiles herunterladen.

    PHP CLI installieren

    • OSX-Benutzer können PHP mit in das System installieren curl -s http://php-osx.liip.ch/install.sh | bash -s 5.5 Befehl. Dies wird zum Zeitpunkt des Schreibens PHP 5.5, die neueste Version, installieren.
    • Linux Benutzer können dieses umfassende Tutorial von DigitalOcean verfolgen.
    • Für Windows Benutzer, Sie können das Installationsprogramm hier herunterladen.

    Styleint installieren

    Als Nächstes installieren wir den CSS-Interpreter namens Stylelint, mit dem wir bewährte Methoden in unseren CSS-Dateien prüfen und durchsetzen können. Die folgenden Anweisungen können auf allen drei Plattformen befolgt werden: OSX, Windows und Linux. Ich gehe davon aus, dass Sie Node.js bereits mit dem NPM installiert haben.

    Um Stylelint zu installieren, führen Sie Folgendes aus:

     npm install -g stylelint 

    Beachten Sie, dass Sie auch eine Stylelint-Konfigurationsdatei zu Ihrem Projektverzeichnis hinzufügen und zusätzlich eine vordefinierte Konfiguration wie stylelint-config-standard installieren müssen. Sobald diese konfiguriert sind, sollten Sie die Fehler wie unten hervorgehoben finden.

    ESLint installieren

    Wir werden auch ESLint installieren, einen modernen und hoch konfigurierbaren Browser für JavaScript. Dies hilft uns, Best Practices durchzusetzen und mögliche Fehler beim Schreiben von JavaScript zu erkennen. Für die Installation von ESLint ist außerdem Node.js mit dem NPM erforderlich.

    Um es zu installieren, führen Sie es aus.

     npm install -g eslint 

    Ebenso müssen Sie die ESLint-Konfiguration zu Ihrem Projekt hinzufügen oder die vordefinierte Konfiguration verwenden, z. B. eslint-config-recommended.

    Wir sind alle da. Wir können anfangen fusseln HTML, CSS, JS und PHP in SublimeText mit SublimeLinter 4.

    Neue Funktionen in SublimeLinter 4

    SublimeLinter 4 bringt mehrere neue Funktionen mit, und man kann leicht feststellen, dass das Fenster alle Fehler der geöffneten Dateien anzeigt. Wenn Sie sich unter Mac befinden, drücken Sie die Tastenkombination Befehl + Strg + A. Unter Windows und Linux können Sie Strg + K, Strg + A drücken.

    Der Hotkey zeigt eine Liste der Fehler an, wie im folgenden Screenshot dargestellt.

    Verwenden Sie die ↑ und ↓ Wenn Sie in der Liste navigieren möchten, blättert die Seite in die Zeile, in der der Fehler aufgetreten ist.

    Besser visuell

    Wir können jetzt im Editor über die Rinne fahren oder nur die Zeile, in der der Fehler auftritt, um die Fehlermeldung anzuzeigen. Dies war in der vorherigen Version nicht möglich.

    In hohem Grade konfigurierbar

    SublimeLinter 4 ist jetzt mehr konfigurierbar als je zuvor. Zum Beispiel können wir jetzt benutzerdefinierte “Stile” zu jeder der Linter-Konfiguration. Dies ermöglicht es uns, Icons, Farbe, Flusenmodus, Pfad und Umgebungsvariablen für jeden Linter separat einzustellen.

    Weitere Hinweise

    Ich hoffe, dass diese kurze Einführung dazu beitragen kann, SublimeLinter in Betrieb zu nehmen. Sie können sich auch auf die Referenz beziehen, wenn Sie mehr fortgeschrittenes Material wünschen.

    • SublimeLinter Official Doc
    • Fussel in Software und Programmierung - WikiPedia
    • SublimeLinter-Repositorys