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.
Inhaltsverzeichnis
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