Wie formatiert man Code in Visual Studio Code (VSCode)

Verknüpfung zur Code-Formatierung:

Visual Studio-Code unter Windows - Shift + Alt + F

Visual Studio Code unter MacOS - Shift + Option + F

Visual Studio Code unter Ubuntu - Ctrl + Shift + I

Sie können diese Verknüpfung bei Bedarf auch mithilfe einer Voreinstellung anpassen.

Code-Formatierung beim Speichern der Datei:

Mit Visual Studio Code kann der Benutzer die Standardeinstellungen anpassen.

Wenn Sie Ihren Inhalt beim Speichern automatisch formatieren möchten, fügen Sie den folgenden Codeausschnitt in den Arbeitsbereichseinstellungen von Visual Studio Code hinzu.

Menü Datei → Einstellungen → Arbeitsbereichseinstellungen

{
    // Controls if the editor should automatically format the line after typing
    "beautify.onSave": true,

    "editor.formatOnSave": true,

    // You can auto format any files based on the file extensions type.
    "beautify.JSfiles": [
        "js",
        "json",
        "jsbeautifyrc",
        "jshintrc",
        "ts"
    ]
}

Hinweis: Jetzt können Sie TypeScript-Dateien automatisch formatieren. Überprüfen Sie mein Update.

Sie können eine Tastenkombination in Menü Datei → Einstellungen → Tastaturkürzel .

{ "key": "cmd+k cmd+d", "command": "editor.action.formatDocument" }

Oder Visual Studio wie:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.formatDocument" }

1. Klicken Sie mit der rechten Maustaste auf die Datei
2. Wählen Sie Dokument formatieren (Alt + Shift + F) aus dem Menü.

Die richtige Tastenkombination ist Shift + Alt + F.

Beachten Sie außerdem, dass ab heute die Formatierung für diese Sprachen verfügbar ist:

• XML  (sie haben es entfernt , zu viele Bugs)
• HTML
• JSON
• JavaScript
• Typoskript
• C #

Für Fedora

1. Klicken Sie auf File -> Preferences -> Keyboard shortcuts.
2. Suchen Sie unter Default Keyboard Shortcuts (Ctrl + F) für editor.action.format.

Meins las "key": "ctrl+shift+i"

Sie können es auch ändern. Lesen Sie diese Antwort , wie Sie ... oder wenn Sie ein wenig faul sind, nach oben zu scrollen:

Sie können eine Tastenkombination unter "Einstellungen-> Tastaturkürzel" hinzufügen.

{ "key": "cmd+k cmd+d", "command": "editor.action.format" }

Oder Visual Studio wie:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.format" }

Bitte beachten Sie: cmd Schlüssel ist nur für Macs. Für Windows und Fedora (Windows-Tastatur) verwenden Ctrl

EDIT:

Gemäß Visual Code-Version 1.28.2 habe ich Folgendes gefunden.

editor.action.format existiert nicht mehr. Es wurde nun durch editor.action.formatDocument und editor.action.formatSelection ersetzt.

Geben Sie editor.action.format in das Suchfeld ein, um vorhandene Verknüpfungen anzuzeigen.

Gehen Sie folgendermaßen vor um die Tastenkombinationen zu ändern:

1. Klicken Sie auf editor.action.formatDocument oder editor.action.formatSelection
2. Links wird ein stiftähnliches Symbol angezeigt. Klicken Sie darauf.
3. Ein Popup wird angezeigt. Drücken Sie die gewünschte Tastenkombination und drücken Sie die Eingabetaste.

Unter Linux ist es das Ctrl + Shift + I.

Unter Windows ist es das Alt + Shift + F. Getestet mit HTML/CSS/JavaScript und Visual Studio Code 1.18.0.

Für andere Sprachen müssen Sie möglicherweise ein bestimmtes Sprachpaket installieren.

Visual Studio Code 1.6.1 unterstützt " Format On Save ", das automatisch relevante installierte Formatierererweiterungen aufnimmt und das Ganze formatiert Dokument bei jedem Speichern.

Aktivieren Sie "Beim Speichern formatieren" durch Einstellen

"editor.formatOnSave": true

Und es gibt verfügbare Tastaturkürzel (Visual Studio Code 1.7 und höher):

Formatieren Sie das gesamte Dokument: Shift + Alt + F

nur Formatauswahl: Ctrl + K, Ctrl + F

Auf Ubuntu ist es Ctrl + Shift + I.

Klicken Sie einfach mit der rechten Maustaste auf den Text und wählen Sie "Code formatieren".

Visual Studio Code verwendet js-beautify intern, es fehlt jedoch die Möglichkeit, den gewünschten Stil zu ändern. Mit der Erweiterung "Verschönern" können Sie Einstellungen hinzufügen.

Aus irgendeinem Grund Alt + Shift + F hat bei mir unter Mac Visual Studio Code 1.3.1 nicht funktioniert, und tatsächlich hat der Befehl "Dokument formatieren" überhaupt nicht funktioniert. Aber Befehl Formatierer hat sehr gut funktioniert.

So können Sie verwenden Command + Shift + P und tippe Formatierer oder erstelle deine eigene Verknüpfung im Menü Datei → Einstellungen → Tastaturkürzel → Command + KCommand + S Geben Sie dann Formatierer ein und fügen Sie Ihre Verknüpfung hinzu.

Sehen Sie sich ein Beispiel an:

Shift + Alt + F macht den Job in 1.17.2 und höher ganz gut.

Formatieren von Code in Visual Studio.

Ich habe versucht, in Windows 8 zu formatieren.

Folgen Sie einfach den Screenshots unten.

1. Klicken Sie in der oberen Menüleiste auf Ansicht und dann auf Befehlspalette.

2. Dann würde ein Textfeld erscheinen, in dem wir Typ Format benötigen

   Shift + Alt + F

Die Formatverknüpfung in C # hat bei mir erst funktioniert, als ich Mono für Mac OS X, DNVM und DNX installiert habe.

Vor der Installation von Mono wurde die Verknüpfung zur automatischen Formatierung (Shift + Alt + F) funktionierte nur für die .json -Dateien.

In Visual Studio Code Shift+Alt+F macht was Ctrl+K+D macht in Visual Studio.

Auf dem Mac Shift + Alt + F funktioniert bei mir.

Sie können die Tastenkombinationen jederzeit im Menü überprüfen:

Menü Datei → Einstellungen → Tastaturkürzel und filtern nach Schlüsselwort 'Format'.

Während das Ändern des Standardverhaltens für Visual Studio Code eine Erweiterung erfordert, können Sie das Standardverhalten im Arbeitsbereich oder auf Benutzerebene überschreiben. Es funktioniert für die meisten unterstützten Sprachen (ich kann HTML, JavaScript und C # garantieren).

Arbeitsbereichsebene

Vorteile

• Benötigt keine Erweiterung
• Kann zwischen Teams geteilt werden

Ergebnisse

• .vscode/settings.json wird im Projektstammordner erstellt

Wie geht das?

1. Gehe zu: Menü Datei → Einstellungen → Arbeitsbereichseinstellungen

2. Fügen Sie "editor.formatOnType": true zu settings.json hinzu und speichern Sie es (wodurch das Standardverhalten für das Projekt, an dem Sie arbeiten, durch Erstellen der Datei .vscode/settings.json außer Kraft gesetzt wird).

Benutzerumgebungsebene

Vorteile

• Benötigt keine Erweiterung
• Persönliche Entwicklungsumgebung, in der versucht wird, alle zu regieren (Einstellungen :))

Ergebnisse

• Der settings.json des Benutzers wurde geändert (siehe Position nach Betriebssystem unten)

Wie geht das?

1. Gehe zu: Menü Datei → Einstellungen → Benutzereinstellungen

2. Fügen Sie den Wert von "editor.formatOnType": false in "editor.formatOnType": true in der Datei user settings.json hinzu oder ändern Sie ihn

Der settings.json -Pfad Ihres Visual Studio Code-Benutzers lautet:

Speicherort der Einstellungsdatei Abhängig von Ihrer Plattform befindet sich die Benutzereinstellungsdatei hier:

• Windows: %APPDATA%\Code\User\settings.json
• Mac: $HOME/Library/Application Support/Code/User/settings.json
• Linux: $HOME/.config/Code/User/settings.json Die Einstellungsdatei für den Arbeitsbereich befindet sich im Ordner .vscode in Ihrem Projekt.

Weitere Details finden Sie hier .

Menü Datei → Einstellungen → Einstellungen

"editor.formatOnType": true

Wenn Sie das Semikolon eingeben, wird es formatiert.

Alternativ können Sie auch "editor.formatOnSave": true verwenden.

Standardmäßig funktionierte dieser Schlüssel für HTML-, CSS- und JavaScript-Dokumente nicht.

Nach der Suche fand ich das beliebte Plugin JS-CSS-HTML Formatter mit 133.796 Installationen .

Nach der Installation einfach die Fenster neu laden und drücken Ctrl + Shift + F, und es hat funktioniert!

Markieren Sie den Text, klicken Sie mit der rechten Maustaste auf die Auswahl und wählen Sie die Option "Befehlspalette":

Ein neues Fenster öffnet sich. Suchen Sie nach "Format" und wählen Sie die Option aus, deren Formatierung den Anforderungen entspricht.

Verwenden Sie in Mac ⌘+K und dann ⌘+F.

Installieren Sie einfach Visual Studio Keymap von Microsoft. Problem gelöst. : p

Wenn Sie den Stil des Formatdokuments anpassen möchten, sollten Sie die Erweiterung Verschönern verwenden.

Siehe diesen Screenshot:

Die einfachste Möglichkeit, die ich in Visual Studio Code (Ubuntu) verwende, ist:

Markieren Sie mit der Maus den Text, den Sie formatieren möchten.

Klicken Sie mit der rechten Maustaste und wählen Sie "Formatauswahl".

Wenn Sie die zu formatierenden JavaScript-Dateien anpassen möchten, können Sie die Erweiterung any für die Eigenschaft JSfiles verwenden. Gleiches gilt für HTML.

{
    "beautify.onSave": true,
    "beautify.JSfiles": ["js", "json", "jsbeautifyrc", "jshintrc", "ts"],
    "beautify.HTMLfiles": ["htm", "html"]
}

Auf diese Weise können Sie das Speichern für TypeScript verschönern und der HTML-Option XML hinzufügen.

Sie müssen zuerst das entsprechende Plug-In installieren (z. B. XML, C # usw.).

Die Formatierung wird erst verfügbar, wenn Sie das entsprechende Plugin installiert und die Datei mit einer entsprechenden Erweiterung gespeichert haben.

Nicht dieser. Benutze das:

Menu File → Preferences → Workspace Settings, "editor.formatOnType": true

Visual Studio Code unter Linux:

Ctrl + [ Code-Block und

Ctrl + ] eine Masseneinkerbung machen

Erweiterung verwenden ...

Aktiviert die automatische Formatierung des Codes beim Speichern einer Datei.

Starten Sie Visual Studio Code und Quick Open (Ctrl + P), fügen Sie den folgenden Befehl ein und drücken Sie Enter.

ext installiere format-on-save

https://marketplace.visualstudio.com/items?itemName=gyuha.format-on-save