Mein Visual Studio Code Setup: Erweiterungen, Themes und Einstellungen

Was vor einigen Jahren für mich der Atom Editor war ist heute Visual Studio Code, mein neuer Quellcode-Editor.

VS Code ist einer der besten und beliebtesten Programme bei Entwicklern von Webdesignern bis Spiele Entwicklung.

Vor allem die Erweiterungen tragen stark dazu bei, du findest so gut wie jede Funktion die du als Entwickler benötigst als Erweiterung und kannst dir deine eigene Entwicklungsumgebung bauen, genau auf deine Bedürfnisse zugeschnitten.

Theme

Als erstes fange ich mit dem Theme an das ich verwende.

Als ich mit Programmieren angefangen habe benutzte ich immer ein helles Theme, damals verwendete ich die PHP-Variante von NetBeans. Bis ich zu Atom gewechselt bin und seit dem verwende ich ausschließlich dunkle Themes.

Da ich sehr viel mit Atom gearbeitet habe und mich an die Farbgebung gewöhnt habe war es für mich klar dass ich auch in VS Code ein Theme verwende mit ähnlichen Farben.

One Dark Pro

Ich habe mich für das Theme One Dark Pro entschieden.

Material Icon Theme

Diese Erweiterung fügt hübsche Icons im VS Code Explorer an Dateien und Ordnern.

Link: Material Icon Theme

Erweiterungen

Auto Close Tag

Wie der Name schon verratet ist diese Erweiterung sehr praktisch für HTML Code, denn es wird beim tippen der schließenden HTML-Tag <p> Klammer automatisch das schließende HTML-Tag </p> erstellt wie hier im Beispiel des Paragraph Tag.

Link: Auto Close Tag

Auto Rename Tag

Vom selben Autor wie der Auto Close Tag Erweiterung ist auch dieses und ist auch für HTML-Code.

Damit wird automatisch zusammenhängende HTML-Tags geändert. Ein Beispiel: <h1>Titel</h1>

Wenn du im Editor nur das öffnende HTML-Tag von h1 zu h3 änderst, ändert diese Erweiterung automatisch das schließende tag von h1 zu h3.

Link: Auto Rename Tag

Auto-Open Markdown Preview

Diese Erweiterung öffnet bei öffnen einer Markdown-Datei automatisch die Vorschauansicht auf der rechten Seite im Editor.

Link: Auto-Open Markdown Preview

Better Comments

Diese Erweiterung hebt verschiedene Kommentare im Code farblich hervor für eine bessere Übersicht. Das ganze funktioniert in sehr vielen Programmiersprachen.

In den Benutzereinstellungen von VS Code kannst du dann noch einstellen wie gewisse Kommentar-Tags angezeigt werden.

"better-comments.tags": [
        {
            "tag": "!",
            "color": "#FF2D00",
            "strikethrough": false,
            "backgroundColor": "transparent"
        },
        {
            "tag": "TODO",
            "color": "#F2B705",
            "strikethrough": false,
            "backgroundColor": "transparent"
        }
  ]

Link: Better Comments

Bookmarks

Mit Bookmarks kannst du Zeilen im Codeeditor markieren, dann entsteht links neben den Zeilennummern ein kleines Lesezeichen-Symbol.

Und ganz links in VS Code findest du einen Bookmarks-Reiter (hier im Bild ganz unten), hier findest du dann alle Dateien mit Lesezeichen.

Link: Bookmarks

Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets

Mit dieser Erweiterung bekommst du Bootstrap 4, Font awesome 4 & Font Awesome 5 Free & Pro Code Snippets.

Link: Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets

Bracket Pair Colorizer 2

(Update) Diese Funktion ist mittlerweile nativ in VS Code integriert, du benötigst diese Erweiterung also nicht mehr.

Eines meiner Lieblingserweiterungen ist dieses. Es färbt automatisch zusammengehörige Klammern in der selben Farbe ein. So kann man um einiges besser die einzelnen Klammern zuordnen.

Link: Bracket Pair Colorizer 2

File Tree View

Diese Erweiterung zeigt dir die Gliederung des Code der gerade geöffneten Datei in einer Baumstruktur an. Du kannst einzelne verzweigungen auf und zuklappen.

Mit einem Klick auf eine Verzweigung springt der Editor direkt zu dieser Stelle im Code.

Link: File Tree View

filesize

Eine sehr kleine aber hin und wieder praktische Erweiterung, diese zeigt dir in der unteren Leiste von VS Code die Dateigröße der geöffneten Datei an, das wars auch schon.

Link: filesize

German Language Pack for Visual Studio Code

Wenn du wie ich die Benutzeroberfläche von VS Code auf deutsch haben willst, dann ist diese Erweiterung ein muss für dich.

Link: German Language Pack for Visual Studio Code

gettext

Diese Erweiterung für die Sprachunterstützung für gettext in VS Code hinzu. So bekommst du für po, pot und potx Dateien eine Syntax highlighting.

Link: gettext

Git Graph

Mit Git Graph bekommst du eine grafische Darstellung für Git.

Link: Git Graph

Highlight Matching Tag

Diese Erweiterung markiert farblich zusammenhängende Tags, wie hier im Bild oben in gelb.

Link: Highlight Matching Tag

Live Sass Compiler

Mit dieser Erweiterung kannst du deine CSS Datei automatisch aus einer Sass Datei kompilieren lassen.

Somit kannst du mit Sass entwickeln und die Erweiterung erstellt dir sogar eine komprimierte CSS Datei in einem Ordner deiner Wahl wie hier unten im Beispiel.

"liveSassCompile.settings.formats": [
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "/public/css"
        }
    ]

Link: Live Sass Compiler

Live Server

Mit dieser Erweiterung wird auf Knopfdruck ein Live Server erstellt. Als HTML Entwickler kannst du in VS Code entwickeln und nebenan im Browser direkt das Ergebnis sehen.

Link: Live Server

Lorem ipsum

Mit einem Klick kannst du mit dieser Erweiterung einzelne Platzhalter Zeilen oder Absätze erstellen.

Link: Lorem ipsum

Minify

Eine sehr praktische Erweiterung, diese kann dir automatisch HTML, JS und CSS Dateien komprimieren.

Link: Minify

PHP DocBlocker

Diese Erweiterung hilft dir Kommentarblöcke zu erstellen.

Link: PHP DocBlocker

TODO Highlight

Diese Erweiterung färbt Kommentare ein um diese besser im Code zu erkennen. Du kannst verschiedene Tags wie TODO, FIXME, HACK, ERROR in den Kommentaren verwenden diese werden dann mit unterschiedlichen Farben eingefärbt.

Die Darstellung kannst du natürlich in den Einstellungen anpassen:

"todohighlight.keywords": [
        {
            "text": "TODO:",
            "color": "#fff",
            "backgroundColor": "#F2B705"
        },
        {
            "text": "FIXME:",
            "color": "#fff",
            "backgroundColor": "#D977AD"
        }
  ]

Link: TODO Highlight