Nützliche VS-Code-Erweiterungen für JavaScript-Entwickler

Wir haben kürzlich eine Übersetzung eines Artikels über nützliche VS-Code-Erweiterungen für Python-Entwickler veröffentlicht. Jetzt ist JavaScript an der Reihe!



Beim letzten Mal haben die Leser ihre Favoriten in den Kommentaren geteilt. Wir hoffen, dass auch wir heute eine hervorragende Sammlung nützlicher VS-Code-Erweiterungen für JavaScript sammeln können.


Ich verwende seit mehreren Jahren PyCharm Pro und WebStorm, eine IDE von Jetbrains . Da es sich nicht um billige Produkte handelt, schlagen die Leute jedes Mal vor, zu VS Code zu wechseln, da dieser Editor kostenlos und cool zugleich ist. Nach mehreren solchen Diskussionen über Reddit habe ich versprochen, VS Code innerhalb weniger Wochen zu testen.



Zu den wichtigen Vorteilen von VS Code (neben natürlich den "kostenlosen" Kosten) gehören die Möglichkeit zur Anpassung und das Ökosystem der Plugins. Ich wollte das Beste aus der Testversion herausholen, weshalb ich Plugins brauchte. Wieder auf Reddit wurde mir eine große Anzahl verschiedener Erweiterungen empfohlen, und heute möchte ich über Plugins für VS Code sprechen, die mir besonders gefallen haben.







Trotz meiner Experimente mit VS Code arbeite ich weiterhin mit meinem geliebten PyCharm und WebStorm, da ich mich über die Jahre daran gewöhnt habe. Ihre Kosten sind durch den Wert und die Qualität voll gerechtfertigt. Trotzdem hat mich VS Code angenehm überrascht: Es ist ein sehr einfaches und schnelles Tool.



ESLint







ESLint ist ohne Zweifel eine der beliebtesten Erweiterungen unter JS-Entwicklern. Es wendet ESLint-Regeln im Code an und zeigt das Ergebnis im Editor an. Auf diese Weise können Sie Verstöße gegen die Regeln schnell erkennen und korrigieren. ESLint ist für alle JS-Entwickler nützlich, da es zur Verbesserung der Leistung und der Codequalität beiträgt.



Laden Sie ESLint herunter



Schöner







Prettier ist ein Tool zur Formatierung von Code, das sich in VS Code, Visual Studio, Atom, Vim, Sublime Text und andere Editoren integrieren lässt. Eine praktische kleine Erweiterung, mit der Sie Ihren Code formatieren, Ihren Code einrücken und Schlüsselwörter hervorheben können, um das Lesen des Codes zu erleichtern.



Solche nützlichen Funktionen reduzieren natürlich die Formatierungsarbeit und erhöhen somit unsere Produktivität. Dank Prettier ist die Lesbarkeit des Codes sehr hoch.



Laden Sie Prettier herunter



Quokka.js







Die Erweiterung Quokka.js bietet schnelles JavaScript-Prototyping im VS-Code-Editor. Es ist eine Echtzeit-Sandbox für JavaScript- und TypeScript-Entwickler. Quokka.js wird oft als modernes Notizbuch für JavaScript-Entwickler bezeichnet.



Wollten Sie schon immer etwas schnell testen und haben dann die Browserkonsole verwendet? Oder führen Sie node



-process im Terminal aus und versuchen es dort? Das Hauptziel dieser Erweiterung ist es, Code schnell und bequem direkt im VS-Code-Editor auszuführen.



Laden Sie Quokka.js herunter



REST-Client







Der REST-Client ist eine Erweiterung für VS-Code, mit der Sie HTTP-Anforderungen senden und die Antwort direkt in VS-Code anzeigen können.



Dies ist Postman for VS Code, aber bequem in den Code-Editor integriert.



Der REST-Client unterstützt REST- und GraphQL-APIs.



Laden Sie den REST-Client herunter



Debugger für Chrome







Das Debuggen von JavaScript kann frustrierend sein. Chrome und andere Browser bieten großartige Tools für den Einstieg.



Es ist jedoch oft nicht einfach, mit ihnen zu arbeiten. Außerdem sind solche Tools nicht sehr praktisch, insbesondere wenn Frameworks und viele Bibliotheken verwendet werden.



Debugger for Chrome ist eine von Microsoft entwickelte Erweiterung, mit der Sie Ihren Code bei jeder kleinen Änderung einfach debuggen können.



Die Erweiterungskonsole ist mit ihrer Leistung angenehm überraschend, insbesondere wenn Sie herausfinden müssen, in welcher Leitung und Funktion ein Fehler aufgetreten ist. Sie können sogar die Datenverarbeitung verfolgen.



Führen Sie den Code in Chrome aus und debuggen Sie ihn im Code-Editor.



Laden Sie den Debugger für Chrome herunter



Live Server







Mit Live Server können Sie einen lokalen Entwicklungsserver mit Live-Reload-Funktion für statische und dynamische Seiten ausführen. Dies ist nicht sehr relevant für diejenigen, die mit Frameworks arbeiten, die bereits ein Live-Reload eingerichtet haben, wie z. B. React. Wenn Sie jedoch mit anderen Bibliotheken oder statischen Inhalten arbeiten, ist diese Erweiterung auf jeden Fall hilfreich für Sie.



Laden Sie den Live Server herunter



Live-Freigabe







Dies ist ein erstaunliches Werkzeug! Ich bin mir nicht sicher, ob es so etwas für WebStorm gibt. Mit Live Share können Sie Ihren Code-Editor für andere freigeben. Es ist perfekt für die Paarprogrammierung, besonders jetzt, wo die meisten Menschen aufgrund der Pandemie immer noch remote arbeiten.



Ich habe es versucht und es hat mir gefallen!



Laden Sie Live Share herunter



JavaScript (ES6) -Code-Snippets







Wie Sie wahrscheinlich bemerkt haben, handelt es sich bei fast allen Erweiterungen in dieser Liste um Leistungsverbesserungen, und JavaScript (ES6) -Code-Snippets sind keine Ausnahme.



Der Name spricht für sich! Diese Erweiterung hilft dabei, die Codierungsgeschwindigkeit zu erhöhen, indem mit einem vordefinierten Satz von Snippets gearbeitet wird. Snippets können nach unseren Wünschen angepasst werden, indem vorgefertigte Pakete installiert oder eigene erstellt werden.



Laden Sie JavaScript (ES6) -Code-Snippets herunter



Babel JavaScript







JavaScript hat sich in letzter Zeit stark weiterentwickelt. Eine große Anzahl von Frameworks und Bibliotheken ist erschienen, zum Beispiel React, Flow, GraphQL und infolgedessen viele neue Möglichkeiten, Code zu entwerfen.



Mit Babel JavaScript können Sie mit der neuesten JavaScript-Syntax sowie den oben aufgeführten Bibliotheken arbeiten. Die Erweiterung bietet dem JavaScript-Editor die neuesten und schönsten Syntaxversionen.



Laden Sie Babel JavaScript herunter



Ein dunkler Profi







Entwickler verbringen lange Zeit in einem Code-Editor, daher ist es besonders wichtig, dass wir mit seinem Aussehen und seiner Ästhetik zufrieden sind. One Dark Pro ist ein Thema für VS Code, mit dem der Editor schöner aussieht, als ich es gewohnt bin.



Laden Sie One Dark Pro herunter



Ausgabe



Nachdem ich VS Code ausprobiert hatte, war ich angenehm überrascht, wie schnell und zuverlässig es ist.



Durch das Anpassen mit Erweiterungen konnte ich auch ein Gefühl dafür bekommen, wie leistungsfähig es ist.



Da es einer der beliebtesten Code-Editoren auf dem Markt ist (wenn nicht der beliebteste), gibt es eine riesige Community, die Tools und Erweiterungen erstellt, um es noch besser zu machen. Das hat mir an Jetbrains-Produkten immer gefallen und was mir jetzt an VS Code gefällt.



VS Code ist eine gute Wahl für jeden Entwickler. Ich empfehle! WebStorm und PyCharm haben jedoch immer noch einen besonderen Platz in meinem Herzen.



Vielen Dank für das Lesen dieses Artikels!



All Articles