Welche VS Code Plugins ich verwende
Visual Studio Code ist eines der beliebtesten Code Editoren und das nicht ohne Grund. Es ist kostenlos, Open Source und hat eine große Community. Ich verwende VS Code seit einigen Jahren und habe in der Zeit einige Plugins entdeckt, die ich nicht mehr missen möchte. In diesem Artikel möchte ich euch meine Favoriten vorstellen.
Astro
Astro ist ein All-In-One Web Framework für Content orientierte Websites. Ich verwende es für meine Website und bin sehr zufrieden damit. Das Plugin bietet Syntax Highlighting, Snippets und vieles mehr. Ein Muss für Entwickler die Astro verwenden.
Auto Rename Tag
Auto Rename Tag ist ein sehr nützliches Plugin, das es ermöglicht, Tags automatisch zu ändern. Wenn ich zum Beispiel ein <div>
Tag zu einem <p>
Tag ändere, wird das schließende Tag automatisch mit geändert.
Comment Anchors
Comment Anchors ist ein Plugin, das es ermöglicht, Kommentare mit einem Link zu versehen. Wenn ich zum Beispiel einen Kommentar schreibe, kann ich diesen mit einem Link versehen, der mich direkt zum Kommentar führt. Alle Links werden in einem Panel gesammelt, das über die Sidebar erreichbar ist.
Git Graph
Diese Erweiterung ermöglicht es, den Git Graphen direkt in VS Code anzuzeigen. Ich verwende es, um einen Überblick über meine Commits zu behalten und um zu sehen, welche Branches ich habe und wie diese verlaufen.
GitHub Copilot
Copilot macht Vorschläge für Code, die auf künstlicher Intelligenz basieren. Ich verwende es, um mir Code Snippets zu generieren, die ich dann in meine Projekte einfügen kann. Es ist ein sehr nützliches Plugin, das mir viel Zeit spart. Gerade die Context bezogenen Vorschläge, die auf dem Code basieren, den ich gerade schreibe sind sehr zeitsparend.
Inline HTML
Mit Inline HTML erhälst du Syntax Highlighting für HTML in JavaScript Dateien. Wenn du HTML Code mit JavaScript erzeugst oder einfach Templates in JavaScript verwendest, ist dieses kostenlose Plugin auf jeden Fall sein Geld wert 😁.
Live Server
Die bekannteste VS Code Erweiterung würde ich vermuten. Es ermöglicht eine lokale Entwicklungsumgebung zu erstellen. Es ist sehr nützlich, wenn du eine Website entwickelst und diese lokal testen möchtest. Es ist sehr einfach zu bedienen und bietet viele nützliche Funktionen.
Markdown All in One
Wenn du Markdown Dateien erstellst und bearbeitest dann ist diese Erweiterung Pflicht. Es bietet viele nützliche Funktionen wie zum Beispiel das automatische Erstellen von Überschriften, das automatische Erstellen von Links, TOC und vieles mehr.
Marp for VS Code
Marp ist ein Markdown Präsentationsframework. Präsentationen mit Markdown zu erstellen, wenn das dein Traum ist, dann bist du hiermit bestens bedient. Mit wenigen Handgriffen kannst du bereits exisierende Markdown Dateien zu einer Präsentation machen. Das beste Feature ist der Export mit dem du eine HTML Präsentation erstellen kannst.
Material Icon Theme
Material Icon Theme ist ein Icon Theme für VS Code. Es bietet viele Icons für verschiedene Dateitypen und Verzeichnisse. Es ist sehr nützlich, wenn du viele verschiedene Dateitypen in deinem Projekt hast und diese schnell unterscheiden möchtest.
Mayukai Theme
Mayukai Theme ist ein Theme für VS Code. Es ist ein sehr schönes Theme, das ich sehr gerne verwende. Es ist für mich persönlich sehr angenehm für die Augen. 8+ Stunden mit VS Code sind damit kein Problem mehr 😅.
Prettier - Code formatter
Prettier ist ein Code Formatter, der es ermöglicht, den Code automatisch zu formatieren. Es ist auch sehr nützlich, wenn du mit mehreren Entwicklern an einem Projekt arbeitest damit nicht jeder seinen eigenen Code Style hat. Mit Prettier kannst du deinen Code automatisch formatieren und so sicherstellen, dass der Code immer gleich aussieht.
SASS
SASS ist eine Erweiterung für VS Code, die es ermöglicht, SASS Dateien zu bearbeiten. Es bietet Syntax Highlighting, Code Snippets und vieles mehr. Wenn du SASS verwendest, dann ist diese Erweiterung ein Muss.
Tailwind CSS IntelliSense
Tailwind CSS IntelliSense ermöglicht, Tailwind CSS Klassen automatisch zu vervollständigen. Es ist sehr nützlich, wenn du Tailwind CSS verwendest und dir die Klassen nicht merken kannst. Es bietet auch eine Vorschau für die Klassen, die du verwenden möchtest. Cool ist das in dieser Vorschau auch die Farben angezeigt werden und welche CSS Properties du damit verwendest.
SQLite
Mit SQLite kannst du SQLite Datenbanken direkt in VS Code öffnen und anschauen.
Template String Converter
Der Template String Converter wandelt automatisch eine Zeichenkette in ein Template String um wenn du JavaScript Variablen darin verwendest. Sehr nützlich wenn du nicht jedes mal von Hand die Quotes ändern möchtest. Kleiner Helfer aber Ohooo 😁.
Thunder Client
Wenn du mit REST APIs arbeitest, dann ist Thunder Client ein Muss. Es ermöglicht, HTTP Requests direkt in VS Code zu erstellen und auszuführen. Es bietet viele nützliche Funktionen wie zum Beispiel das Speichern von Requests, das Speichern von Environments und vieles mehr.
WSL
Windows Subsystem for Linux ermöglicht es, Linux Distributionen direkt in Windows zu verwenden. Ich verwende es, um meine Projekte in einer Linux Distribution Ubunutu zu entwickeln. Wenn du mit Docker arbeitest und die Docker Container direkt in Linux laufen lassen möchtest oder wenn du mit Node.js arbeitest und die Node.js Versionen direkt in Linux verwenden möchtest, dann kann ich diese Erweiterung nur empfehlen. Du Entwickelst direkt unter Linux, die grafische Oberfläche von VS Code wird aber von Windows gerendert. Das beste aus beiden Welten.
Fazit
Das waren meine Favoriten. Ich hoffe, dass ich dir ein paar nützliche Plugins vorstellen konnte. Wenn du noch weitere Plugins kennst, die ich unbedingt ausprobieren sollte, dann schreib mir doch gerne auf Twitter oder schreib mir einen Kommentar auf YouTube.