So formatieren Sie VS-Code automatisch, um Zeit und Mühe zu sparen [2023]

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.