VS Code Icon

Meine Erweiterungen für VS Code (1)

Ich nutze für die Webentwicklung am liebsten Visual Studio Code von Microsoft, für schnelle kleine Änderungen auch gerne Notepad++. In diesem ersten von zwei Teilen stelle ich die Erweiterungen vor, mit denen ich VS Code aufrüste. Ich arbeite hauptsächlich mit HTML, CSS (SCSS), Javascript und PHP (meist in Verbindung mit WordPress), darauf beziehen sich auch meine Erweiterungen, die ich hier aufliste. Ach ja, Versionsverwaltung ist für mich auch wichtig, von daher sind auch zwei für mich wichtige Git-Addons vertreten, die die eingebaute Git-Funktionalität von VS Code aufbohren.

Auto Close Tag

Auto Close Tag von Jun Han fügt automatisch die schließenden HTML- und XML-Tags hinzu. Klein und unverzichtbar.

GIF zu Auto Close Tag

Auto Rename Tag

Auto Rename Tag, ebenfalls von Jun Han, benennt das zugehörige End- bzw. Starttag in HTML und XML automatisch mit um.

GIF zu Auto Rename Tag

Bookmarks

Bookmarks von Alessandro Fragnani ist praktisch zur schnellen Navigation im Code, es lassen sich einfach Lesezeichen setzen, diese auflisten, mit einem Label versehen usw.

Bracket Pair Colorizer

Wenn es etwas unübersichtlich wird, da man mit komplexem und verschachteltem SCSS-, JavaScript- oder sonstigem Code arbeitet, hilft einem Bracket Pair Colorizer von CoenraadS ungemein, da sich zugehörige Klammern farblich unterscheiden.

Code Runner

Um eben ein kleines Script auszuführen, ist Code Runner, auch von Jun Han, sehr nützlich. Es beherrscht sehr viele Programmiersprachen und ist damit ein vielseitiges und praktisches Helferlein.

FTP-Simple

VS Code ist zwar nicht für die Bearbeitung auf einem Webserver ausgelegt, aber wenn eine Website mal online bearbeitet werden muss, hilft einem der FTP-Client FTP-Simple von humy2833.
Letztendlich brauche ich ihn sehr selten, da ich lokal arbeite und meine fertigen Arbeiten dann auf den Server schiebe, aber für alle Fälle habe ich den Client installiert.

Highlight Matching Tag

Ebenso wie der Bracket Pair Colorizer finde ich die kleine Erweiterung Highlight Matching Tag von vincasIt zur Übersicht richtig gut, da hier die öffnenden und schließenden HTML- und XML-Tags farblich hervorgehoben werden.

Erweiterung Highlight Matching Tag

Image Preview

Image Preview von Kiss Tamás erzeugt in der Seitenleiste kleine Vorschaubilder von eingebundenen Grafiken:

Vorschau von Image Preview

:emojisense:

Ein nettes kleines Gimmick, um Emojis im Code einzubetten, ist :emojisense: von Matt Bierner. Ist ein netter kleiner Gag, um zum Beispiel auch einmal einen Kackhaufen als Klassennamen zu verwenden 😉

Vorschau von emojisense

Git Easy

Git Easy von bibhasdn fügt einige Git-Fähigkeiten zu den in VS-Code eingebauten Git-Funktionen hinzu, z. B. git init, add origin etc.

GitLens

Mit GitLens von Eric Amodio wird es einem einfach gemacht, Änderungen von verschiedenen Commits und Branches etc. einzupflegen. Eine sehr große Menge an Funktionen, absolut empfehlenswert für jeden, der mit Git arbeitet.

Weiter geht es mit dem zweiten Teil … 🙂