Der Sublime-Texteditor ist in der Entwicklergemeinschaft (sowohl Anfänger als auch Profis) ein ziemlich bekannter Name. Es wurde mit plattformübergreifender Unterstützung zum Bearbeiten von Quellcode und Text entwickelt.

Obwohl sich die aktuelle Version (Sublime Text 3) im Beta-Stadium befindet, ist sie schneller als Version 2 und bietet viele Funktionen. Es unterstützt nativ eine Vielzahl von Programmier- und Auszeichnungssprachen, und von der Community erstellte, kostenlose Sublime-Texteditor-Plugins haben seine Funktionalität auf eine neue Höhe gebracht.

Viele Entwickler halten sich an diesen Editor wegen des riesigen Repositorys von Plugins. In diesem Artikel konzentrieren wir uns auf einige der Plugins, die für JavaScript-Entwickler am nützlichsten sind.

Fusseln

Linting-Tools helfen Entwicklern, Fehler, syntaktische Diskrepanzen und potenzielle Probleme zu erkennen. Es kann auch verwendet werden, um sicherzustellen, dass das Projekt einer bestimmten Kodierungsrichtlinie entspricht.

SublimeLinter-eslint

Es unterstützt die Sublime Text 3-Version und bietet eine Schnittstelle zu ESLint, um mit Dateien mit „JavaScript”-Syntax zu arbeiten. SublimeLinter 3, Node.js, npm und eslint sind die Voraussetzung für die Installation dieses Plugins. Es umfasst eine Fülle von Regeln mit Optionen zur Anpassung Sie erhalten eine genaue Option, um in die Konfigurationsdatei zu schreiben, um alle Warnungen und Fehler auszuschalten.Eine wichtige Sache, die hier zu beachten ist, ist, dass dieses Plugin das einzige ist, das JSX unterstützt, und die Unterstützung für ES6 ist weitaus größer überlegen im Vergleich zu anderen Plugins.

Verwendung: Abhängig von der SublimeLinter-Konfiguration wird der Code beim Bearbeiten oder Speichern lintiert. Dies kann mit Choose Lint Modedem Befehl konfiguriert werden.

Sublime-JSHint

Das JSHint Gutter-Plugin ist sowohl mit Sublime Text 2 als auch 3 kompatibel. Ermöglicht Entwicklern, JavaScript-Code auf schreckliche Fehler und Codierungskonventionen zu überprüfen. Dieses Plugin kann auch so konfiguriert werden, dass es Hinweise in der Rinne anzeigt und reibungslos mit projektspezifischen .jshintrc-Dateien funktioniert. Es basiert auf JSHint, einem Fork von JSLint. Da der Linter in JavaScript geschrieben ist, muss Node.js den JavaScript-Code außerhalb des Browsers interpretieren.

Verwendung: Ctrl+alt+Jfür Windows oder Cmd+Option+Jwenn Sie einen Mac verwenden. Sie können auch mit der rechten Maustaste klicken, JSHint auswählen und auf klicken Lint Code. Eine andere Möglichkeit besteht darin, eine JavaScript-Datei zu öffnen, die Konsole in Sublime Text from View zu öffnen, dann Console anzuzeigen und view.run_command("jshint"). Es wird empfohlen, dafür eine eigene Tastenkombination einzurichten, indem Sie zu Einstellungen -> Tastenkombinationen – Benutzer gehen und einen Befehl wie { "keys": ["ctrl+shift+j"], "command": "jshint" }in diesem Array hinzufügen.

Formatierung

Formatierungswerkzeuge werden verwendet, um die Codeblöcke zu verschönern und zu formatieren, um sie besser lesbar zu machen.

Sublime-jsfmt

Dieses Plugin unterstützt beide Versionen von Sublime Text und formatiert JavaScript-Code automatisch gemäß einem bestimmten Stil. Der Entwickler muss keine Warnungen lesen und das Formatierungsproblem nicht manuell beheben. In kann über den Paketmanager installiert werden, indem Sie jsfmtim Dropdown-Menü auswählen.

Verwendung: Projektspezifische .jsfmtrc-Datei kann für Konfigurationen im Stammverzeichnis des Projekts abgelegt werden. Es kann über den folgenden Pfad aufgerufen werden: Preferences -> Package Settings -> Sublime JSFMT. Abgesehen davon gibt es eine Möglichkeit, Tastaturkürzel einzurichten, indem Sie zu Einstellungen -> Tastenkombinationen – Benutzer gehen und { "keys": ["ctrl+q"], "command": "format_javascript" }das Array hinzufügen.

JsFormat

Es unterstützt beide Versionen von Sublime Text. Dieses JavaScript-Formatierungs-Plugin verwendet den Befehlszeilenformatierer von jbeautifier im Hintergrund, um die gesamte js-, json-Datei oder nur den ausgewählten Teil einer Datei zu formatieren. Eine projektspezifische Konfiguration kann auch über die Einstellungen der .jsbeautifyrc-Datei vorgenommen werden. Abgesehen davon sind auch Leerraum- und Formatierungsstile anpassbar.

Verwendung: Die Standard-Tastenzuordnung gilt ctrl+alt+ffür Windows und cmd+option+fMac. Plugin verwendet verwendet Tabulator-/Einzugseinstellungen, die mit den Standard- translate_tabs_to_spacesund tab_sizeSublime-Einstellungen konfiguriert sind.

Code-Analyse

Dies sind die Code-Inferenz-Engines, die zur Beschleunigung des Entwicklungsprozesses verwendet werden, indem sie automatische Code-Vervollständigung, Hinweise zu Funktionsargumenten usw. bereitstellen.

Seeschwalbe für erhaben

Dieses Codeanalyse-Plug-in für JavaScript wurde für die Integration mit Code-Editoren für eine intelligente JavaScript-Bearbeitung entwickelt. Es kommt mit einigen raffinierten Funktionen wie:

Automatische Vervollständigung von Variablen und Eigenschaften
Hinweise zu Funktionsargumenten
Abfragen des Typs eines Ausdrucks
Automatisches Refactoring

Sie müssen sicherstellen, dass Node.js und npm installiert sind, bevor Sie mit der Installation dieses Plugins fortfahren.

Verwendung: Verwenden Sie einfach alt+., um zur Definition des Objekts zu springen, auf das der Cursor zeigt, und um alt+,zu der Stelle zurückzukehren, an der Sie beim Ausführen des vorherigen alt+.Befehls waren. Schließlich, alt+spaceum alle Verweise auf eine bestimmte Variable in der aktuellen Datei auszuwählen.

Satzstellung markieren

In diesem Abschnitt gehen wir ein Syntax-Highlighter-Plugin durch.

JavaScriptWeiter

Dieses Plugin ist ein hervorragender JavaScript-Syntax-Highlighter. Neben der Verbesserung der Syntaxhervorhebung für ES5 unterstützt es auch die neue ES6-Syntax wie Module, prägnante Methoden, Pfeilfunktionen, Klassen und Generatoren. Es kann über installiert werden, indem Sie es aus der Dropdown-Liste Package Controlauswählen .JavaScript Next

Verwendung: Um dieses Plugin für eine einzelne JavaScript-Datei zu verwenden, können Sie die Einstellung in ändern. Um view -> syntax -> JavaScriptNextdies als standardmäßige JavaScript-Syntax festzulegen, öffnen Sie eine Javascript-Datei und wählen Sie dann View -> Syntax -> Open all with current extension as... -> JavascriptNext. Das Farbschema kann auch geändert werden, indem Sie eines von auswählen Preferences -> Color Scheme -> JavaScriptNext.

Dokumentation

Jetzt sehen wir uns ein Plugin an, das es ziemlich einfach macht, Codekommentare und Dokumentationen zu schreiben.

sublime-jsdocs

Das DocBlockr-Plugin unterstützt sowohl Sublime Text 2 als auch 3 für JavaScript, einschließlich ES6-Spezifikationen. Es kann installiert werden, indem Sie einfach DocBlockr in der package control. Dieses Plugin ist hochgradig konfigurierbar und ermöglicht es Ihnen, Kommentare automatisch zu vervollständigen, Kommentare zu erweitern, Kommentare zu dekorieren und Dokumentationen zu Variablen und Funktionen hinzuzufügen.

Verwendung: Schreiben Sie und /**und drücken Sie die Eingabetaste oder die Tabulatortaste, um eine neue Zeile zu erstellen und den Kommentar zu schließen. Beim Schreiben der Dokumentation für die Funktion werden Sie feststellen, dass sie versucht, den Rückgabewert intelligent zu erraten, und im Falle einer Variablen versucht, den Typ der Variablen anhand ihres Namens zu bestimmen.

Plugins für JavaScript-Bibliotheken

Sie können Plugins für einige der beliebten JavaScript-Bibliotheken wie AngularJS und jQuery installieren. Einige Plugins helfen Ihnen auch dabei, den Entwicklungsprozess zu beschleunigen, indem sie Code-Snippets bereitstellen. Beispielsweise kann das JQuery-Snippet -Plugin für die jQuery-Entwicklung installiert werden.

Fazit

In diesem Artikel haben wir einige der nützlichen Plugins für JavaScript-Entwickler behandelt. Bitte zögern Sie nicht, jedes andere nützliche Plugin im Kommentarbereich zu teilen und der Entwickler-Community zu helfen.