Visual Studio Code: Ein vielseitiger Editor für Entwickler
Visual Studio Code, oft einfach als VS Code bezeichnet, hat sich als einer der beliebtesten und meistgenutzten Code-Editoren etabliert. Er bietet von Haus aus exzellente Unterstützung für Node.js, JavaScript und TypeScript. Dank zahlreicher Erweiterungen lässt er sich aber problemlos an eine Vielzahl anderer Programmiersprachen und Laufzeitumgebungen anpassen.
Dieser kostenlose und quelloffene Code-Editor wird von Microsoft entwickelt und kontinuierlich verbessert.
VS Code erfreut sich aufgrund seiner vielfältigen Funktionen großer Beliebtheit:
- Intellisense: Die intelligente Codevervollständigung und Syntaxhervorhebung von VS Code steigern die Produktivität erheblich.
- Plattformunabhängigkeit: VS Code ist auf Linux, Windows und macOS lauffähig und somit ein echter Allrounder.
- Erweiterungs-Ökosystem: Die große Auswahl an Erweiterungen verwandelt VS Code in eine vollwertige integrierte Entwicklungsumgebung (IDE).
- Mehrsprachigkeit: Durch die Erweiterbarkeit können Sie VS Code mit nahezu jeder Programmiersprache nutzen.
- Integriertes Terminal: Das integrierte Terminal ermöglicht es Entwicklern, Git-Befehle direkt im Editor auszuführen, wodurch das Einchecken, Pushen und Pullen von Änderungen vereinfacht wird.
Automatische Codeformatierung in VS Code
Um die automatische Formatierung nutzen zu können, sind einige Vorbereitungen notwendig:
- VS Code: Laden Sie den kostenlosen Code-Editor von der offiziellen Webseite herunter, falls er noch nicht installiert ist.
- Sprachauswahl: Legen Sie die Programmiersprache fest, die Sie bearbeiten möchten, da verschiedene Formatierer für unterschiedliche Sprachen optimiert sind.
- Formatierer: VS Code verwendet Erweiterungen zur Codeformatierung. In diesem Beispiel nutzen wir Prettier, aber Sie können jeden anderen Formatierer verwenden, der zu Ihrer Sprache passt.
Die automatische Formatierung sorgt dafür, dass Codeblöcke, einzelne Zeilen oder gesamte Dateien automatisch und gemäß festgelegter Regeln formatiert werden. Diese Regeln definieren Einrückungen, Zeilenumbrüche und Abstände und werden anhand einer Konfigurationsdatei festgelegt.
Ist die automatische Formatierung aktiv, werden diese Regeln während des Schreibens auf alle Dateien in Ihrem Projekt angewendet.
Es ist auch möglich, die automatische Formatierung für einzelne Codeblöcke zu deaktivieren, indem man sie in einen speziellen Kommentarblock einschließt, der die anzuwendenden Formatierungsregeln definiert.
Vorteile der automatischen Codeformatierung in VS Code
- Zeitersparnis: Die automatische Formatierung spart wertvolle Zeit, da man sich nicht manuell um die Formatierung kümmern muss.
- Konsistenz: Ein einheitlicher Codestil ist wichtig, auch wenn er nicht direkt sichtbar ist. Die automatische Formatierung gewährleistet die Konsistenz, besonders in großen Projekten mit mehreren Entwicklern.
- Best Practices: Durch die Formatierung werden konsistente Einrückungen und Abstände eingehalten, was den Code besser lesbar macht.
- Verbesserte Lesbarkeit: Gut formatierter Code ist bei Code-Reviews leichter zu verstehen und hilft neuen Teammitgliedern, sich schneller einzuarbeiten.
Automatische Formatierung aktivieren und anpassen
Befolgen Sie diese Schritte, um die automatische Formatierung zu aktivieren:
Sobald Prettier installiert ist, können Sie die automatische Formatierung aktivieren.
Zur Veranschaulichung verwenden wir eine einfache HTML-Datei einer Anmeldeseite.
Wir verwenden folgenden Code:
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
</head>
<body style>
<h2 style="text-align: center; margin-top: 50px;">Login </h2>
<form action="" method="POST" style="max-width: 250px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);">
<label for="email" style="display: block; margin-bottom: 10px;">Enter Email</label>
<input type="email" id="email" name="email" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br>
<label for="password" style="display: block; margin-bottom: 10px;">Enter Password</label>
<input type="password" id="password" name="password" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br>
<input type="submit" value="Login" style="background-color: #af4c9e; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer;">
</form>
</body>
</html>
Dieser Code ist zwar funktionsfähig, aber aufgrund der mangelnden Einrückung schwer zu lesen. Prettier wird genutzt, um diesen Code automatisch zu formatieren.
Gehen Sie wie folgt vor:
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
Dieser Codeblock legt vier Dinge fest: das Anhängen von Kommas, die Tabulatorbreite, die Verwendung von Semikolons und die Verwendung von einfachen oder doppelten Anführungszeichen. Im Einzelnen:
- Ein abschließendes Komma wird nur dann hinzugefügt, wenn der Code in ES5 kompiliert wird.
- Die Tabulatorbreite, also die Anzahl der Leerzeichen pro Tabulator, ist auf 4 gesetzt.
- „Semi“ gibt an, ob Sie Ihrem Code am Ende von Anweisungen Semikolons hinzufügen sollten oder nicht. Wir haben es auf „false“ gesetzt, was bedeutet, dass kein Semikolon hinzugefügt wird.
- Sie können in Ihrem Code entweder einfache oder doppelte Anführungszeichen verwenden. Wir haben angegeben, dass wir für dieses Projekt einfache Anführungszeichen verwenden sollten.
In der Prettier-Dokumentation finden Sie detaillierte Informationen zur Konfiguration.
Best Practices für die automatische Formatierung in VS Code
Verwenden Sie den passenden Formatierer
Prettier ist zwar ein gutes Beispiel, aber nicht für alle Sprachen geeignet. Wählen Sie einen Formatierer, der zu Ihren Anforderungen passt. Für HTML und CSS eignen sich Prettier und Beautify, während für Python Black und Python-Erweiterungen empfohlen werden.
Einheitlicher Codestil
Die Formatierungseinstellungen lassen sich anpassen. Achten Sie in der Teamarbeit auf gemeinsame Konfigurationen. Eine .prettierrc-Datei ist ideal, um einheitliche Einstellungen zu gewährleisten.
Nutzen Sie Linters
Linters erkennen Stilverletzungen, Syntaxfehler und Programmierfehler. In Kombination mit automatischer Formatierung spart man viel Zeit und Aufwand, um lesbaren und fehlerfreien Code zu erhalten.
Verwenden Sie Tastenkürzel
VS Code bietet zahlreiche Tastenkombinationen. Passen Sie diese bei Bedarf an, um Zeit zu sparen.
Prüfen Sie Ihren Code
Auch mit Linting und automatischer Formatierung, überprüfen Sie Ihren Code, bevor Sie ihn committen.
Tastenkombinationen für die Codeformatierung
VS Code ist plattformunabhängig und unter Windows, Mac und Linux (wie Ubuntu) nutzbar. Die folgenden Tastenkombinationen formatieren das gesamte Dokument oder bestimmte Bereiche Ihres Codes:
Windows
- Umschalt + Alt + F formatiert das gesamte Dokument.
- Strg + K, Strg + F formatiert den markierten Bereich.
Mac OS
- Umschalt + Wahl + F formatiert das gesamte Dokument.
- Strg + K, Strg + F formatiert den markierten Bereich.
Ubuntu
- Strg + Umschalt + I formatiert das gesamte Dokument.
- Strg + K, Strg + F formatiert den markierten Bereich.
Beachten Sie, dass einige dieser Verknüpfungen möglicherweise nicht funktionieren, wenn Sie sie angepasst haben.
Sie können Ihre VS Code-Verknüpfungen überprüfen:
- Öffnen Sie VS Code und klicken Sie auf Datei.
- Scrollen Sie zu Einstellungen.
- Klicken Sie auf „Tastaturkürzel“, um die Tastenkürzel zu sehen.
Fazit
Die automatische Formatierung spart viel Zeit. Wählen Sie die Erweiterung passend zu Ihrer Programmiersprache. Installieren Sie mehrere Formatierer, wenn Sie in verschiedenen Sprachen arbeiten.
Lesen Sie die Dokumentation des jeweiligen Formatierers, um seine Funktionen besser zu verstehen.
Lesen Sie auch unseren Artikel über die besten VS Code-Erweiterungen für Entwickler.