Wie formatiere ich Code in Visual Studio Code (VSCode)


990

Was entspricht Ctrl+ K+ Fund Ctrl+ K+ Dunter Windows in Visual Studio zum Formatieren oder "Verschönern" von Code im Visual Studio-Code-Editor?


47
Für alle, die verzweifelt versuchen, XML zu formatieren (was derzeit nicht sofort möglich zu sein scheint), können Sie dies erreichen, indem Sie eine Erweiterung installieren. Ich habe XML-Tools gefunden , um die Arbeit gut zu erledigen. Haftungsausschluss: Ich bin weder der Autor noch mit diesem Projekt verwandt ...
informatik01

Während VSCode viel weniger Menüoptionen als VS hat (neuer Trend?), Enthält es im Menü HILFE umfangreiche Informationen und Tutorials, die diese Frage möglicherweise beantwortet haben.
Roland

Vergessen Sie nicht, den entsprechenden Programmiersprachentyp auszuwählen, der sich unten rechts im Visual Studio-Codefenster neben diesem Smiley befindet. Sobald Sie dies getan haben, stellte ich fest, dass es sofort funktioniert und Sie kein zusätzliches Plugin zum Formatieren von Code benötigen.
Mr.Hunt

Antworten:


3842

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

  • Unter Windows Shift+ Alt+F
  • Unter Mac Shift+ Option+F
  • Unter Linux Ctrl+ Shift+I

Alternativ können Sie die Verknüpfung sowie andere Verknüpfungen über die im Editor mit Ctrl+ Shift+ P(oder Command+ Shift+ Pauf dem Mac) bereitgestellte 'Befehlspalette' finden und dann nach Formatdokumenten suchen .


28
Beachten Sie auch, dass die Codesprache korrekt sein muss. dh Format Code ist nicht verfügbar, wenn Klartext ausgewählt ist, aber wenn Sie beispielsweise zu JSON wechseln, wird der ausgewählte Text problemlos formatiert. (So ​​glücklich wie ein Texteditor sein kann)
Stephen Price

4
@JoSmo: Unter Ubuntu habe ich Datei> Einstellungen> Tastaturkürzel geöffnet. Es gibt ein Element für {"key": "ctrl + shift + i", "command": "editor.action.format", "when": "editorTextFocus"}. Der Befehl "Strg + Umschalt + i" funktioniert bei mir.
Asheesh

18
Außerdem muss die Datei anscheinend zuerst auf der Festplatte gespeichert werden. Ich hatte einen Teil von HTML + Javascript, in dem das JS nicht formatiert werden konnte, also habe ich es in ein temporäres Fenster eingefügt und die Sprache festgelegt, aber dies hat auch nicht geholfen, bis es gespeichert wurde.
Jonas

9
Für die Leute, die sagen, dass es auf einem Mac nicht funktioniert, scheint dies ein Konflikt zwischen der Verknüpfung und dem OS X-Texteingabesystem für Zeichen mit Akzent zu sein, der von Ihrem konfigurierten Gebietsschema und den Tastatureinstellungen abhängt: github.com/Microsoft/vscode/issues / 8914 # issuecomment-245947844
Chris Adams

8
Dies funktioniert bei der neuesten Version von VS Code nicht und bei Win 10 wird davon ausgegangen, dass eine bestimmte Erweiterung installiert ist?
JayPex

479

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 Ihre Inhalte beim Speichern automatisch formatieren möchten, fügen Sie den folgenden Codeausschnitt in den Arbeitsbereichseinstellungen von Visual Studio Code hinzu.

Menü DateiEinstellungenArbeitsbereich - Einstellungen

{
    // 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.


Funktioniert auch für eine andere Sprache: Beautify Extension
Equiman

3
Shift + Alt + I
Ich bin

2
beautifulify.onSave ist nicht gültig mit der installierten eslint-Erweiterung
Ben Petersen

Auf Ubuntu Kumpel 17.04 es Shift + Alt + Iauch
Pini Cheyni

2
@ClintEeastwood versuchen Sie es prettier.singleQuote: truein Ihren vs-Code-Einstellungen.
Enn

216

Sie können eine Tastenkombination im Menü DateiEinstellungenTastaturkürzel hinzufügen .

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

Oder Visual Studio wie:

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

23
In Windows, ersetzen cmdmit ctrl- nicht nur blind kopieren und einfügen , wie ich!
Jens Ehrich

3
"editor.action.format" funktioniert wieder. Es formatiert jetzt das gesamte Dokument, wenn nichts ausgewählt ist, andernfalls formatiert es die Auswahl.
Rotkäppchen

198
  1. Klicken Sie mit der rechten Maustaste auf die Datei
  2. Wählen Sie im Menü die Option Dokument formatieren:
    • Windows: Alt Shift F
    • Linux: Alt Shift I
    • Mac OS: F

Geben Sie hier die Bildbeschreibung ein


18
Für Linux sind die Tastaturkürzel Ctlr + Shift + I
Lucas

Was ist eine Menübox?
Peter Mortensen

@PeterMortensen das Feld, in dem Sie das Menü sehen. Im Screenshot ist es das weiße Feld mit "Dokument
formatieren

117

Die richtige Tastenkombination ist Shift+ Alt+ F.


2
Wenn Sie nur Code aus der Zwischenablage in eine neue Registerkarte kopieren und einfügen , geschieht nichts. Lösung: Speichern Sie den Code in einer Datei mit einer zugehörigen Dateierweiterung (z. B. * .json). Dann funktioniert es. Ich nehme an, der Grund dafür ist, dass der Verschönerer die Sprache der Erweiterung kennt und keine automatische Erkennung basierend auf dem Code durchführt.
Schönheit

Diese Verknüpfung funktioniert für MAC. In Windows wird der Code formatiert.
C. Damoc

63

Für Fedora

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

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

Sie können es auch ändern. Lesen Sie in dieser Antwort nach, wie Sie ... oder ob Sie sich ein wenig faul fühlen, 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: Die cmdTaste ist nur für Macs. Für Windows und Fedora (Windows-Tastatur) verwendenCtrl


BEARBEITEN :

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

editor.action.formatexistiert nicht mehr. Es wurde jetzt durch editor.action.formatDocumentund ersetzteditor.action.formatSelection .

Art editor.action.format das Suchfeld ein, um vorhandene Verknüpfungen anzuzeigen.

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

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

Mit diesem Befehl wird in meinen TypeScript-Dateien aus einem einfachen Anführungszeichen ein doppeltes Anführungszeichen. Wie kann man das lösen?
DioBrando

Ich kann dies anscheinend nicht in der Müll-Benutzeroberfläche für neue Einstellungen finden.
Oliver Dixon

63

Unter Linux ist es Ctrl+ Shift+ I.

Unter Windows ist es 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.


61

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

Aktivieren Sie "Format On Save" durch Formatieren

"editor.formatOnSave": true

Außerdem stehen Tastaturkürzel zur Verfügung (Visual Studio Code 1.7 und höher):

Formatieren Sie das gesamte Dokument : Shift+ Alt+F

Nur Formatauswahl : Ctrl+ K, Ctrl+F


Ich schlage vor, EsLint Erweiterung für VS Code marketplace.visualstudio.com/…
Dariusz

44

Unter Ubuntu ist es Ctrl+ Shift+ I.


7
Ich denke, es hängt von der Sprache ab. CTRL + SHIFT + Ifunktioniert zum Beispiel für JavaScript, aber nicht für PHP.
Jamie Carl

32

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

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


1
Klar, ich benutze Windows und es funktioniert wie beschrieben - es kann von der VScode-Version (bitte aktualisieren!) Und von der Dateierweiterung abhängen. Bitte testen Sie mit HTML.
Gerfried


32

Menü DateiEinstellungenEinstellungen

"editor.formatOnType": true

Wenn Sie das Semikolon eingeben, wird es formatiert.

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


Seltsamerweise habe ich festgestellt, dass das Verhalten dieser Einstellung anders sein kann als shift+alt+fin bestimmten Situationen. Ich weiß aber nicht warum!
JzInqXc9Dg

Wenn ich diese Aktivierung habe und eine Funktion in C # erstelle, kann ich das Ganze abschließen und fortfahren, aber die Funktion wird erst formatiert, wenn ich die Funktion "Dokument formatieren" ausführe. Ich weiß nicht, warum die obige Einstellung nach Eingabe einer Funktion nicht formatiert wird.
Daniel Jackson


24

Aus irgendeinem Grund Alt+ Shift+ Fhat nicht funktioniert für mich auf Mac Visual Studio - Code 1.3.1, und tatsächlich den Befehl „Format Dokument“ überhaupt nicht gearbeitet. Aber befehle Formatter hat sehr gut funktioniert.

So können Sie verwenden Command+ Shift+ Pund geben Sie Formatter oder Ihre eigene Verknüpfung im Menü vornehmen DateiEinstellungenAbkürzungen TastaturCommand+ K Command+ Sgeben Sie dann Formatter und Ihre Verknüpfung hinzuzufügen.

Siehe ein Beispiel:

Geben Sie hier die Bildbeschreibung ein


23

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.

    Geben Sie hier die Bildbeschreibung ein

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

    Shift+ Alt+F

    Geben Sie hier die Bildbeschreibung ein


1
Manchmal kopiere ich das Einfügen von XML in eine neue Datei und möchte sie formatieren, ohne die Datei zu speichern. Dies ist perfekt für solche Situationen!
user3885927

19

In Visual Studio Code macht Shift+ Alt+ Fdas, was Ctrl+ K+ Din Visual Studio macht.


18

Die Formatverknüpfung in C # funktionierte für mich erst, als ich Mono für Mac OS X, DNVM und DNX installiert habe .

Bevor ich Mono installiert habe, funktionierte die Verknüpfung zum automatischen Formatieren ( Shift+ Alt+ F) nur für die .jsonDateien.


Um C # zu formatieren, müssen Erweiterungen installiert werden. Normalerweise sollte Omnisharp funktionieren. Es gibt jedoch einen Fehler in Omnisharp. Bis der Fehler behoben ist, müssen wir die Erweiterung Leopotam.csharpfixformat verwenden. Es überschreibt Omnisharp. Nach der Installation der C # FixFormat-Erweiterung kann ich Dokumente erneut formatieren.
Oncel Umut TURER

18

Auf dem Mac Shift+ Alt+ Ffunktioniert für mich.

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

Leistungen

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

Ergebnisse

  • .vscode/settings.json wird im Projektstammordner erstellt

Wie man?

  1. Gehen Sie zu: Menü DateiEinstellungenArbeitsbereichseinstellungen

  2. Hinzufügen und Speichern "editor.formatOnType": truein settings.json (wodurch das Standardverhalten für das Projekt, an dem Sie arbeiten, durch Erstellen der Datei .vscode / settings.json überschrieben wird).

    Wie es aussieht

Benutzerumgebungsebene

Leistungen

  • Benötigt keine Erweiterung
  • Persönliche Entwicklungsumgebung, die alle regiert (Einstellungen :))

Ergebnisse

  • Der Benutzer wurde settings.jsongeändert (siehe Speicherort nach Betriebssystem unten).

Wie man?

  1. Gehen Sie zu: Menü DateiEinstellungenBenutzereinstellungen

  2. Hinzufügen oder ändern Sie den Wert des "editor.formatOnType": falseauf "editor.formatOnType": truedem Benutzer settings.json

Der settings.jsonStandort Ihres Visual Studio Code-Benutzers lautet:

Speicherorte 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.jsonDie Arbeitsbereichseinstellungsdatei befindet sich in Ihrem Projekt im Ordner .vscode.

Weitere Details finden Sie hier .


9

Standardmäßig funktionierte dieser Schlüssel bei HTML-, CSS- und JavaScript-Dokumenten nicht.

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

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


Ja, aber nur 2 von 5 Sternen? Ernsthaft?
kmoser

Nur zur Erinnerung: Diese Antwort wurde ursprünglich im Jahr 2017 geschrieben und zu dieser Zeit war die VS-Code-Funktionalität über Plugins oder andere Hacks ziemlich funktionsfähig. Zu dieser Zeit funktionierte keine der anderen Lösungen für mich, sodass ich sie selbst entdeckte, was zu dieser Zeit tatsächlich funktionierte und nicht kümmerte sich darum, wie viele Sterne es hat :-) Jetzt 2020 und Formatierungsunterstützung ist sofort fantastisch.
Mumair

Ich glaube nicht, dass VS Code die sofortige Formatierung von CSS unterstützt. Ich habe das Prettier- Plugin ( prettier.io ) installiert, das JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown und YAML verarbeitet. 5,6 Millionen Installationen und 4 Sterne.
kmoser

Ich bin froh, dass Sie hübscher fanden: P Die Formatierungsunterstützung ist vorhanden, aber nicht so gut. Ich verwende hübscher als Dev-Abhängigkeit in allen Projekten mit .prettierrcund Plugin. Ich befürchte, dass eines Tages hübscher in vs-code
übergehen wird

8

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

Geben Sie hier die Bildbeschreibung ein

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




7

Für diejenigen, die die zu formatierenden JavaScript-Dateien anpassen möchten, können Sie die beliebige Erweiterung der JSfilesEigenschaft verwenden. Gleiches gilt für HTML.

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

Dadurch wird das Verschönern beim Speichern für TypeScript aktiviert, und Sie können der HTML-Option XML hinzufügen.


1
Wo lege ich das hin? Es hilft auch hinzuzufügen, dass Verschönern eine Erweiterung ist ...
Rotger

Sie könnten erwähnt haben , wo Sie diesen Code setzen.
Gromit190

6

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

Siehe diesen Screenshot:

img


6

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.


Beautify fragt Sie, ob es nicht weiß, welchen Formatierer Sie verwenden sollen, und ermöglicht es Ihnen, cshtml zu formatieren.
Cees Timmerman

6

Die einfachste Art, wie ich in Visual Studio Code (Ubuntu) verwende, ist:

Wählen Sie den Text aus, den Sie mit der Maus formatieren möchten.

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


5

Nicht dieser. Benutze das:

Menü DateiEinstellungenArbeitsbereich - Einstellungen , „editor.formatOnType“ : wahr


3
Nicht dieser was? Beziehen Sie sich auf eine andere Antwort? Wenn ja, welches?
Peter Mortensen


2

Visual Studio Code unter Linux:

Ctrl+ [zum unindentierten Codeblock und

Ctrl+ ]um eine Masseneinrückung zu machen

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.