VS Code / VSCodium Add-ons (Package)
18.08.2024 | A. R. |Die Software Microsoft Visual Studio Code (auch VS Code genannt, eine erweiterte IDE), ist einer der beliebtesten (wohl Code-Editor Nr. 1), plattformübergreifender Quelltext-Editor. Der kostenfreie Editor weist Features wie Syntaxhervorhebung, Code-Faltung, Debugging, Autovervollständigung oder Versionsverwaltung auf. Es basiert auf Electron (=Node.js Frameworks + Webbrowser Chromium), welches durchaus kritisch gesehen werden kann (wie alle Electron Software). Anderseits sind IDEs ((Integrated Development Environment) für Programmierer unverzichtbar, da sie schneller und besseren Quellcode ermöglichen.
Der VS Code verfügt über eine große Anzahl von Tastaturbefehlen. Folgend in der Tabelle eine kleine Auswahl nützlicher Tastaturbefehle:
| Tastenkürzel | VS Code Tastaturbefehle |
|---|---|
| STRG + D (mehrmals) | Vorkommen eines markierten Begriffes markieren und dann synchron editieren |
| STRG + P | Goto-Anything-Fenster (zu Datei springen) |
| STRG + ⇧ + D | Zeile duplizieren |
| STRG + F2 | Multicursor am Markiertem. |
| F2 | Variable ändern (mächtig). |
| Enter | HTML-Befehle schreiben ohne Klammern und dann Taste Enter drücken (HTML-Befehl erzeugt) |
| STRG + Leertaste | Befehlsvervollständigung |
| STRG + ⇧ + Pfeil oben oder unten | Multicursor nach oben bzw. nach unten |
| STRG + ⇧ + Pfeil rechts oder links | Zeile (Wort für Wort) markieren bzw. entmarkieren. |
Sehr enttäuschend waren die Versuche (Projekt Weisheitswissen PHP Code) mit alternativer, kostenfreier Software wie Eclipse, NetBeans oder IntelliJ IDEA (Community-Version). Es gibt natürlich auch Kaufprogramme (z. B. PHPStorm u. a.), welche für eine schnelle, komfortable Webentwicklungsumgebung sorgen. Die für mich beste Alternative ist aber VSCodium, eine 100% Open Source Version von Microsoft VS Code, welches aber auch ohne die Microsoft typischen Telemetry / Tracking-Funktionen auskommt. Nachteil könnte aber sein, dass nicht 100 Prozent aller Erweiterungen funktionieren.
Hinweis: Je mehr Erweiterungen installiert werden, desto langsamer wird der Editor. Deshalb auf die wirklich wichtigen Add-ons achten. Die folgenden Erweiterungen (Add ons, Package) haben den Schwerpunkt auf Webentwicklung.
ARBEITSUMGEBUNG
Project Manager »
Mit dieser Erweiterung können Sie schnell auf eine Liste Ihrer gespeicherten Projekte zugreifen.
ANSICHT (Oberfläche)
German Language Pack for Visual Studio Code »
Deutsche Sprachdatei für die IDE.
EDITOR
filesize »
Die Erweiterung zeigt die Dateigröße in der Statuszeile an.
HTML / XHTML / CSS
Auto Close Tag »
Die Auto Close Tag Erweiterung schließt HTML- und XML-Tags automatisch.
Auto Rename Tag »
Automatisch zusammenhängende HTML-Tags ändern.
CSS Peek »
CSS Peek erleichtert das Zusammenspiel von HTML und CSS Informationen.
PHP
PHP Intelephense »
PHP Intelephense hilft dem Eintippen von Code (passende Vorschläge, Aufrufe von Funktionsnamen, korrekte Parameter). Hilft auch beim PHP Quellcode formatieren.
PROGRAMMIER FUNKTIONEN
Path Intellisense »
Das schlanke Add-On sorgt dafür, dass Dateinamen automatisch ausgefüllt werden.
SYNTAXVERVESSERUNG
Comment Anchors »Anker-Tags (ANCHOR) in Kommentaren platzieren um eine sehr schnelle Navigation in den Kommentaren zu ermöglichen.
indent-rainbow »
Diese Erweiterung färbt im Quellcode jede Einrückungstiefe in einer anderen Farbe ein.
Rainbow Tags »
Zusammengehörende Tags besser erkennen.
Prettier - Code formatter »
Automatisch für sauberen Quellcode sorgen. Die Erweiterung ist aber meinungsstark bedeutet es verwendet bei einer HTML Datei, die XHTML Schreibweise.
TASTATURBEFEHLE
IntelliJ IDEA Keybindings »Die obige Erweiterung importiert Tastenkombinationen von JetBrains in VS Code. Nach der Installation der Erweiterung und dem Neustart von VS Code können Sie VS Code oder VSCodium wie IntelliJ IDEA, Webstorm, PyCharm usw. verwenden. Praktisch um auch den Quellcode automatisch zu formatieren mit den Tastaturbefehl [cmd] + [alt] + [l] (Mac) oder [strg] + [alt] + [l] (für Linux). Auch [strg] + [d] Funktion ist passender: Auswahl statt gesamte Zeilen kopieren. >
THEME
Blue Light Theme »
Ein tolles, helles Theme.
Cobalt2 Theme Official »
Für diverse Einsatzbereiche kann es besser sein, unterschiedliche Themes zu verwenden. Einige Beispiele hierfür: Arbeiten im Freien (Helligkeit), Arbeiten nur am Text oder bestimmte Fehlersuche im Code. Toll gelungen ist das dunkle Cobalt 2 Theme.
Shades of Purple »
Ein violettes Theme. Das mußte sein.
TOOLS
MinifyAll »
Komprimierung von Quellcode. Superpraktisch!
TEXT FUNKTIONEN
Text Power Tools
»
Fast 200 Befehle zur Text Manipulation, z. B. Zeilen sortieren uvm..
WEBDESIGN
Bracket Pair Colorizer 2 »
Hebt die Klammerpaarung hervor.
Live Server »
Das Add-On Live Server bringt eine HTML Reload-Funktion in Echtzeit mit (um die Änderungen am Quellcode während des Schreibens zu sehen), um statische und dynamische Seiten zu testen.
Links
VSCodium: 100% Open Source Version of Microsoft VS Code | itsfoss
eBook: Visual Studio Code - Tipps & Tricks Vol. 1 (Deutsch / Englisch)
Visual Studio Code: Microsoft hat ein ernstes Sicherheitsproblem
Atom Editor Erweiterungen | Weisheitswissen