VS Code installieren und nützliche Einstellungen
Wir zeigen, wie Sie Visual Studio Code installieren und mit deutscher Oberfläche, automatischer Formatierung, nützlichen Erweiterungen und Git-Integration zu einem effizienten Editor machen.
Aurora YazılımRedaktionsteam
6 Min. Lesezeit
Für die VS-Code-Installation laden Sie von code.visualstudio.com das passende Installationsprogramm für Ihr Betriebssystem herunter und führen es aus, oder Sie installieren per Befehl mit winget, Homebrew oder snap. Anschließend fügen Sie das deutsche Sprachpaket hinzu, installieren einen Formatierer wie Prettier und aktivieren die Einstellung Formatieren beim Speichern. Öffnet der Befehl code . im Terminal den Ordner im Editor, ist die Einrichtung abgeschlossen.
Was ist VS Code und warum wird es bevorzugt?
Visual Studio Code ist ein kostenloser, quelloffener Code-Editor von Microsoft. Er ist schlank, läuft unter Windows, macOS und Linux gleich und passt sich mit Tausenden Erweiterungen nahezu jeder Sprache an, von HTML bis Python.
Integriertes Terminal, Git-Integration, intelligente Code-Vervollständigung und Debugger sind in einem Fenster vereint. Deshalb ist er für Webentwickler, Studierende und Unternehmer, die kleine Änderungen an ihrer Website selbst vornehmen, zum Standard-Editor geworden.
Trotz des ähnlichen Namens ist er nicht dasselbe Produkt wie Visual Studio. Visual Studio ist eine deutlich schwerere Entwicklungsumgebung für große .NET-Projekte; VS Code dagegen ist ein schnell startender Editor, der mit Erweiterungen wächst.
Auf einem Rechner, auf dem Sie nichts installieren können, lassen sich kleine Änderungen mit der im Browser laufenden Version vscode.dev erledigen. Terminal und die meisten Erweiterungen funktionieren aber nur in der Desktop-Version vollständig; die Schritte in dieser Anleitung beziehen sich auf die Desktop-Installation.
Installation unter Windows, macOS und Linux
Die offizielle Download-Adresse ist code.visualstudio.com; laden Sie das Installationsprogramm nicht von anderen Seiten herunter. Wählen Sie den Weg, der zu Ihrem Betriebssystem passt.
Windows
Der User Installer installiert nur für Ihr Konto, ohne Administratorrechte, und ist für die meisten Nutzer die empfohlene Option. Aktivieren Sie bei der Installation Add to PATH sowie die Einträge »Open with Code« im Explorer-Kontextmenü; dann können Sie einen Ordner per Rechtsklick direkt im Editor öffnen.
winget install -e --id Microsoft.VisualStudioCodemacOS
Verschieben Sie die heruntergeladene Anwendung in den Ordner Programme (Applications). Damit Sie den Befehl code im Terminal nutzen können, öffnen Sie im Editor mit Cmd+Shift+P die Befehlspalette und führen Shell Command: Install 'code' command in PATH aus.
brew install --cask visual-studio-codeLinux
Auf Debian- und Ubuntu-basierten Systemen können Sie das .deb-Paket von der Website installieren, auf Systemen wie Fedora das .rpm-Paket. Das .deb-Paket fügt dem System das Microsoft-Repository für Updates hinzu. Bei Distributionen mit Snap genügt ein einziger Befehl.
# Mit dem heruntergeladenen .deb-Paket (Ubuntu / Debian)
sudo apt install ./code_*.deb
# Snap ile
sudo snap install code --classicVS Code auf Deutsch umstellen
Um die Oberfläche auf Deutsch umzustellen, genügt es, die offizielle Erweiterung German Language Pack von Microsoft zu installieren. Geben Sie im Erweiterungsbereich (Ctrl+Shift+X) »German« ein und installieren Sie sie; bestätigen Sie den Neustart, sobald der Editor ihn vorschlägt.
Um die Sprache später zu ändern, führen Sie in der Befehlspalette Configure Display Language aus und wählen die Sprache in der Liste. Da die meisten Beispiele im Internet mit englischen Menünamen geschrieben sind, bleiben manche Entwickler bewusst bei der englischen Oberfläche; das ist reine Geschmackssache.
code --install-extension MS-CEINTL.vscode-language-pack-trNützliche Erweiterungen für den Start
Es gibt viele Erweiterungen, aber wenige, richtig gewählte sind besser: Jede Erweiterung erhöht Startzeit und Speicherverbrauch. Für die Webentwicklung empfehlen wir zu Beginn die folgende Liste; mit den Erweiterungs-IDs können Sie sie auch über die Kommandozeile installieren.
- Prüfen Sie vor der Installation einer Erweiterung den Herausgebernamen und die Zahl der Downloads; hüten Sie sich vor gefälschten Erweiterungen mit ähnlichem Namen.
- Entfernen Sie Erweiterungen, die Sie nicht nutzen, oder aktivieren Sie sie nur im jeweiligen Arbeitsbereich.
| Erweiterung | Wozu dient er? | ID |
|---|---|---|
| Prettier | Formatiert Code einheitlich | esbenp.prettier-vscode |
| ESLint | Zeigt JavaScript- und TypeScript-Fehler schon beim Schreiben an | dbaeumer.vscode-eslint |
| EditorConfig | Liest Einrückungs- und Zeilenende-Regeln aus dem Projekt | EditorConfig.EditorConfig |
| Python | Python-Sprachunterstützung, Debugging und Auswahl der virtuellen Umgebung | ms-python.python |
| German Language Pack | Deutsche Oberfläche | MS-CEINTL.vscode-language-pack-de |
code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension EditorConfig.EditorConfig
# Kurulu eklentileri listele
code --list-extensionsEmpfohlene VS-Code-Einstellungen
Sie können die Einstellungen über die Oberfläche (Ctrl+, ) ändern oder die Datei settings.json direkt bearbeiten, indem Sie in der Befehlspalette Preferences: Open User Settings (JSON) ausführen. Die folgenden Einstellungen sind für die meisten Webprojekte ein guter Ausgangspunkt.
Die wirksamste Einstellung ist Formatieren beim Speichern: Bei jedem Speichern ordnet Prettier den Code, und Diskussionen über Einrückungen erübrigen sich.
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2,
"editor.wordWrap": "on",
"files.autoSave": "onFocusChange",
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true,
"files.eol": "\n"
}Projektbezogene Einstellungen
Wenn die Regeln von Projekt zu Projekt abweichen, schreiben Sie die Einstellungen in die Datei .vscode/settings.json im Projektordner. Wird diese Datei ins Repository aufgenommen, arbeitet das ganze Team mit denselben Formatierungsregeln.
Ordnung mit Profilen
Verwenden Sie für unterschiedliche Aufgaben verschiedene Erweiterungssets, erleichtert die Profil-Funktion Ihre Arbeit. In einem Profil »Web« sind zum Beispiel Prettier und ESLint aktiv, in einem Profil »Python« nur die Python-Erweiterungen. Profile legen Sie im Menü Profiles über das Zahnrad unten links an, und sie lassen sich je Ordner wechseln. So werden in jedem Projekt nur die Erweiterungen geladen, die Sie brauchen, und der Editor startet schneller.
WSL und Remote-Verbindung
Arbeiten Sie unter Windows mit Linux-Werkzeugen, verbindet die WSL-Erweiterung von Microsoft VS Code direkt mit den Dateien in der Linux-Umgebung; Terminal, Erweiterungen und Git laufen dann auf der Linux-Seite. Die Erweiterung Remote - SSH aus derselben Familie ermöglicht es, Dateien auf einem Server so zu bearbeiten, als lägen sie auf Ihrem lokalen Rechner.
Einstellungen synchronisieren
Nutzen Sie mehrere Rechner, aktivieren Sie über das Konto-Symbol unten links die Funktion Settings Sync. Einstellungen, Erweiterungen und Tastenkürzel werden dann über Ihr Microsoft- oder GitHub-Konto automatisch abgeglichen.
Git-Integration und integriertes Terminal
VS Code erkennt das auf Ihrem Rechner installierte Git automatisch. In der Quellcodeverwaltung links (Ctrl+Shift+G) sehen Sie geänderte Dateien, prüfen Unterschiede zeilenweise, schreiben eine Commit-Nachricht und speichern mit einem Klick. Wie Sie das Repository zu GitHub hochladen, erklären wir ausführlich in unserer Anleitung zum Hochladen eines Projekts zu GitHub.
Das integrierte Terminal öffnen Sie mit Ctrl+` ; es startet direkt im Projektordner. Möchten Sie unter Windows statt PowerShell Git Bash als Standard-Shell verwenden, nutzen Sie im Dropdown-Menü des Terminal-Bereichs die Option Select Default Profile.
- Ist Git nicht installiert, zeigt der Bereich eine Warnung; installieren Sie zuerst Git und starten Sie den Editor neu.
- Bei JavaScript-Projekten können Sie npm-Befehle in diesem Terminal ausführen, sobald die Node.js-Installation abgeschlossen ist.
- Um ein neues React-Projekt zu starten, ist unsere Anleitung zur Vite-React-Einrichtung der ideale nächste Schritt.
Tastenkürzel, die Zeit sparen
Ein paar Tastenkürzel auswendig zu kennen, verringert den Griff zur Maus deutlich. Unter macOS verwenden Sie Cmd statt Ctrl und Option statt Alt.
| Tastenkürzel (Windows / Linux) | Funktion |
|---|---|
| Ctrl+Shift+P | Befehlspalette: Zugriff auf alle Befehle |
| Ctrl+P | Schnell nach Dateinamen öffnen |
| Ctrl+` | Terminal ein-/ausblenden |
| Shift+Alt+F | Dokument formatieren |
| Alt+Shift+Pfeil nach unten | Zeile kopieren und darunter einfügen |
| Ctrl+D | Nächsten Treffer des markierten Worts ebenfalls auswählen |
| F2 | Symbol im gesamten Projekt umbenennen |
Häufige Probleme und Lösungen
VS Code läuft in der Regel problemlos; die meisten Probleme gehen auf Erweiterungen oder die PATH-Einstellung zurück. Ist der Editor langsamer geworden, sehen Sie in der Befehlspalette mit Developer: Show Running Extensions, welche Erweiterung Last erzeugt.
Wird der Befehl code im Terminal nicht erkannt, führen Sie unter Windows das Installationsprogramm erneut mit der Option Add to PATH aus, unter macOS wiederholen Sie den Shell-Command-Befehl. Funktioniert das Formatieren beim Speichern nicht, ist meist kein Standard-Formatierer gewählt; klicken Sie mit rechts in die Datei und machen Sie über Format Document With Prettier zum Standard.
Bei einem Webprojekt zählt neben den Editor-Einstellungen vor allem das Ergebnis: Sauberer, konsistenter Code erleichtert auch die Pflege der Speed- und Performance-Optimierung sowie des UI/UX-Designs. In den Webdesign-Projekten von Aurora Yazılım arbeiten wir nach demselben Prinzip.
Häufig gestellte Fragen
01Ist VS Code kostenlos?
Ja, VS Code ist für private und kommerzielle Nutzung kostenlos. Auch die große Mehrheit der Erweiterungen ist kostenlos; manche Dienste, etwa einige KI-Assistenten, verlangen ein separates Abonnement. Eine Lizenz oder ein Aktivierungsschlüssel ist nicht nötig.
02Läuft VS Code auf einem alten Rechner?
In den meisten Fällen ja, da es im Vergleich zu einer vollständigen Entwicklungsumgebung schlank ist. Wenn es bei Ihnen langsam läuft, reduzieren Sie die Zahl der Erweiterungen, blenden große Ordner mit der Einstellung files.exclude aus und öffnen nur den Projektordner, an dem Sie gerade arbeiten.
03Was tue ich, wenn ich meine Einstellungen zurücksetzen möchte?
Löschen Sie die Zeilen in der Datei settings.json, setzt das die Benutzereinstellungen auf die Standardwerte zurück. Haben Sie Erweiterungen in Verdacht, starten Sie den Editor mit code --disable-extensions ohne Erweiterungen und grenzen so die Ursache ein.
Haben Sie VS Code installiert und mit deutscher Oberfläche, einigen ausgewählten Erweiterungen und der Einstellung Formatieren beim Speichern ausgestattet, haben Sie einen leistungsstarken Editor, der in jedem Projekt nach demselben Muster arbeitet. Möchten Sie statt selbst zu programmieren eine fertige, individuell entwickelte Software für Ihr Unternehmen, sehen Sie sich die individuellen Softwarelösungen von Aurora Yazılım an oder nehmen Sie Kontakt mit uns auf.
