VS Code Setup für Web Development

Eines der ersten Dinge, die ich einrichte, wenn ein neuer Rechner vor mir steht, ist meine Entwicklungsumgebung. Der Editor einer Wahl ist VS Code von Microsoft, deshalb will ich euch hier mal mein VS Code Setup für Web Development präsentieren. Na gut, und ich brauche einen Reminder, damit ich alles wieder hinbekomme, wenn das neue MacBook kommt ☺️

Wieso Visual Studio Code?

WebStorm, Atom, Sublime Text, Visual Studio, Vim. Die Alternativen sind grenzenlos, von IDE bis minimalem Texteditor gibt es alles und jeder hat seinen Favoriten. Meiner Meinung nach ist Code allerdings der beste Mittelweg zwischen Texteditor und IDE (lightweight, aber doch mit den wichtigen Features, wie z.B. Debugging), Code hat – meiner Meinung nach – die bei weitem beste JavaScript-Unterstützung und die Community mit ihren Erweiterungen wächst enorm. Mit JavaScript-Unterstützung meine ich nicht nur Text Highlighting, sondern gutes IntelliSense für die verschiedensten JavaScript-Frameworks. Der Dank geht an TypeScript! Es hat git integriert und fühlt sich für mich am Ende einfach ‚richtig‘ an.

Mein VS Code Setup für Web Development

Die Extensions

VSCode ist für mich schon nach der reinen Standardinstallation sehr gut nutzbar, allerdings machen ein paar Extensions das Arbeiten noch deutlich effizienter. Hier ist meine aktuelle Auswahl:

VS Code Extensions
Meine aktuellen VS Code Extensions

Die Extensions sind in keiner speziellen Reihenfolge gelistet. Für detaillierte Anleitungen schaut euch die Beschreibung im Marketplace genauer an, viele Erweiterungen (z.B. die Snippets, ESLint und Docker) sollten selbsterklärend sein, EditorConfig ist für mich (bzw. uns) unverzichtbar, wenn wir im Team an einem Projekt arbeiten und der Regex Previewer lässt mich meine Rex Expressions direkt im Editor testen, ohne, dass ich auf Websites dafür ausweichen muss. Super finde ich Advanced New File, da ich die gleichnamige Extension für Sublime brilliant fand. Glücklicherweise war ich nicht der Einzige, der so dachte. Ich hab tatsächlich bereits überlegt, die Extension selbst nachzubauen, da hab ich die Lösung im Marketplace gefunden.

Eigene Settings

Die Settings des Editors sind ein einfaches JSON-File. Außerdem gibt es ein weiteres settings.json, in welchem man jedes einzelne Setting manuell anpassen kann. Anbei meine Settings:

// Place your settings in this file to overwrite the default settings
{
  "editor.tabSize": 2,

  // JavaScript-Überprüfung aktivieren/deaktivieren
  "javascript.validate.enable": false, //ES6, wie Spread-Operator, werden nicht mehr angemeckert
  "typescript.check.tscVersion": false,

  "explorer.openEditors.visible": 0, // Die Anzahl der Editoren, die im Bereich "Geöffnete Editoren" angezeigt werden. Legen Sie diesen Wert auf 0 fest, um den Bereich auszublenden.

  "newFile.showFullPath": false,
  "newFile.relativeTo": "file"
}

Die letzten beiden Settings sind für die Extension Advanced New File, einmal möchte ich nur den Filenamen sehen, wenn ich ein neues File erstelle und dann möchte ich den Pfad relativ zum aktuell geöffneten File speichern. So kann ich z.B. via ../someFile.js ein File eine Ebene höher anlegen, weiß aber, wenn ich nur einen Filenamen angebe, dann erscheint es im aktuellen Ordner. Ordner, die nicht existieren, werden übrigens angelegt, was super ist! javascript.validate.enable setze ich bewusst auf disabled, da sonst z.B. Features, wie der Spread Operator als fehlerhafter Code angemahnt werden. Allerdings sollte dann in Projekten linting genutzt werden. Der Workaround kommt übrigens von Microsoft selbst

Shortcuts für das MacBook

Ich bin ehrlich, ich müsste mich mal an deutlich mehr Shortcuts gewöhnen. cmd + p ist Gold wert, um zügig zu navigieren, trotzdem bediene ich noch zu oft das Trackpad. Andere Shortcuts sitzen wiederum und wieder andere wollte ich nutzen, waren aber für mich auf der integrierten MacBook Tastatur einfach nicht intuitiv oder zügig tippbar. Somit habe ich auch eine eigene keybindings.json angelegt, die ein paar Shortcuts anpasst. Hier ist meine Version:

// Place your key bindings in this file to overwrite the defaults
[
  { "key": "shift+cmd+7",            "command": "editor.action.blockComment",
                                     "when": "editorTextFocus" },
  { "key": "cmd+alt+f",              "command": "editor.foldAll",
                                     "when": "editorFocus" },
  { "key": "cmd+alt+u",              "command": "editor.unfoldAll",
                                     "when": "editorFocus" },
  { "key": "ctrl+shift+y",           "command": "workbench.action.terminal.toggleTerminal" }
]

Auskommentieren von Text-Blöcken kommt häufiger mal vor, deshalb musste hier ein Toggle her, mit dem ich das schnell machen kann. Auch fold und unfold von großen Files, finde ich sinnvoll. Wobei ich das deutlich weniger nutze, seit ich cmd + p und dann @ in Fleisch und Blut habe übergehen lassen. Allerdings ist der schnelle Toggle des Terminals noch ziemlich sinnvoll, vor allem kann mit crtl + shift + < ein neues Terminal-Fenster geöffnet werden. So hat man beide Shortcuts nebeneinander.

Das war's

Solltet ihr noch Tipps für den alltäglichen Gebrauch von VS Code haben, dann lasst es mich gern wissen! Ich hoffe, das hier wird ein lebendes Dokument und ich freue mich über Ratschläge!

Eine Antwort auf „VS Code Setup für Web Development“

Schreibe einen Kommentar

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