VSCode ist nicht zufällig einer der am weitesten verbreiteten Codeeditoren. Viele Gründe sprechen für dieses Tool von Microsoft (code.visualstudio.com/download): neben der Tatsache, dass wir VSCode gratis verwenden können, ist es der enorme Funktionsumfang und die Konfigurationsmöglichkeiten, die das Programm einerseits »out of the box«, also direkt nach der Installation mitbringt und andererseits die schier unendliche Erweiterbarkeit durch die sogenannten »Extensions« oder auf Deutsch: Erweiterungen.
Mit Erweiterungen lassen sich die Oberfläche, aber auch die Funktionen praktisch beliebig den eigenen Bedürfnissen anpassen. In diesem ersten Teil meiner Videoreihe zu Webdesign Grundlagen zeige ich Dir die aus meiner Sicht allerwichtigsten Einstellungen und Erweiterungen.
- 0:00 Intro
- 0:55 Sprache mit der Erweiterung »German Language Pack« auf Deutsch umstellen
- 3:50 Die Oberfläche von VSCode
- 9:00 In VSCode arbeiten wir praktisch immer in Ordnern / Verzeichnissen
- 14:30 Die Erweiterung »Live Server« zum automatischen Neuladen der Codeänderungen im Browser
- 17:55 Die Erweiterung »Prettier« für bessere Fehlerhinweise und saubere Codeformatierung installieren und konfigurieren
- 23:30 Zeilenumbruch aktivieren, damit Code nicht rechts aus dem Fenster herausläuft und damit nicht mehr sichtbar ist
- 24:30 Paarweises Ändern von öffnenden und schließenden Tags per »Linked Editing«
- 26:00 Outro
Hier die vorgestellten Konfigurationen nochmal im Detail
VS Code auf Deutsch umstellen
Nach der Installation der Extension / Erweiterung »German Language Pack« musst Du diese noch aktivieren.
1. Dafür rufst Du über die Command Palette (Strg / Ctrl + P) den Befehl »Configure Display Language auf«:
2. Anschließend den neuen Eintrag »Deutsch« wählen:
3. Danach VSCode neu starten. Fertig.
Prettier in VSCode konfigurieren
Wie beim Language Pack muss Prettier (genaugenommenn VSCode) noch weiter konfiguriert werden, die Installation samt Aktivierung von Prettier alleine reicht nicht, damit diese Erweiterung auch arbeitet.
1. Zuerst Prettier als »Default Formatter« aktivieren. Dafür die Einstellungen über Strg / Ctrl + . aufrufen. Hier in der Eingabemaske »Default Formatter« eingeben. Im Bereich »Editor: Default Formatter« per Dropdown-Menü »Prettier« wählen:
2. Dann VSCode noch mitteilen, dass beim Speichern Prettier über die Datei drüberlaufen und eben formatieren soll. Dafür im Eingabefeld der Einstellungen »on save« eingeben. Es werden die entsprechenden Optionen angezeigt. Hier bei »Editor: Format On Save« das Häkchen setzen:
Das war’s für den Code-Formatierer Prettier.
