Zum Inhalt springen

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



Banner


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

2 Gedanken zu „Mein Visual Studio Code Setup: Erweiterungen, Themes und Einstellungen“

  1. Grüße!

    ich wollte schon lange vom kostenpflichtigen aber veralteten Dreamweaver CS6 weg. Habe schon ein dutzend Editoren ausprobiert und bin ebenfalls bei ATOM gelandet. Der zickt aber gelegentlich auch. Der Start ist langsam und er friert manchmal ein.

    Vor ein paar Tagen habe ich dann nach einem Tipp Visual Studio Code für mich entdeckt und bin bei der Suche zum Syntax Highlighting auf deine Seite gelangt. Ich style ihn gerade so, dass ich den (PHP) Code wie vom Dreamweaver gewohnt lesen kann.

    Ich nehme an, dass wir einen ähnlichen Hintergrund haben. Bin Allrounder, progge alles selbst. VSC bringt alles mit, was ich mir wünschte. Crossplatform, Live-Update via sftp, viele Skriptsprachen, kostenlos usw. Fühlt sich bisher gut an.

    Danke für den Artikel!

    1. Ja bin auch immer noch sehr zufrieden mit VS Code. Die Erweiterbarkeit ist wirklich sehr gut. Was auch ganz praktisch ist, GitHub Repositories direkt in der Webversion von VS Code im Browser bearbeiten, wer das noch nicht kennt, einfach die Punkt-Taste drücken wenn man in einem GitHub Repository ist.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

1 + 13 =