Suche

über alle News und Events

 

Alle News

 

Durable Function ist eine Erweiterung der...

Weiterlesen

Wir haben eine gute, vor allem spannende und hoch...

Weiterlesen

Am 09.05.2022 wurde ein Artikel von Microsoft...

Weiterlesen

Neben den altbekannten Logic Apps (Consumption),...

Weiterlesen

Im Jahr 2022 fallen eine Reihe von .Net Versionen...

Weiterlesen

SAP in die Power Platform integrieren – In einem...

Weiterlesen

Bicep Templates benutzen eine deklarative Syntax...

Weiterlesen

In BizTalk gibt es einige Alternativen, wie...

Weiterlesen

Wir sind auf ein seltsames Phänomen bei einem...

Weiterlesen

Nach der Migration konnten in VS 2019 „normale“...

Weiterlesen

How-to: TOP 10 der besten VS Code Erweiterungen, die du im Jahr 2022 verwenden solltest

Visual Studio Code ist eines der beliebtesten und kostenfreien Open-Source-Editoren von Microsoft zur Entwicklung von Web-Anwendungen. Weshalb es auch unzählige Erweiterungen gibt, die einem bei der Entwicklung unterstützen können. Damit du nicht auf die Suche nach den passenden Erweiterungen für VS Code gehen musst, zeige ich dir in diesem Beitrag 10 der besten Erweiterungen für Visual Studio Code, die du als Entwickler 2022 verwenden solltest und die dir das Schreiben und Lesen von Code erleichtert.

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.

Ihre Kontaktmöglichkeiten

Sie haben eine konkrete Frage an uns


 

Bleiben Sie immer auf dem Laufenden


 

Mit meinem "Ja" erkläre ich mich mit der Verarbeitung meiner Daten zur Zusendung von Informationen einverstanden. Ich weiß, dass ich diese Erklärung jederzeit durch einfache Mitteilung widerrufen kann. Bei einem Nein an dieser Stelle erhalte ich zukünftig keine Informationen mehr.

© QUIBIQ GmbH · Impressum · Datenschutz