Wie formatieren Sie Code beim Speichern in VS-Code?

183

Ich möchte TypeScript-Code automatisch mit dem integrierten Formatierer formatieren, wenn ich eine Datei in Visual Studio Code speichere.

Ich kenne die folgenden Optionen, aber keine davon ist gut genug:

  • Manuell formatieren Shift + Alt + F
  • Format nach Typ "editor.formatOnType": true
    • Es formatiert die Zeile, wenn Sie die Eingabetaste drücken. Leider bleibt es unformatiert, wenn Sie mit der Maus auf eine andere Zeile klicken oder den Aufwärts- / Abwärtspfeil drücken.
  • Vorhandene Erweiterung verwenden
    • Ich habe versucht , diese ein , aber es scheint nicht allzu gut an die Arbeit.
  • Verwenden Sie verschönern "beautify.onSave": true
    • Es funktioniert nicht mit TypeScript
  • Schreiben Sie eine benutzerdefinierte Erweiterung
    • Es ist schwierig, wenn Sie Autosaves und Builds korrekt verarbeiten möchten.
visual-studio-code vscode-settings code-formatting Tomas Nikodym
quelle

Antworten:

272

Ab September 2016 (VSCode 1.6) wird dies nun offiziell unterstützt .

Fügen Sie Ihrer settings.jsonDatei Folgendes hinzu :

"editor.formatOnSave": true
Tomas Nikodym
quelle
5
Gibt es eine Möglichkeit, einige Dateien auszuschließen? dh ich möchte nur .js-Dateien formatieren, keine .html-Dateien.
gabrielAnzaldo
@ gabodev77prettier in VS Code hat Optionen dafür (z. B. prettier.javascriptEnable, prettier.cssEnable ...), jedoch nicht für HTML.
Freewalker
7
Kann es beim automatischen Speichern formatieren? formatOnSave funktioniert bei mir nur, wenn ich Cmd + S manuell drücke.
Freewalker
@gabrielAnzaldo In dieser Frage erfahren Sie, wie Sie bestimmte Dateien / Dateitypen ausschließen können: stackoverflow.com/questions/44831313/…
Gama11
@LukeWilliams Dies ist derzeit nicht möglich. Hier gibt es eine Funktionsanforderung: github.com/microsoft/vscode/issues/45997
Gama11
60

So formatieren Sie Code beim Speichern automatisch:

  • Drücken Sie Ctrl ,, um die Benutzereinstellungen zu öffnen

  • Geben Sie den folgenden Code in die geöffnete Einstellungsdatei ein

    {
    "editor.formatOnSave": true
}

  • Datei speichern

Quelle

Mohammed Zameer
quelle
33

Wenn Sie beim Speichern nur mit Javascript-Quelle automatisch formatieren möchten, fügen Sie dieses hinzu in Users Setting(drücken Sie Cmd,oder Ctrl,):

"[javascript]": { "editor.formatOnSave": true }
Langer Nguyen
quelle
In meiner Version begann ich mit der Suche nach "formatOnSave" und musste nur ein Kontrollkästchen in der Benutzeroberfläche für Vs-Code-Einstellungen aktivieren
Akin Hwan
22

Es müssen keine Befehle mehr hinzugefügt werden. Befolgen Sie die folgenden Schritte, wenn Sie mit Visual Studio Code noch nicht vertraut sind und nach einer einfachen Möglichkeit suchen, Code beim Speichern zu formatieren.

  1. Öffnen Sie die Einstellungen, indem Sie [Cmd+,]auf dem Mac drücken oder den folgenden Screenshot verwenden.

VS Code - Befehlsbild für Einstellungen öffnen

  1. Geben Sie ' format ' in das Suchfeld ein und aktivieren Sie die Option ' Format On Save '.

Geben Sie hier die Bildbeschreibung ein

Du bist fertig. Danke dir.

Balasubramani M.
quelle
4

Fügen Sie diese Zeile für MAC- Benutzer in Ihre Standardeinstellungen ein

Der Dateipfad lautet: / Users / USER_NAME / Library / Application Support / Code / User / settings.json

"tslint.autoFixOnSave": true

Beispiel für die Datei wäre:

{
    "window.zoomLevel": 0,
    "workbench.iconTheme": "vscode-icons",
    "typescript.check.tscVersion": false,
    "vsicons.projectDetection.disableDetect": true,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "eslint.autoFixOnSave": true,
    "tslint.autoFixOnSave": true
}
Richard
quelle