8 Leistungsfähige Visual Studio-Code-Erweiterungen für Front-End-Entwickler

Obwohl Microsoft bereits vor wenigen Monaten die erste stabile Version von Visual Studio Code, den leistungsstarken Code-Editor, vor März 2016 herausgebracht hat, stehen bereits viele Erweiterungen zur Verfügung, mit denen Codiererfahrung auf die nächste Stufe gebracht werden kann. Das Offizielle Visual Studio Code-Erweiterungen werden auf dem Visual Studio Code Marketplace gehostet, von denen viele für Webentwickler eine große Hilfe sein können.

Für diesen Beitrag habe ich eine Reihe von VS-Code-Erweiterungen im Zusammenhang mit der Front-End-Entwicklung getestet und eine Liste derjenigen erstellt, die ich am häufigsten gefunden habe intuitiv, einfach zu bedienen und bequem. Es ist keine endgültige Liste von allen. Nehmen Sie sich Zeit, den Marktplatz für sich selbst zu durchforsten und sehen Sie, was er Ihnen sonst noch bieten kann, zumal noch viele großartige Erweiterungen bevorstehen.

So installieren Sie VS-Code-Erweiterungen

Das Installieren einer Erweiterung ist in Visual Studio Code so einfach wie möglich tun Sie es im Code-Editor. Im VS Code Marketplace hat jede Erweiterung eine eigene Seite, und Sie können den Befehl finden, mit dem Sie die angegebene Erweiterung oben auf dieser Seite installieren können.

Der Befehl beginnt immer mit dem ext installieren Begriff. Um eine Erweiterung zu installieren, genügt es Drücken Sie STRG + P in VS Code, um das Schnellöffnungsfenster zu starten, Kopieren Sie diesen Befehl und schließlich Starten Sie den Code-Editor neu um die neue Erweiterung zum Laufen zu bringen.

8 Leistungsfähige Visual Studio-Code-Erweiterungen

1. HTML-Snippets

   Wenn Sie häufig HTML-Code in Visual Studio-Code schreiben möchten, kann die Erweiterung HTML-Snippets als praktisches Werkzeug dienen fügt ausführliche Unterstützung für HTML hinzu. Obwohl VS Code eine grundlegende Unterstützung für HTML bietet, wie z Syntaxfärbung, Die HTML-Snippets-Erweiterung weiß viel mehr.

   

   Die nützlichste Funktion dieser Erweiterung ist wahrscheinlich das wenn Sie mit der Eingabe des Namens eines HTML-Tags beginnen (ohne den Startwinkel), HTML-Snippets schnell Zeigt eine Liste an der verfügbaren Optionen mit einer kurzen Information über jede.

   

   Wenn Sie auf das gewünschte Element klicken, fügt HTML Snippets das vollständige HTML5-Tag mit den häufigsten Eigenschaften hinzu. Wenn Sie zum Beispiel einen Link (Anker-Tag) zu Ihrem Dokument hinzufügen möchten, geben Sie einfach ein ein ein Wählen Sie in VS-Code die richtige Option im Popup-Feld aus, und die HTML-Snippets fügen die erforderlichen ein schnippeln Sie ohne Probleme in Ihren Editor.

   Der Autor dieser Erweiterung achtet auch darauf, veraltete Elemente zu entfernen. Wenn Sie also ein HTML-Tag verwenden möchten, das Sie nicht in der Popup-Liste finden können, sollten Sie herausfinden, ob es noch gültig ist oder nicht.

2. HTML CSS-Klassenvervollständigung

   Die HTML-CSS-Klassenvervollständigung kann eine nützliche Erweiterung sein, wenn Sie viele verwenden müssen CSS-Klassen in Ihrem Projekt. Uns Entwicklern passiert oft, dass wir es sind nicht ganz sicher im genauen Namen einer Klasse, aber es sitzt nur als passives Wissen im Hinterkopf.

   Diese intelligente Erweiterung bietet eine Lösung für dieses Problem ruft die Namen aller CSS-Klassen ab im aktuellen Arbeitsbereich und zeigt eine Liste über sie an.

   

   Angenommen, Sie möchten eine Website mit der Zurb-Stiftung erstellen und das kleine Raster verwenden. Sie erinnern sich nicht, wie die Klassen genau benannt wurden, aber sie wissen, dass sie semantische Namen haben.

   Mit HTML CSS Class Completion müssen Sie nur das Wort eingeben klein, Die verfügbaren Optionen werden gleichzeitig auf Ihrem Bildschirm angezeigt, sodass Sie leicht die gewünschte auswählen können.

   

3. Im Browser anzeigen

   In Browser anzeigen ist eine einfache, aber leistungsstarke Erweiterung für Visual Studio Code. Es kann die Front-End-Entwicklung erleichtern, wenn Sie dies zulassen Schauen Sie sich während der Programmierung schnell das Ergebnis Ihrer Arbeit im Browser an. Sie können Ihre HTML-Datei in Ihrem Standardbrowser direkt von VS Code aus öffnen, indem Sie die Taste drücken STRG + F1 Tastaturkürzel.

   Beachten Sie diese Ansicht im Browser unterstützt nur HTML, Wenn Sie also Ihre Site sehen möchten, müssen Sie die HTML-Datei öffnen. Sie Ich kann nicht direkt aus einer CSS- oder JavaScript-Datei auf den Browser zugreifen.

   

4. Debugger für Chrome

   Der Debugger für Chrome wurde von Microsoft selbst erstellt und ist derzeit die am vierthäufigsten heruntergeladene Visual Studio Code-Erweiterung.

   Debugger für Chrome macht es möglich debuggen Sie JavaScript in Google Chrome, ohne den Code-Editor zu verlassen. Das bedeutet, dass Sie nicht mit dem transpilierten JavaScript arbeiten müssen, das der Browser sieht, aber Sie können es Führen Sie das Debugging direkt aus den ursprünglichen Quelldateien aus. Sehen Sie sich diese Demo an, um zu sehen, wie es funktioniert.

   

   Die Erweiterung enthält alle Funktionen, die ein anständiger Debugger benötigt, wie z Haltepunkteinstellung, variable Beobachtung, Treten, ein praktische Debug-Konsole, und viele andere (siehe Feature-Liste der ersten Version).

   Um diese Erweiterung zu verwenden, müssen Sie Chrome mit starten Remote-Debugging aktiviert, und ein richtiges einrichten launch.json Datei. Letzteres kann eine Weile dauern, aber Sie können auf GitHub detaillierte Anweisungen finden, wie Sie dies richtig machen.

5. JSHint

   Die JSHint-Erweiterung von Visual Studio Code integriert den beliebten JSHint-JavaScript-Linter direkt in den Code-Editor über Ihre Fehler informiert werden, sobald Sie sie begehen. Standardmäßig verwendet die Erweiterung JSHint die Standardoptionen des Linters, die Sie mithilfe einer Konfigurationsdatei anpassen können.

   

   Die Verwendung dieser Erweiterung ist recht unkompliziert, da JSHint die Fehler mit Rot und die Benachrichtigungen mit einer grünen Unterstreichung markiert. Wenn Sie weitere Informationen zu den Problemen wünschen, bewegen Sie den Mauszeiger über die unterstrichenen Bereiche, und JSHint zeigt ein Etikett mit der Beschreibung des Problems an.

   

6. jQuery-Codeausschnitte

   Mit jQuery-Code-Snippets kann die Front-End-Entwicklung in Visual Studio-Code erheblich beschleunigt werden, da Sie jQuery schnell und ohne grundlegende Syntaxfehler schreiben können. jQuery-Codeausschnitte hat derzeit um 130 verfügbare Schnipsel Sie können durch Eingabe des rechten Auslösers aufrufen.

   

   Alle jQuery-Ausschnitte, aber einer beginnt mit dem jq Präfix. Die einzige Ausnahme ist die func das auslösen fügt eine anonyme Funktion in den Editor ein.

   Diese praktische Erweiterung ist eine praktische Hilfe, wenn Sie sich nicht sicher sind, welche Syntax richtig ist und Sie sich die Zeit für die Überprüfung der Dokumentation nehmen möchten. Außerdem können Sie schnell durch die verfügbaren Optionen blättern.

   

7. Laube

   Die Bower VS Code-Erweiterung kann Ihren Web-Entwicklungsworkflow intuitiver machen, indem Sie den Bower-Paketmanager in Visual Studio Code integrieren.

   Wenn Sie diese Erweiterung verwenden, werden Sie verwendet Sie müssen nicht zwischen Terminal und Editor wechseln, Sie können Ihre Paketverwaltungsaufgaben jedoch problemlos direkt in Visual Studio Code ausführen.

   

   Die Bower-Erweiterung führt Sie durch die Erstellung Ihres Projekts bower.json Sie können auch Dateien installieren, deinstallieren, suchen, Pakete aktualisieren, den Cache verwalten und viele andere Aufgaben damit ausführen (siehe vollständige Funktionsliste)..

   Sie können Greifen Sie auf Bower-bezogene Befehle zu, indem Sie die Befehlspalette starten durch Drücken F1, tippen “Laube” Klicken Sie in der Eingabeleiste auf die Schaltfläche “Laube” Option in der Dropdown-Liste, die angezeigt wird, und wählen Sie den entsprechenden Befehl Bower.

   

8. Git History

   Git History macht es möglich Folgen Sie den Änderungen eines Git-Projekts in Visual Studio Code. Diese Erweiterung ist besonders nützlich, wenn Sie zu einem größeren Github-Projekt beitragen möchten benötigen eine Möglichkeit, die von anderen Entwicklern vorgenommenen Änderungen schnell zu überprüfen.

   Wenn die Git History-Erweiterung installiert ist, können Sie dies tun sehen Sie die Geschichte an einer ganzen Datei oder ein bestimmte Linie innerhalb davon. Du kannst auch frühere Versionen vergleichen der gleichen Datei.

   

   Sie können auf die Befehle zugreifen, die sich auf Git History beziehen, wenn Sie das Wort eingeben “Git” in die Befehlspalette (F1), wählen “Git” in der Dropdown-Liste und wählen Sie schließlich den gewünschten Befehl. Beachten Sie, dass Sie müssen die Datei öffnen von denen Sie den Verlauf sehen möchten, bevor Sie darauf Aktionen ausführen können.