Visual Studio Code, im Volksmund als VS Code bekannt, ist einer der am häufigsten verwendeten Code-Editoren. VS Code bietet integrierte Unterstützung für Node.js, JavaScript und TypeScript. Sie können jedoch verschiedene Erweiterungen verwenden, um es für die meisten anderen Sprachen und Laufzeiten zugänglich zu machen.
Microsoft ist das Unternehmen, das diesen kostenlosen und Open-Source-Code-Editor entwickelt hat.
VS Code ist aufgrund dieser Funktionen beliebt;
- Intelligenz: VS Code bietet automatische Codevervollständigung und Syntaxhervorhebung.
- Plattformübergreifend: Sie können diesen Code-Editor auf Linux-, Windows- und macOS-Betriebssystemen verwenden.
- Verfügbarkeit verschiedener Erweiterungen: Die Verfügbarkeit verschiedener Erweiterungen kann VS Code auch in eine integrierte Entwicklungsumgebung (IDE) verwandeln.
- Mehrsprachige Unterstützung: Sie können dieses Tool mit fast allen Programmiersprachen über VS-Code-Erweiterungen verwenden.
- Integriertes Endgerät: Das integrierte Terminal in VS Code ermöglicht Entwicklern die Ausführung Git-Befehle direkt aus dem Code-Editor. Sie können also Änderungen von diesem Editor aus festschreiben, pushen und ziehen.
Auto-Formatting in VS Code

Voraussetzungen:
- VS-Code: Dieser Code-Editor kann kostenlos heruntergeladen werden. Wenn Sie es nicht auf Ihrem Computer installiert haben, Laden Sie es von der offiziellen Seite herunter, abhängig von Ihrem Betriebssystem.
- Wählen Sie die zu verwendende Sprache aus: Sie müssen sich für die zu verwendende Sprache entscheiden, da es verschiedene Formatierer für verschiedene Sprachen gibt.
- Ein Formatierer: VS Code verwendet Erweiterungen für die Codeformatierung. Wir werden Prettier in diesem Artikel verwenden. Es steht Ihnen jedoch frei, jeden Formatierer zu verwenden, der zu der von Ihnen verwendeten Sprache passt.
Die automatische Formatierung ist eine Funktion, die Codeblöcke/-zeilen oder eine Datei im Code-Editor basierend auf bestimmten Regeln und Richtlinien automatisch formatiert. Diese Funktion basiert auf einer Konfigurationsdatei, die Formatierungsregeln für Einzüge, Zeilenumbrüche und Abstände festlegt.
Wenn die automatische Formatierungsfunktion aktiviert ist, werden alle diese Regeln auf alle Dateien in Ihrer Codebasis angewendet, während Sie sie schreiben.
Sie können die automatische Formatierung jedoch auch für einen bestimmten Codeblock deaktivieren, wenn Sie möchten, dass er sich von den anderen abhebt. Um dies zu erreichen, können Sie den Codeabschnitt in einen Kommentarblock einschließen, der die anzuwendenden Regeln angibt.
Benefits of Auto-formatting codes in VS code
- Spart Zeit: Das Schreiben von Code und die Formatierung können zeitaufwändig sein. Durch die automatische Formatierung sparen Sie Zeit und können sich somit mehr auf den Schreibprozess und die Syntax konzentrieren.
- Konsistenz: Auch wenn die Quellcode nicht auf der Client-Seite erscheint, sollte es eine gewisse Konsistenz geben. Die automatische Formatierung ist praktisch, insbesondere bei großen Projekten mit mehreren Mitwirkenden.
- Beachtet Best Practices: Die automatische Formatierungsfunktion ist praktisch, um konsistente Einrückungen, Abstände und Namenskonventionen durchzusetzen.
- Für einfaches Codelesen: Gut formatierter Code ist bei Code-Reviews leicht zu verfolgen. Neue Entwickler, die Ihrer Organisation beitreten, werden gut formatierten Code leicht verstehen.
How to enable Auto Format in VS code and customize it
Befolgen Sie diese Schritte, um die automatische Formatierung zu aktivieren:
- Sie benötigen einen Formatierer in Form einer Erweiterung, um die automatische Formatierung in VS Code zu aktivieren. Sie finden die
extensions
Symbol im Menü Ihres VS-Codes. - installieren
Prettier
Verlängerung. Suche nach hübscher; Sie werden viele Erweiterungen finden, die den gleichen Namen haben. Klicken Sie auf den ersten, Entwickler von Prettier, und klicken Sie auf „Installieren“.

Sobald Prettier auf Ihrem VS Code installiert ist, können Sie die automatische Formatierungsfunktion aktivieren.
Wir verwenden eine einfache HTML-Datei einer Anmeldeseite, um zu demonstrieren, wie die automatische Formatierung aktiviert wird.
Wir werden diesen Code verwenden:
<!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>
Obwohl der obige Code funktioniert, ist er schwer zu lesen und zu verfolgen, da er nicht wie erwartet eingerückt ist. Wir werden Prettier verwenden, um den Code automatisch zu formatieren.
Folge diesen Schritten.
- Erstellen Sie eine HTML-Datei (index.html) und fügen Sie den obigen Code hinzu
- Lokalisieren
Settings
im unteren linken Teil Ihres VS-Codes

3. Art Formatter
in der Suchleiste und wählen Sie Prettier
auf die Editor:Default Formatter
Tab.

4. Lokalisieren Editor: Format on Save
und kreuzen Sie das Kästchen an.

5. Speichern Sie Ihre HTML-Datei, wählen Sie die Eingaben in Ihrem HTML-Dokument aus, klicken Sie mit der rechten Maustaste und wählen Sie aus Format Document
.
6. Überprüfen Sie, ob Ihr Dokument formatiert wurde. Diese Erweiterung formatiert automatisch den gesamten anderen Code, den Sie in Ihren VS-Code schreiben.
6. Passen Sie die Prettier Configuration-Einstellungen an: Prettier ist standardmäßig so eingerichtet, dass es viele Dinge ausführt. Sie können es jedoch immer noch an Ihre Bedürfnisse anpassen. Gehe zu Settings
Suchen Sie in Ihrem VS-Code nach Prettier
, und passen Sie die Einstellungen nach Ihren Wünschen an.

7. Erstellen Sie eine hübschere Konfigurationsdatei: Die Einstellungen, die Sie auf Ihrem Computer konfiguriert haben, können sich von anderen unterscheiden, wenn Sie als Team arbeiten. Eine Prettier-Konfigurationsdatei stellt sicher, dass Sie einen konsistenten Codestil für Ihr Projekt haben. Ein ... kreieren .prettierrc
Datei mit .json
Erweiterung zum Konfigurieren Ihrer Projekteinstellungen. Wir können diesen Code zu Demonstrationszwecken zur JSON-Datei hinzufügen;
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
Der obige Codeblock gibt vier Dinge an, nachgestellte Kommas, die Tabulatorbreite, die Verwendung von Semikolons und ob einfache oder doppelte Anführungszeichen verwendet werden sollen. In diesem Fall;
- Ein abschließendes Komma wird nur hinzugefügt, wenn der Code in es5 transpiliert wird.
- Die Tabulatorbreite, die Anzahl der Leerzeichen für jeden Tabulator, ist auf 4 festgelegt.
- 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.
Sie können sich aus Hübschere Dokumente um zu verstehen, wie konsistente Konfigurationseinstellungen erstellt werden.
Best Practices for Auto Format in VS Code
Verwenden Sie die richtige Formatierung
Obwohl wir Prettier in diesem Artikel zu Demonstrationszwecken verwendet haben, bedeutet dies nicht, dass es für alle Sprachen gilt. Es gibt Hunderte von Formatierungserweiterungen für VS Code, und es liegt an Ihnen, zu bestimmen, welche Ihren Anforderungen entspricht. Zum Beispiel Formatierer wie z Prettier
und Beautify
für HTML und CSS geeignet. Andererseits können Sie verwenden Black
or Python
Erweiterungen zum Formatieren Ihres Python-Codes.
Verwenden Sie einen konsistenten Codestil
Wie Sie gesehen haben, können Sie die Einstellungen des Formatierers anpassen. Wenn Sie als Team arbeiten, stellen Sie sicher, dass Sie dieselben Konfigurationen haben, um einen konsistenten Codestil zu erstellen. Der beste Ansatz ist das Erstellen einer .prettierrc.extension-Datei, die alle Konfigurationen für Ihr Projekt enthält.
Verwenden Sie Linters
Sie können verwenden Linters um Ihren Code auf Stilverletzungen, Syntaxfehler und Programmierfehler zu überprüfen. Durch die Kombination von Linters mit automatischer Formatierung sparen Sie viel Zeit und Mühe, Ihren Code lesbar zu machen und zu debuggen.
Verwenden Sie Tastaturkürzel
VS Code verfügt über Hunderte von Verknüpfungen, um Ihnen beim Formatieren Zeit zu sparen. Sie können diese Befehle sogar an etwas denkwürdiges anpassen.
Überprüfen Sie Ihren Code, bevor Sie ihn übernehmen
Obwohl Linting und automatische Formatierung einige Probleme in Ihrem Code beheben können; Sie müssen Ihren Code noch überprüfen, bevor Sie den Commit-Befehl eingeben.
Code Formatting Shortcuts
VS Code ist ein plattformübergreifender Code-Editor, den Sie auf Windows-, Mac- und Linux-basierten Systemen wie Ubuntu verwenden können. Sie können die folgenden Tastenkombinationen verwenden, um entweder das gesamte Dokument oder bestimmte hervorgehobene Bereiche Ihres Codes zu formatieren;
Windows
Shift + Alt + F
Kombination formatiert das gesamte Dokument.Ctrl + K, Ctrl + F
Die Kombination formatiert einen Abschnitt Ihres Codes, den Sie ausgewählt haben. Zum Beispiel ein div.
macOS
Shift + Option + F
Kombination formatiert das gesamte Dokument.Ctrl + K, Ctrl + F
Die Kombination formatiert einen Abschnitt Ihres Codes, den Sie ausgewählt haben. Zum Beispiel ein div.
Ubuntu
Ctrl + Shift + I
Kombination formatiert das gesamte Dokument.Ctrl + K, Ctrl + F
Die Kombination formatiert einen Abschnitt Ihres Codes, den Sie ausgewählt haben. Zum Beispiel ein div.
Beachten Sie jedoch, dass einige dieser Verknüpfungen möglicherweise fehlschlagen, wenn Sie Ihren VS-Code mit verschiedenen Verknüpfungen angepasst haben.
Sie können Ihre VS-Code-Verknüpfungen mit diesen Schritten überprüfen;
- Öffnen Sie VS Code und klicken Sie auf die
File
Artikel in der oberen linken Ecke. - Blättern Sie zu
Preferences
- Klicken Sie auf
Keyboard Shortcuts
, um alle Verknüpfungen anzuzeigen, die Sie verwenden können.
Fazit
Die automatische Formatierung kann Ihnen viel Zeit sparen, wenn Sie sie aktivieren. Die Wahl einer Erweiterung hängt von der Sprache ab, die Sie verwenden. Abhängig von den Programmiersprachen, die Sie für Ihre Projekte verwenden, können Sie mehrere Codeformatierer installieren.
Überprüfen Sie immer die Dokumentation des Formatierers, den Sie für Ihren Code auswählen. Dadurch wird sichergestellt, dass Sie die unterstützten Sprachen verstehen und das Beste daraus machen.
Lesen Sie unseren Artikel über die besten VS Code-Erweiterungen Entwickler verwenden sollten.