Nachgestelltes Komma nach der letzten Zeile im Objekt

Ich verwende Prettier in VS Code. Mir ist aufgefallen, dass Prettier bei Verwendung des Formats beim Speichern jedes Mal nachgestellte Kommas in die letzte Zeile eines Objekts einfügt.

Nehmen wir zum Beispiel an, ich hätte ein JS-Objekt wie dieses:

obj = {
 hello: 'hello',
 world: 'world'
}

Prettier macht daraus Folgendes:

obj = {
 hello: 'hello',
 world: 'world',
}

Beachten Sie das zusätzliche Komma danach 'world'

Ich habe in den Einstellungen keine Option gefunden, um dieses Problem zu beheben.

Sie können aktualisieren .prettierrc.json und Option festlegen trailingComma Zu none wie:

{
  "trailingComma" : "none",
  ...
}

Nachgestellte Kommas sind eine Konvention im Codestil, die eingeführt wurde, um falsche Unterschiede in der Versionskontrolle (z. B. Git) zu vermeiden.

Stellen Sie sich vor, Sie haben versionierten Code und müssen ihn ändern. Wenn Sie Ihrem Objekt eine neue Zeile ohne das abschließende Komma hinzufügen, müssen Sie die ursprüngliche letzte Zeile durch Hinzufügen eines Kommas ändern. In der Versionskontrolle wird dies dann als zwei geänderte Zeilen angezeigt. Der Codeprüfer oder ein zukünftiger Entwickler muss prüfen, ob Sie die letzte Zeile tatsächlich geändert oder nur das Komma hinzugefügt haben.

Zuckerbergs Antwort zeigt Ihnen, wie Sie es ändern können. Es ist jedoch besser, Ihren Stil zu ändern, als sich zu ändern hübscher‘s Stil.

Nachfolgende Kommas sind bereits ein Standard, da sie zu einem saubereren Commit-Verlauf führen. Wenn Sie später eine Eigenschaft hinzufügen müssen, zeigt Git eine einzelne geänderte Zeile anstelle einer neuen Zeile UND das neue Komma in der vorherigen Zeile an.

Um die Einstellung zu ändern VSCode:

1. Gehen Sie zu DATEI -> EINSTELLUNGEN -> EINSTELLUNGEN. (VS-Code-Menüs)
2. Das Einstellungsfenster sollte sich öffnen. Oben (oben) gibt es eine Suche. Typ „Hübscher“
3. Sie sollten die verfügbaren Prettier-Einstellungen sehen. Sie können sie ändern

Jetzt ändern trailingComma Zu none

Nachgestellte Kommas sind modernes JS, aber wenn Sie sie wirklich nicht mögen Sie können deaktiviert werden.

In meinem Fall reichte die obige Konfiguration nicht aus:

{
  "trailingComma" : "none",
}

Damit dies bei mir funktionierte, musste ich zusätzlich zu dieser Einstellung auch die Einstellung entfernen Einstellung.json:

"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},

Und mit der bereits installierten Erweiterung Prettier Geben Sie als Nächstes den Befehl ein
ctrl + shift + P In vscode

Klicke auf Configure...

Wählen Prettier - Code formatter

Jetzt das:

const a = {
  a: 10,
  b: 15,
};

wird daraus:

const a = {
  a: 10,
  b: 15
}

Falls sich jemand fragt, wie man VSCodes bekommt prettier Erweiterung verhält sich wie pre-commit‘S prettier Hook, das hat bei mir funktioniert:

  "prettier.trailingComma": "all"

Das oben Genannte sollte in Kombination mit verwendet werden prettier als diedefaultFormatter für die relevanten Dateien, wie von anderen vorgeschlagen.

Wenn das allein nicht ausreicht und Sie auch verwenden EditorConfig Für andere Anpassungen müssen Sie möglicherweise auch Folgendes hinzufügen:

  "prettier.useEditorConfig": false