1. GitLens
GitLens ist eine Erweiterung, um die Fähigkeiten von den bereits integrierten Git-Fähigkeiten in VS Code zu erweitern. Das Plugin lohnt sich vor allem, wenn man in einem größeren Team arbeitet, um Änderungen von Kollegen besser nachvollziehen zu können.
Hierbei gehört zum Funktionsumfang das Durchsuchen von Git Repositories, sowie eine flexible Suche in Commits und Revisionsverläufen von Dateien und Zeilen, das heißt, dass man in jeder Zeile, die man markiert, auch sehen kann, wer diese geändert hat und zu welchem Zeitpunkt die Codezeile geändert worden ist incl. dem entsprechenden Kommentar.
Entwickler: GitKraken
GitLens im Visual Studio Marketplace
GitLens auf GitHub
2. Tailwind CSS IntelliSense
Tailwind ist ein Open-Source CSS-Framework für Responsive Webdesign und wenn du Tailwind in deinen Projekten verwendest, dann solltest du diese Erweiterung benutzen.
Mit der IntelliSense Erweiterung für Tailwind kannst du effizient und schnell deine HTML Elemente verschönern, ohne dafür denn ganzen CSS noch von selbst schreiben oder merken zu müssen.
Entwickler: Tailwind Labs
Tailwind CSS IntelliSense im Visual Studio Marketplace
Tailwind CSS IntelliSense auf GitHub
3. Code Snap
Mit der CodeSnap Erweiterung kannst du schnell und einfach Screenshots erstellen, wenn es darum geht einen bestimmten Codeausschnitt mit jemanden zu teilen und dieser ansprechend aussehen soll. Wenn die Erweiterung geöffnet ist, reicht es den entsprechenden Code zu markieren, damit ein Screenshot erstellt wird.
Entwickler: adpyke
CodeSnap im Visual Studio Marketplace
CodeSnap auf GitHub
4. Bracket Pair Colorizer
Wie es der Name schon sagt, ist dieser Erweiterung von Vorteil, wenn man langen oder verschachtelten Code hat. Mit dieser Erweiterung werden die öffnenden und schließenden Klammern im Code farblich hervorgehoben. Wird auf einen Block vom Code geklickt, so wird dieser farblich hervorgehoben und durch eine Linie, wo der Code anfängt und wo dieser endet.
Entwickler: CoenraadS
Bracket Pair Colorizer im Visual Studio Marketplace
Bracket Pair Colorizer auf GitHub
5. ES7 React Snippets
Die VS Code Erweiterung ES7 React Snippets ist gerade für React/Redux Entwickler eine enorme Hilfe. Mit diesem Plugin lassen sich React/Redux Funktionen mit einem Snippet aus der Bibliothek hinzufügen. Dadurch hat man eine massive Zeitersparnis, wenn man Funktionen, Importe schnell hinzufügen möchte, ohne jedes Mal denn ganzen Code zu schreiben bzw. sich zu merken.
Entwickler: dsznajder
ES7 React Snippets im Visual Studio Marketplace
ES7 React Snippets auf GitHub
6. Prettier
Wenn du noch nicht Prettier – Code formatter benutzt, dann wird es höchste Zeit dir diese Erweiterung zu installieren. Diese Erweiterung formatiert deinen Code automatisch zu ordentlichen Code-Blöcken. Die Erweiterung bietet zudem auch noch die Möglichkeit, dass beim Speichern einer Datei der Code formatiert wird.
Entwickler: Prettier
Prettier - Code formatter im Visual Studio Marketplace
Prettier - Code formatter auf GitHub
7. Auto Rename Tag
Auto Rename Tag macht genau das, was der Name schon sagt. Es wird immer das schließende Tag mit umbenannt, wodurch das Suchen und Umbenennen des schließenden Tags entfällt. Auf dieses Tool sollte man in der Entwicklung im Webbereich auf keinen Fall verzichten.
Entwickler: Jun Han
Auto Rename Tag im Visual Studio Marketplace
Auto Rename Tag auf GitHub
8. VS Code Icons
Für ein schöneres Aussehen der Dateien und Verzeichnisse sorgt diese Erweiterung, indem sie andere Icons für entsprechende Dateien und Verzeichnisse nimmt. Je nach Dateiendung wird ein schöneres Icon genommen.
Entwickler: VSCode Icons Team
vscode-icons im Visual Studio Marketplace
vscode-icons auf GitHub
9. TODO Highlight
Wer kennt das nicht: Man wird mit seinem Code nicht rechtzeitig am Tag fertig oder findet Code, denn man nochmal umschreiben möchte und setzt einen Kommentar für ein TODO oder Fixme. Am nächsten Tag weiß man nicht mehr, wo man diesen Kommentar gesetzt hat. Hierbei hilft dir diese Erweiterung enorm.
Denn hat man ein TODO oder FIXME gesetzt, kann man sich diese im Output-Fenster von VS Code alle anzeigen lassen, ohne nochmal danach suchen zu müssen.
Entwickler: Wayou Liu
TODO Highlight im Visual Studio Marketplace
TODO Highlight auf GitHub
10. Import Cost
Import Cost zeigt dir Inline im Editor an, welche Größe das importierte Paket hat und kann dir dabei helfen, eventuell die Größe deiner Anwendung zu minimieren.
Entwickler: Wix
Import Cost im Visual Studio Marketplace
Import Cost auf GitHub
Fazit
Es gibt sehr viele und schöne Erweiterungen, die einem die Entwicklung in Visual Studio Code erleichtern oder angenehmer gestalten kann. Selbstverständlich gibt es deutlich mehr Erweiterung, als die ich hier kurz vorgestellt habe. Die Suche auf dem Marktplatz von Visual Studio bringt schnell Ergebnisse für die entsprechende Sprache oder Funktion.
