web-dev-qa-db-de.com

Wie formatiert man Code in Visual Studio Code (VSCode)

Was ist das Äquivalent von Ctrl + K + F und Ctrl + K + D unter Windows in Visual Studio zum Formatieren oder "Verschönern" von Code im Visual Studio-Code-Editor?

990
Brandon Clapp

Die Code-Formatierung ist in Visual Studio Code über die folgenden Verknüpfungen verfügbar:

  • Unter Windows Shift + Alt + F
  • Auf dem Mac Shift + Option + F
  • Auf Ubuntu Ctrl + Shift + I

Alternativ können Sie die Verknüpfung sowie andere Verknüpfungen über die Suchfunktion finden, die im Editor mit bereitgestellt wird Ctrl +ShiftP (oder Command + Shift + P auf dem Mac), und suchen Sie dann nach format document .

3188
Brandon Clapp

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.

431

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" }
200
hardkoded
  1. Klicken Sie mit der rechten Maustaste auf die Datei
  2. Wählen Sie Dokument formatieren (Alt + Shift + F) aus dem Menü.

Enter image description here

123
Siddarth Kanted

Die richtige Tastenkombination ist Shift + Alt + F.

112
César

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

69
Johannes Rieken

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.
60
abyshukla

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.

59

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 DokumentShift + Alt + F

nur FormatauswahlCtrl + KCtrl + F

56
Dariusz

Auf Ubuntu ist es Ctrl + Shift + I.

41
ranbuch

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.

28
Gerfried

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:

Enter image description here

24

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

22
Piotrek Hryciuk

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.

    Enter image description here

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

    Shift + Alt + F

    Enter image description here

19
afeef

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.

17
Jo Smo

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

17
Burk

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

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

Menü DateiEinstellungenTastaturkürzel und filtern nach Schlüsselwort 'Format'.

14

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).

    How it looks

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 .

13

Menü DateiEinstellungenEinstellungen

"editor.formatOnType": true

Wenn Sie das Semikolon eingeben, wird es formatiert.

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

11
M Fatih Koca

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!

8
mumair

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

Enter image description here

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

7
Akhil Ghatiki

Verwenden Sie in Mac +K und dann +F.

6
Gopal Devra

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

6
Rudy

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

Siehe diesen Screenshot:

img

5
Jerry Ni

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".

5
Ashutosh Jha

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.

4
Rick

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.

4
Nigel Feasey

Nicht dieser. Benutze das:

Menu FilePreferencesWorkspace Settings, "editor.formatOnType": true

3
杨恩锋

Visual Studio Code unter Linux:

Ctrl + [ Code-Block und

Ctrl + ] eine Masseneinkerbung machen

1
Hvitis

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

0
Gyuha Shin