Sublime Text 3 in eine JavaScript IDE verwandeln

Sublime Text ist einer der beliebtesten Editoren für die Webentwicklung und die Softwareentwicklung im Allgemeinen. Er ist sehr reibungslos und schnell im Vergleich zu anderen Editoren (da er in C++ geschrieben ist, was diese Geschwindigkeit begünstigt). Sublime hat auch Unmengen an Plugins, die Sie über Package Control finden können.

Aber es ist nur ein Texteditor und keine IDE. Eine IDE ist eine Softwareanwendung, die umfassende Einrichtungen für Computerprogrammierer zur Softwareentwicklung bietet. Tatsächlich bietet Sublime keine Funktionen wie Debugging-Tools, integrierte Tools zum Kompilieren und Ausführen von Anwendungen, intelligente Code-Vorschläge oder Code-Refactoring. Stattdessen bietet es eine Reihe von APIs, mit denen Sie es erweitern können. Hier ist eine Einführung in das Plugin JavaScript Enhancement (meine eigene Kreation), das Sublime für die JavaScript-Entwicklung etwas IDE-ähnlicher macht.

Was ist das JavaScript Enhancement Plugin?

Es ist ein Plugin für Sublime Text 3, das viele nützliche Funktionen für die Erstellung, Entwicklung und Verwaltung von JavaScript-Projekten bietet. Die wichtigsten davon sind

1. Intelligente Autovervollständigung
2. Fehlererkennung und Linting
3. Code-Refactoring

Weitere Funktionen finden Sie auf der Wiki-Seite.

Die meisten Funktionen sind intern mit Flow implementiert, einem statischen Typchecker für JavaScript, der von Facebook entwickelt wurde (wenn Sie TypeScript kennen, ist es ziemlich ähnlich). Das Hauptziel dieses Plugins ist es, Sublime Text 3 in eine JavaScript IDE zu verwandeln. Es befindet sich in aktiver Entwicklung und wird im Laufe der Zeit weitere Funktionen enthalten.

Installation

Es gibt zwei Möglichkeiten, es zu installieren. Die einfachste ist über Package Control, die andere ist die manuelle Installation, indem Sie diesen einfachen Schritten folgen.

Anforderungen

• Sublime Text 3 Build 3124 oder neuer
• Node.js (6 oder neuer) und npm
• TerminalView Sublime Text Plugin (nur Linux und Mac OS X)

Unterstützte Systeme

Da Flow nur auf 64-Bit-Systemen funktioniert, unterstützt dieses Plugin

• Mac OS X
• Linux (64-Bit)
• Windows (64-Bit)

Intelligente Autovervollständigung

Sublime Text hat eine eigene Autovervollständigungsfunktion, ihr fehlt es jedoch an Leistung, wodurch sie bei weitem nicht so nützlich ist, wie sie sein könnte. Mit diesem Plugin erhalten Sie eine Autovervollständigung basierend auf dem aktuellen Kontext, wie bei jeder anderen IDE. Sie erhalten beispielsweise Vervollständigungen von Ihren importierten Klassen, die in anderen Dateien definiert sind, wie z. B. Eigenschaften und Methoden.

Darüber hinaus enthält die Vervollständigungsliste auch Informationen über Variablentypen und Funktionssignaturen, um einen schnellen Überblick zu erhalten.

So funktioniert das mit dem Plugin

... und ohne das Plugin

Fehlererkennung und Linting

Sublime Text verfügt nativ nicht über ein System zur Fehlererkennung und/oder zum Linting. Dank Flow kann dies mit seinen eigenen CLI-Befehlen erfolgen.

Zunächst müssen Sie ein JavaScript-Projekt erstellen (siehe die Wiki-Seite Erstellung eines JavaScript-Projekts). Damit der Flow-Server Ihre Dateien überprüfen kann, müssen Sie einen speziellen Kommentar einfügen: // @flow.

Sie können weitere Optionen in der Datei .flowconfig festlegen (siehe die offizielle Website zur Anpassung Ihrer Flow-Konfiguration. Wenn Sie beispielsweise möchten, dass der Flow-Server alle Dateien überprüft und nicht nur die mit @flow, müssen Sie die Option all auf true setzen.

[options]
# all=off by default
all=true

Damit der Flow-Server auch einzelne Dateien überprüft, die nicht Teil eines Projekts sind, können Sie die Option unter Tools > JavaScript Enhancements > Use Flow checker on current view (Not used in project) für jede Sublime-Ansicht aktivieren. In diesem Fall sieht der Flow-Server nur die aktuelle Ansicht.

Stattdessen können, wie auf der offiziellen Website angegeben, Linting-Einstellungen im Abschnitt .flowconfig [lints] als Liste von rule=severity-Paaren angegeben werden. Diese Einstellungen gelten global für das gesamte Projekt. Ein Beispiel ist

[lints]
# all=off by default
all=warn
untyped-type-import=error
sketchy-null-bool=off

Linting-Einstellungen können auch direkt in einer Datei über flowlint-Kommentare festgelegt werden. Zum Beispiel

/* flowlint
*   sketchy-null:error,
*   untyped-type-import:error
*/

Code-Refactoring

Sublime Text bietet nativ kein System für Code-Refactoring. Dies wird mithilfe der Flow CLI-Befehle realisiert, um die notwendigen Informationen zu erhalten. Derzeit bietet dieses Plugin verschiedene Code-Refactoring-Funktionen, darunter

• In Pfeilfunktion umwandeln
• Exportieren:
  • Funktion
  • Klasse
  • Variabel
• Sichere Kopie
• Sicheres Verschieben
• Sicheres Löschen
• Extrahieren:
  • Variabel
  • Feld (aktuelle Methode, Felddeklaration, Konstruktor der Klasse)
  • Parameter
  • Methode (globaler Geltungsbereich, aktueller Geltungsbereich, Klassenmethode)

Einige davon können auch eine verfügbare Vorschau haben. Darüber hinaus funktionieren Funktionen wie Sicheres Verschieben nur in JavaScript-Projekten (auch hier siehe die Wiki-Seite Erstellung eines JavaScript-Projekts).

Unterstützung

Probleme/Fragen

Wenn Sie Probleme haben, erstellen Sie ein Issue. Tipp: Suchen Sie zuerst kurz, um zu sehen, ob nicht jemand anderes die gleiche Frage gestellt hat! Für kleine Fragen können Sie Gitter nutzen.

Funktionswünsche und Erweiterungen

Für Funktionswünsche erstellen Sie ein Issue oder nutzen Sie Gitter.

Finanzielle Beiträge

Wenn dieses Projekt Ihnen hilft, Entwicklungszeit zu sparen und es Ihnen gefällt, sollten Sie es bitte mit einer Spende auf Patreon, Open Collective oder über PayPal unterstützen. Danke!