Top 10 Erweiterungen für Visual Studio Code
Netzwerk Offline
Dein Netzwerk ist offline, deshalb laden wir die gesamte Seite aus dem Cache. Beachte: die Inhalte k├Ânnten veraltet sein!
F├╝r aktuelle Inhalte aktiviere bitte dein Internet!
Alter Browser
Hallo liebe Nutzer,
da wir als Coding-Plattform und Webentwickler ausschlie├člich auf aktuelle Technologien setzen, unterst├╝tzen wir keine veralteten Internetbrowser. Bitte schau dir doch ein paar der tollen Alternativen an, bestimmt findest du hier einen f├╝r dich passenden modernen Browser!

Visual Studio Code - Top 10 Extensions

Inhaltsverzeichnis
[[TABLE OF CONTENTS]]
Teilen:
access_timeGesch├Ątzte Lesezeit ca. Minuten

In diesem Artikel stelle ich dir meine zehn meistgenutzten Erweiterungen für Visual Studio Code vor. Diese Erweiterungen verwende ich generell jeden Tag, um mir das Arbeiten in VSC zu erleichtern. Es gibt funktionelle Erweiterungen, die elementare Funktionen ergänzen und andere, die "lediglich" das Design von VSC verändern, um das Lesen von Code zu erleichtern.

Material Theme & Material Icon Theme

Material Theme
Material Theme

Ich habe schon viele Themes für Visual Studio Code ausprobiert, aber bisher bin ich immer wieder bei "Material Theme + Material Icon Theme" hängengeblieben. Es bietet ein angenehmes, nicht übertriebenes Farbthema.

Material Icon Theme
Material Icon Theme
Erweiterung Informationen

Entwickler (Material Theme)

Mattia Astorino

Marketplace (Material Theme)

https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme

Entwickler (Material Icon Theme)

Philipp Kief

Marketplace (Material Icon Theme)

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

Remote Development von Microsoft

Remote Development Erweiterung
Remote Development Erweiterung

Die Erweiterung für Remote Development hab ich in Letzter Zeit sehr lieb gewonnen. Ich nutze diese sehr gerne für Docker, so wie für die Entwicklung auf einem SSH Server.

Der Vorteil von "Remote Development" liegt in der Einfachheit, direkt in einem Docker-Container, auf einem SSH-Server oder unter Windows, in einem Linux-Subsystem, zu arbeiten. Gerade in Zeiten von Corona und Home-Office eine komfortable Möglichkeit auf internen Firmenservern, von zu Hause aus, zu arbeiten.

Remote Containers - Docker

Remote Containers - Docker
Remote Containers - Docker

Privat nutze ich die Docker-Variante sehr gerne, da es unter MacOS häufig zu Problemen mit dem Einbinden größerer Volumen in ein Docker-Image kommt, da dort die Performance gerne einbricht.

Mit dieser Variante kann ich mich jetzt direkt in den Docker-Container schalten, und mein Projekt läuft komplett unabhängig vom äußeren System, da ich noch nicht einmal die Docker-Volumes einbinden muss. Da ich generell Git zum Speichern nutze, sind die Volumes für meine Projekte meist obsolet.

So verwende ich zum Beispiel die "Remote Container" - Erweiterung für die Entwicklung von HelloCoding. Einfach den Container auswählen und schon kann die Entwicklung im Container starten.

Remote Container in Visual Studio Code Ausw├Ąhlen
Remote Container in Visual Studio Code Ausw├Ąhlen
Erweiterung Informationen

Entwickler

Microsoft

Marketplace

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers

Remote - SSH

Remote SSH Verbindung
Remote SSH Verbindung

Wenn es darum geht einen Server zu konfigurieren, vor allem bei größeren Änderungen an Docker-Files oder der Serverkonfiguration, nutze ich "Remote SSH". Der Workflow ist hier, dank "Copy & Paste" wesentlich schneller als manuell über das Terminal.

Erweiterung Informationen

Entwickler

Microsoft

Marketplace

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh

Remote WSL - Linux Sub Systems

Windows Sub System - Remote
Windows Sub System - Remote

"Remote WSL" nutze ich persönlich nicht, da ich nicht auf einem Windows-System arbeite. Die Erweiterung erlaubt euch auf Windows in einem Linux-Subsystem zu entwickeln, dabei aber alle Vorteile von VSC zu nutzen.

Erweiterung Informationen

Entwickler

Microsoft

Marketplace

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl

Live Server - HTML Reloading

Live Server
Live Server

Mit dem "Live Server" kann man für einfache HTML-Webseiten ein schnelles Setup erstellen, um im Browser einen "Live Reload" für HTML-Dateien zu nutzen. Sobald man speichert wird der Browser automatisch neugeladen. Gerade für kleiner Übungen oder um ein kleines JavaScript-Plugin zu schreiben, ist diese Erweiterung durchaus nützlich. Für größere Anwendungen ist Gulp mit Browsersync oder WebPack natürlich die bessere Wahl, da dort deutlich mehr Konfigurationsmöglichlkeiten bestehen.

Erweiterung Informationen

Entwickler

Ritwick Dey

Marketplace

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Excel Viewer - und CSV Anzeige

Excel und CSV Dateien als Tabelle Anzeigen
Excel und CSV Dateien als Tabelle Anzeigen

Da ich oft mit Python Datenanalysen betreibe, entsteht natürlich auch die ein oder andere CSV-Datei, die ich betrachten möchte, ohne ein zusätzliches Programm öffnen zu müssen.

Dafür eignet sich die Erweiterung "Excel Viewer" sehr gut. Diese kann Excel- und CSV-Dateien sehr gut darstellen.

Erweiterung Informationen

Entwickler

GrapeCity

Marketplace

https://marketplace.visualstudio.com/items?itemName=GrapeCity.gc-excelviewer

PDF Anzeige (vscode-pdf)

PDF Anzeige (vscode-pdf)
PDF Anzeige (vscode-pdf)

Die Erweiterung "vscode-pdf" ist ziemlich selbsterklärend. Sie zeigt PDF Dateien wie im Chrome-Browser an. Die Ansicht sieht nun wie folgt aus. Falls diese Plugin nicht Installiert ist. kann nur die binäre Ansicht der Datei abgerufen werden, die nicht wirklich weiter hilft.

PDF Ansicht wie im Chrome!
PDF Ansicht wie im Chrome!
Erweiterung Informationen

Entwickler

tomoki1207

Marketplace

https://marketplace.visualstudio.com/items?itemName=tomoki1207.pdf

Auto Close Tag - Tag's Automatisch schlie├čen

Auto Close Tag Erweiterung
Auto Close Tag Erweiterung

Diese Erweiterung ist vor allem für Personen nützlich die von Sublime Text auf Visual Studio Code wechseln, oder einfach nur faul sind. Dieses Plugin schließt HTML- und XML-Tags automatisch. Gerade wenn man von Sublime Text kommt, ist man diese Funktionalität gewöhnt. So ging es mir auch vor einigen Jahren. Damals war ich sehr froh dieses Plugin von Jun Han verwenden zu können.

Erweiterung Informationen

Entwickler

Jun Han

Marketplace

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Auto Rename Tag - Umbennen von Tag's

Auto Rename Tag
Auto Rename Tag

Mit der Erweiterung "Auto Rename Tag" wird immer das schließende Tag mit umbennant. Dies ist ein Plugin für XML und HTML. Gerade imWebbereich gibt es keinen Grund auf dieses Plugin zu verzichten.

Erweiterung Informationen

Entwickler

Jun Han

Marketplace

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Bracket Pair Colorizer 2 - Farbige Klammern

Bracket Pair Colorizer 2
Bracket Pair Colorizer 2

Mit der Erweiterung "Bracket Pair Colorizer 2" werden Zugehörige Klammern farbig dargestellt, so dass man direkt erkennt, was zusammen gehört.

Erweiterung Informationen

Entwickler

CoenraadS

Marketplace

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

PHPDoc Comment - Einfache Doc Kommentare

PHPDoc Comment Erweiterung
PHPDoc Comment Erweiterung

Diese Erweiterung ist für PHP-Entwickler sehr nützlich. Mit dem Befehl command + shift + i kann ein neuer Kommentar erstellt werden. Dazu sollte vorher die erste Zeile der Funktion oder Methode selektiert werden. Unten seht man ein Beispiel des Resultats. Dort können dann noch weitere Anpassungen vorgenommen werden. Diese Erweiterung ersparrt sehr viel Schreibarbeit.

PHPDoc Comment Beispiel
PHPDoc Comment Beispiel
Erweiterung Informationen

Entwickler

Rex Shi

Marketplace

https://marketplace.visualstudio.com/items?itemName=rexshi.phpdoc-comment-vscode-plugin

Prettier - Code formatter

Prettier
Prettier

Für die fauleren Entwickler ist "Prettier" ein wahrer Segen. Das Plugin formatiert euer JavaScript oder HTML automatisch zu ordentlichen Blöcken. Die Erweiterung liefert zudem etliche Einstellungsmöglichkeiten, etwas die Funktion, dass bei jedem Speichern der Datei der Code formatiert wird.

Erweiterung Informationen

Entwickler

Prettier

Marketplace

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Fazit

Es gibt so viele schöne Erweiterungen für die Entwicklung in Visual Studio Code. Natürlich gibt es noch deutlich mehr als ich hier vorgestellt habe. Zum Beispiel für Java oder auch für SCSS und Python findet man tolle Plugins. Die Suche im Marketplace bringt schnell Ergebnisse für die gewünschte Sprache oder Funktion.

Teilen:
Bildquelle - Vielen Dank an die Ersteller*innen f├╝r dieses Bild

Kommentare zum Artikel

Es sind noch keine Kommentare vorhanden? Sei der/die Erste und verfasse einen Kommentar zum Artikel "Top 10 Erweiterungen für Visual Studio Code"!

Kommentar Schreiben

Verwante Beitr├Ąge

keyboard_arrow_up
Home Men├╝ Suche
close