Wie formatiere ich Code in Visual Studio Code (VSCode)

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

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 .

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ü Datei → Einstellungen → Arbeitsbereich - 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.

Sie können eine Tastenkombination im Menü Datei → Einstellungen → Tastaturkü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" }

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

Die richtige Tastenkombination ist Shift+ Alt+ F.

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.

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.

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

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

Menü Datei → Einstellungen → Einstellungen

"editor.formatOnType": true

Wenn Sie das Semikolon eingeben, wird es formatiert.

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

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

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 Datei → Einstellungen → Abkürzungen Tastatur → Command+ K Command+ Sgeben Sie dann Formatter und Ihre Verknüpfung hinzuzufügen.

Siehe ein Beispiel:

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 den Typ Format benötigen

   Shift+ Alt+F

   

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

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.

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

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

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ü Datei → Einstellungen → Arbeitsbereichseinstellungen

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

   

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ü Datei → Einstellungen → Benutzereinstellungen

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 .

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!

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

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

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

Verwenden Sie auf dem Mac ⌘+ Kund dann ⌘+ F.

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.

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

Siehe diesen Screenshot:

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.

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

Nicht dieser. Benutze das:

Menü Datei → Einstellungen → Arbeitsbereich - Einstellungen , „editor.formatOnType“ : wahr

Verwenden Sie die Erweiterung ...

Aktiviert die automatische Formatierung des Codes beim Speichern einer Datei.

Starten Sie Visual Studio Code und öffnen Sie es schnell ( Ctrl+ P), fügen Sie den folgenden Befehl ein und drücken Sie Enter.

ext install format-on-save

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

Visual Studio Code unter Linux:

Ctrl+ [zum unindentierten Codeblock und

Ctrl+ ]um eine Masseneinrückung zu machen