How to Auto-Format in VS Code to Save Time and Effort [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;

• Intellisense: VS Code bietet automatische Codevervollständigung und Syntaxhervorhebung. 
• Plattformübergreifend: You can use this code editor on Linux, Windows und macOS-Betriebssysteme. 
• Verfügbarkeit verschiedener Erweiterungen: The availability of various extensions can also transform VS Code into an integrated Entwicklungsumgebung (IDE). 
• Mehrsprachige Unterstützung: Sie können dieses Tool mit fast allen Programmiersprachen über VS-Code-Erweiterungen verwenden. 
• Integrated-Terminal: 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.

Automatische Formatierung 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. 

Auto-formatting is a feature that automatically formats blocks/ lines of code or a file on the code editor based on specific rules and guidelines. This feature is based on a configuration file specifying formatting rules on indentation, line breaks, and spacing. 

Wenn die automatische Formatierungsfunktion aktiviert ist, werden alle diese Regeln auf alle Dateien in Ihrer Codebasis angewendet, während Sie sie schreiben. 

However, you can also disable autoformatting for a specific code block if you want it to stand out from the rest. To achieve this, you can wrap the piece of code in a comment block that specifies the rules to be applied. 

Vorteile der automatischen Formatierung von Codes in VS-Code

• Spart Zeit: Writing code and formatting can be time-consuming. Auto-formatting saves you time, and you can thus focus more on the writing process und Syntax. 
• Konsistenz: Auch wenn die Quellcode does not appear on the client side, there should be some consistency. Auto-formatting comes in handy, especially for large projects with multiple contributors. 
• 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 beim Programmieren leicht zu verstehen revAnsichten. Neue Entwickler, die Ihrer Organisation beitreten, werden gut formatierten Code leicht verstehen. 

So aktivieren Sie die automatische Formatierung in VS-Code und passen sie an

Befolgen Sie diese Schritte, um die automatische Formatierung zu aktivieren:

1. 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. 
2. 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. 

We use a simple HTML file of a login page to demonstrate how to enable auto-formatting.

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. 

1. Create an HTML (index.html) file and add the above code
2. 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. Locate Editor: Format on Save und kreuze die an box.

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. Check if your document has been formatted. This extension will automatically format all the other code you write on your VS Code.

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. Create a Prettier Configuration file: The settings you have configured on your machine could differ from others if you work as a team. A Prettier configuration file will ensure you have a consistent code style for your project. Create a .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 indicates whether you should add semi-colons or not to your code at the end of statements. We have set it as false, which means semi-colons will not be added. 
• 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 man Create consistent configuration settings. 

Best Practices für die automatische Formatierung 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

As you have seen, you can customize the settings of the formatter. If you are working as a team, ensure you have the same configurations to create a consistent code style. The best approach is creating a .prettierrc.extension file to include all the configurations for your project. 

Verwenden Sie Linters

Sie können verwenden Linters to check for style violations, syntax errors, and programming mistakes in your code. Combining linters with auto-formating will save you a lot of time and effort in making your code readable and debugging. 

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

Auch wenn Linting und automatische Formatierung einige Probleme in Ihrem Code beheben können; Du musst es immer noch tun revSehen Sie sich Ihren Code an, bevor Sie den Commit-Befehl eingeben. 

Tastenkombinationen für die Codeformatierung

VS Code is a multiplatform code editor that you can use on Windows, Mac, and Linux-based systems such as Ubuntu. You can use the following shortcuts to either format the entire document or specific-highlighted areas of your code;

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. 

Schlussfolgerung

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.