It’s #FrontendFriday – Nützliche Visual Studio Code Extensions
Allgemein haben Extensions den Vorteil ein vorhandenes Produkt (z.B. eine Software ) zu „verbessern“ bzw. die Möglichkeit zu bieten es an eigene Bedürfnisse anzupassen.
Extensions für Entwicklungsumgebungen (IDE) haben meistens das Ziel dem Entwickler Arbeit abzunehmen und dadurch Aufwand und Zeit zu sparen. Wiederkehrende Aufgaben können beispielsweise durch Shortcuts oder gar ganz automatisiert gelöst werden.
Unter vielen positiven Effekten können zusätzlich Leichtsinnsfehler vermieden und dazu bessere Code Qualität erreicht werden.
Nachfolgend findet ihr somit einige sehr nützliche Extensions die euch bei der Arbeit mit Visual Studio Code unterstützen.
Live Server
| Live Server ist ein lokaler Deployment Server mit einer „live reload“ Funktion für statische und dynamische Webseiten.
Der ein oder andere Angular Entwickler kennt das npm Paket nodemon. Im Prinzip bietet Live Server die gleiche Funktion für eure IDE. Nimmt man eine Änderung am Code vor und speichert die veränderte Datei, werden die Änderungen im Browser direkt neu geladen, ohne selber die Aktualisierung durchführen zu müssen. Dies führt zu einem deutlich schnelleren und flüssigerem Workflow. |
Auto Rename Tag
| Auto Rename Tag ist eine sehr kleine und einfache Erweiterung, die nichtsdestotrotz das Programmieren sehr vereinfacht.
In einem HTML Code muss das öffnende und schließende HTML Tag immer gleich benannt sein. Möchte man nachträglich ein Tag ändern muss es ohne Erweiterung per Hand an beiden stellen Verändert werden ansonsten führt es zu einem Syntaxfehler. Gerade bei großem und verschachteltem HTML Code ist es nicht immer ganz einfach, die beiden zusammen gehörenden Tags zu finden. Auto Rename Tag erleichtert diese Aufgabe in dem es das öffnende und schließende Tag automatisch genau gleich anpasst. |
|
IntelliSense for CSS class names in HTML
| IntelliSense for CSS class names in HTML ist eine Erweiterung zur Autovervollständigung von CSS Regeln.
Dies ist sehr nützlich bei besonders großen CSS Dateien. Möchte man einem HTML Tag eine CSS Regel zuweisen, bekommt man direkt über ein Dropdown die verfügbaren Regeln vorgeschlagen. Dies betrifft nicht nur eigene CSS Regeln, sondern auch diese die in das HTML eingebunden sind wie beispielsweise Bootstrap. |
CSS Peek
| CSS Peek erleichtert das Zusammenspiel von HTML und CSS.
Diese Erweiterung bietet folgende Möglichkeiten:
|
Pretti
| Prettier gehrt zu einem der beliebtesten Erweiterungen für VS Code.
Mit dem Shortcust „Strg+alt+F“ können ganze Dateien oder auch nur markierte Bereiche einer Datei formatiert werden. Durch die Formatierung wird z.B. der Code richtig eingerückt, doppelte Anführungszeichen durch einfache Anführungszeichen ausgetauscht und vergessene Semikolons ergänzt. Die Erweiterung bietet noch weitere Shortcuts, Einstellungsmöglichkeiten und eine gute Dokumentation auf ihrer Webseite https://prettier.io/. |
Quelle |
Extensions installieren
Abschließend noch eine kurze Anleitung wie man Extensions in VS Code installiert:
VS Code öffnen → auf der linken Seite ganz unten den Tab für Erweiterungen öffnen oder den Shortcut STRG+SHIFT+X verwenden → In das Suchfeld die gewünschte Extension eingeben → Extension anwählen und Installieren klicken → nach der Installation muss VS Code ggf. neu gestartet werden.
