13 beste Visual Studio-Code-Erweiterungen, die Sie ausprobieren sollten

Visual Studio Code ist einer der beliebtesten Code-Editoren, der nicht nur Open Source, sondern auch plattformübergreifend, leicht und schnell ist. Obwohl VS Code dank seiner Intellisense-Technologie und mitgelieferten Erweiterungen wie Emmet sofort einsatzbereit ist, können Sie seine Funktionalität und Nützlichkeit durch die Installation zusätzlicher Erweiterungen weiter steigern. Hier sind einige der besten VScode-Erweiterungen, die ich bei der Verwendung von Visual Studio Code in den letzten Jahren oder so gefunden habe.

Beste Visual Studio-Codeerweiterungen

Die Einstellungssynchronisierung ist eine der besten und muss über eine VS Code-Erweiterung verfügen, die jeder Benutzer haben sollte. Der Grund dafür ist, dass Settings Sync alle Einstellungen, Tastenkombinationen, Designs und Plugin-Liste Ihres benutzerdefinierten VS-Codes mit GitHub synchronisiert. Dadurch müssen Sie nicht alle Erweiterungen und Designs neu installieren und jedes Mal neu konfigurieren, wenn Sie VS Code installieren oder VS Code auf mehreren Systemen verwenden. Das Beste an Settings Sync ist, dass es recht einfach zu bedienen ist. Nachdem Sie es mit GitHub verknüpft haben, können Sie Einstellungen mit nur einer einzigen Tastenkombination hochladen oder synchronisieren. Bei Bedarf können Sie es so konfigurieren, dass Einstellungen automatisch hoch- oder heruntergeladen werden.

Wenn Sie Webentwickler sind oder einfach nur mit Webtechnologien wie CSS, JavaScript, PHP, HTML usw. arbeiten, dann ist Live Server ein Muss. Live Server erstellt einen lokalen Server innerhalb von VS Code und lässt Sie die Entwicklungsseiten mit nur zwei Klicks in einem beliebigen Browser Ihrer Wahl öffnen. Sie müssen nicht manuell zum Speicherort der Datei wechseln und sie von dort aus öffnen. Ganz zu schweigen davon, dass, wenn Live Server aktiv ist und funktioniert, die Seite jedes Mal automatisch neu geladen wird, wenn Sie das Dokument speichern. Wenn Sie also ein Webentwickler sind, probieren Sie es aus. Sie werden nicht zurückkehren.

Wie Sie am Namen selbst erkennen können, können Sie mit der Erweiterung In Browser öffnen alle unterstützten Dateien im Standardbrowser oder im Browser Ihrer Wahl mit einem einzigen Klick öffnen. Obwohl nicht so leistungsstark oder funktionsreich wie die Live Server-Erweiterung, hilft Ihnen Open in Browser, das Webdokument schnell in der Vorschau anzuzeigen, ohne eine Instanz eines Hintergrundservers zu erstellen. Ganz zu schweigen davon, dass die Open in Browser-Erweiterung ziemlich leicht ist und tut, was sie verspricht, ohne Schluckauf.

Prettier ist eine weitere meiner Lieblingserweiterungen, die ich fast sofort installiere. Wie der Name schon sagt, lässt Prettier den Code hübsch aussehen und verbessert die Lesbarkeit, indem er gemäß den offiziellen und Branchenstandards richtig formatiert wird. Nach der Installation der Erweiterung können Sie Ihren Code entweder durch Drücken einer Tastenkombination verschönern oder die Erweiterung auf der Seite mit den VS Code-Einstellungen so konfigurieren, dass der Code beim Speichern automatisch formatiert wird. Bei Bedarf können Sie die Formatierung Ihres Codes durch Prettier ändern, indem Sie verschiedene Einstellungen wie Tabulatorabstand, Klammerabstand, Komma nachgestellt, Druckbreite, Umbruch usw. auf der Einstellungsseite selbst ändern.

Color Info ist eine sehr einfache, aber effektive Erweiterung, die eine große Vorschau und zusätzliche Informationen zu den Farben anzeigt, die Sie in CSS verwenden. Falls Sie sich fragen, ja, VS Code zeigt eine kleine Vorschau der von Ihnen verwendeten Farbe an. Es ist jedoch nicht so hilfreich, insbesondere bei dunklen Themen. Die von Color Info angezeigten zusätzlichen Informationen umfassen unter anderem HSL-Werte, RGB-Werte, Alpha-Werte, verschiedene Arten von Farbvorschauen usw. Color Info unterstützt CSS, SASS, SCSS und LESS.

Wollten Sie schon immer einige Änderungen vornehmen, aktualisieren oder Code hinzufügen, haben es aber vergessen? Installieren Sie Todo Highlighter und Sie müssen diese Tortur nicht noch einmal durchmachen. Wenn Sie die Todo-Funktion jemals in einer IDE (Integrated Development Environment) verwendet haben, funktioniert Todo Highlighter in VS Code auf die gleiche Weise. Fügen Sie einfach die Todos wie gewohnt hinzu und sie heben sich von Ihrem regulären Code ab und lenken Ihre Aufmerksamkeit darauf.

Egal wie oft ich reguläre Ausdrücke verwende, ich werde immer noch verwirrt. Ehrlich gesagt kann ich meine eigene Regex nicht richtig schreiben. Einer der Gründe dafür ist, dass ich meine Regex nicht im laufenden Betrieb überprüfen kann. Hier kommt Regex Preview ins Spiel. Nach der Installation von Regex Preview wird die Vorschau Ihres Regex nebeneinander angezeigt. Wenn Sie mit vielen regulären Ausdrücken spielen, probieren Sie Regex Preview aus und sehen Sie, ob es Ihren Anforderungen entspricht.

VS Code verfügt über eine angemessene integrierte Unterstützung für Git und macht es einfach zu verwenden. Git Lens geht noch einen Schritt weiter und verbessert die integrierten Git-Funktionen von VS Code. Das Besondere an Git Lens ist, dass es einfach ist, Repositorys zu durchsuchen, den Dateiverlauf zu untersuchen, die Code-Autorschaft mithilfe von Git-Blamage-Annotation und Code-Linse zu visualisieren, die letzten Änderungen hervorzuheben, die Suche nach Commit durchzuführen, verschiedene Branches zu vergleichen usw. Wenn Sie Git ausgiebig verwenden, versuchen Sie es Git Lens macht einen großen Unterschied in Ihrem Workflow.

In der Webentwicklung ist es üblich, verschiedene Arten von Dateien wie CSS, JS in Dokumenten wie HTML und PHP zu verlinken. Obwohl es nicht so schwer ist, den Dateipfad einzugeben, kann ein wenig Hilfe in Form der automatischen Vervollständigung viel bewirken. Path Intellisense macht genau das. dh es vervollständigt den Dateinamen und -pfad automatisch, sodass Sie nicht zweimal über den Dateipfad oder -namen nachdenken müssen.

VS Code hat eine nette Funktion namens Go To Definition und Go To Type Definition, die Sie zur Deklaration oder Typdefinition eines Symbols führt. CSS Peek geht noch einen Schritt weiter und zeigt Ihnen eine Vorschau der CSS-Verwendung in Ihrem Dokument. Dies ist sehr nützlich, da Sie Ihr aktuelles Dokument nicht verlassen müssen, nur um zu sehen, was Sie mit dieser bestimmten CSS-Klasse oder ID tun. Wenn Sie ein Webdesigner sind, dann ist CSS Peek eine dieser unverzichtbaren Erweiterungen für VS Code.

Mit Markdown All in One können Sie mit Markdown direkt im VS-Code schnell Readme-Dateien oder Rich-Text erstellen und bearbeiten. Das Beste an Markdown All in One ist, dass es eine Live-Vorschau anzeigen kann und die Verwendung auch sehr intuitiv ist.

Wenn Sie viel Code schreiben, ist es nur natürlich, dass Sie immer wieder zwischen einigen wichtigen Teilen wechseln. Obwohl VS Code Zeilennummern hat, erleichtert es Ihnen das Leben, wenn Sie diese wichtigen Zeilen markieren können. Die Lesezeichen-Erweiterung macht genau das, damit Sie wichtige Positionen einfach markieren und schnell und einfach zwischen ihnen navigieren können.

Ich habe vor kurzem die Erweiterung Bracket Pair Colorizer entdeckt und sie wurde schnell zu einer meiner Lieblingserweiterungen in VS Code. Wie der Name schon sagt, macht es der Bracket Pair Colorizer einfach, passende Klammern zu identifizieren. Es wird nicht nur Klammern mit Farben abgleichen, sondern auch den gesamten Codeblock innerhalb der Klammern hervorheben, damit Sie wissen, wo Sie sich befinden. Vertrauen Sie mir, wenn Sie verschachtelte Schleifen oder if-Anweisungen erstellen, hilft Ihnen der Bracket Pair Colorizer sehr.

Ich hoffe, das hilft. Wenn Sie der Meinung sind, dass ich eine Ihrer bevorzugten VS Code-Erweiterungen verpasst habe, teilen Sie sie im Kommentarbereich unten mit.