Warum formatiert Prettier keinen Code in VSCODE?

In meiner Nuxt-Anwendung, in der ESlint und Prettier installiert und aktiviert sind, habe ich zum Visual Studio-Code-Editor gewechselt.

Wenn ich eine .vue- Datei öffne und CMD+ Shift+ drücke P und Dokument formatieren wähle , wird meine Datei überhaupt nicht formatiert .

Meine .prettierrc- Einstellungen :

{
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

Ich habe so viele Quellcodezeilen, dass ich sie nicht manuell formatieren kann. Was mache ich falsch?

Wie ich es sortiert habe, nachdem Prettier sehr frustriert war und nicht mehr in VSCode gearbeitet hat.

1. Wählen Sie VS Code-> View-> Command Paletteund geben Sie Folgendes ein:Format Document With
2. Dann Configure Default Formatter...und dann wählen Prettier - Code formatter.

Dies hat das Problem für mich auf magische Weise gelöst.

Abhängig von Ihrem Fall kann dies Ihnen helfen ...

Prettier könnte Ihre Dateien auch beim Speichern formatieren.

Das Installieren und Aktivieren führt jedoch nicht zum Funktionieren.

Sie müssen "Format beim Speichern" in VSCode aktivieren: Einstellung >> Benutzer >> Texteditor >> Formatierung

Wenn das, was @Simin Maleki erwähnt hat, es nicht für Sie löst, besteht die Möglichkeit, dass Ihr Standardformatierer nicht festgelegt ist:

File > Preferences > Settings > Search for "default formatter" 

Stellen Sie sicher, dass Ihr Editor: Default FormatterFeld nicht nullsondern ist esbenp.prettier-vscodeund dass alle unten aufgeführten Sprachen angekreuzt sind. Dies hat mein Problem behoben.

SCHRITT FÜR SCHRITT WALKTHROUGH

Stellen Sie außerdem sicher, dass Ihr Format beim Speichern aktiviert ist:

Manchmal funktioniert hübscher nicht mehr, wenn der Code syntaktische Fehler enthält. Sie können die Fehler anzeigen, indem Sie auf die Schaltfläche x in der unteren rechten Ecke neben Prettier klicken

Dies ist kein Problem mit Prettier selbst, sondern prettier-vscodemit der VSCode-Erweiterung. Gemäß der Dokumentation ist die Vue-Formatierung standardmäßig deaktiviert:

prettier.disableLanguages ​​(Standard: ["vue"])

Eine Liste der Sprach-IDs, für die diese Erweiterung deaktiviert werden soll. Neustart erforderlich. Hinweis: Durch Deaktivieren einer in einem übergeordneten Ordner aktivierten Sprache wird die Formatierung verhindert, anstatt dass andere Formatierer ausgeführt werden

In diesem Fall sollten Sie zum Aktivieren festlegen "prettier.disableLanguages": []. Und da dies eine Erweiterungskonfiguration ist, sollten Sie dies nicht in der VSCode-Einstellungsdatei tun .prettierrc.

Ich benutze Vue nicht, hatte aber das gleiche Problem.

Ich hatte bereits die Einstellungen

• Editor: default formatter zu schöner
• Editor: Format on Save zu true
• Ich hatte schon .eslintrc.jsund .prettierrcAkten Aber nichts hat funktioniert.

Die Lösung für mein Problem war, dass ich alles richtig eingestellt hatte, außer ich musste:

• Command+ Shift+p
• Art format document with
• wählen Configure Default Formatter...
• PrettierAls Standard auswählen .

Ich weiß nicht, warum das Editor: Format on SaveSet truenicht genug war. Ich musste den Standardformatierer mithilfe der obigen Schritte auswählen, damit es funktionierte.

Ich war mit diesem Problem konfrontiert und diese drei Schritte lösten mein Problem:

1. Wenn die andere Erweiterung hübscher für mich nicht funktioniert hat, verwende ich einfach die andere VSCODE-Erweiterung mit dem Namen PrettierNowIch denke, das wird helfen, für mich erledigt. Testen Sie die Erweiterung hier

2. Von den neuesten Updates von Prettier müssen Sie eine .prettierrcDatei in Ihrem Stammverzeichnis der Projekte hinzufügen , wenn Sie bei Prettier bleiben möchten. Ein Beispiel dafür .prettierrcist:

{
  "tabWidth": 4,
  "singleQuote": true,
  "semi": false
}

Für mich hatte es mit ESlint zu tun, das auch mit Prettier funktioniert. Eslint funktionierte nicht (eine lokale Installation gegen einen globalen Installationskonflikt), was Prettier kaputt machte.

Das Aktivieren von "Format beim Speichern" in VSCode: Einstellung >> Benutzer >> Texteditor >> Formatierung hat bei mir funktioniert! 🙌

Drucken

Können Sie versuchen, diesen Abschnitt zu Ihrer Benutzereinstellungsdatei hinzuzufügen?

 "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        //   "editor.formatOnSave": true,
    },

Manchmal mit automatischem Plugin-Update gehen die von Prettier verwendeten erforderlichen Dateien möglicherweise verloren.

Überprüfen Sie diesen Pfad, wenn hier Dateien vorhanden sind oder der Ordner leer ist

C: \ Benutzer \ IHR BENUTZERNAME \ .vscode \ extensions \ esbenp.prettier-vscode-2.2.2 \ out

Wenn es fehlt, deinstallieren Sie und installieren Sie hübscher neu

Dateipfad:

C:\Users\pgmre\AppData\Roaming\Code\User\settings.json

Wechsel von:

"[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
},

Zu:

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

Hinweis:

• Wenn das oben Genannte nicht vorhanden ist, fügen Sie es hinzu, anstatt es zu ändern.
• Sie sollten den "Prettier-Code-Formatierer" bereits installiert haben, um die Auswirkungen der obigen Änderung zu sehen.

Ich rollte hübscher auf 1.7.3 zurück und reparierte es

Wenn keine der anderen Antworten funktioniert, überprüfen Sie, ob .prettierrcin Ihrem Arbeitsverzeichnis keine widersprüchlichere Konfiguration vorhanden ist, oder stellen Sie .prettierignoresicher, dass die Dateien / Ordner nicht ignoriert werden.

Zum Verwalten (befindet sich auf der linken unteren Ecke) -> Einstellungen -> Benutzer tab -> Text-Editor -> Formatierung -> Überprüfen Sie das Format beim Speichern

Wenn dies nicht funktioniert, schließen Sie den vscode-Editor und öffnen Sie ihn erneut

Für mich war das Problem bei HTML-Dateien, bei denen die Formatierung eines Tages nicht mehr funktionierte. Ich hatte Format On Save konfiguriert, was in allen Dateien außer HTML funktionierte.

Dann wurde mir klar, dass ich Format On Save Mode experimentell auf modificationanstatt eingestellt hatte fileund vergaß es. Dies hatte zur Folge, dass nichts in HTML-Dateien formatiert wurde, überraschenderweise nicht einmal meine Änderungen. Zurücksetzen, um filedas Problem zu beheben.

Vor kurzem habe ich das gleiche Problem, dass Prettier den Code beim Speichern nicht automatisch formatiert. Beim Überprüfen von Prettier wurde ein Fehler festgestellt: Ungültiger "arrowParens"Wert. Erwartet "immer" oder "vermeiden", aber erhaltentrue .

Die Fehlermeldung wurde angezeigt, als ich darauf klickte:

Es stellte sich heraus, dass ich Prettier Now auch installiert habe. Dies hat einen booleschen Wert in meiner Konfigurationsdatei. Nach der Deinstallation von Prettier Now funktioniert alles einwandfrei.

Trotz all dieser Einstellungen können immer noch Probleme auftreten. In diesem Fall ist es, wie in einer früheren Antwort ausgeführt, ein guter Punkt, die schönere Benachrichtigung in der unteren Statusleiste in VSCode zu überprüfen.

Wenn Sie auf diesen Status klicken, sollte das Ausgabefenster das Problem in der HTML-Datei melden. Für mich war das Problem, dass ich ein div inside ap-Tag hatte, gegen das vermutlich hübschere / VSCode-Konventionen verstoßen. Als ich es entfernte (und mit allen oben genannten Einstellungen kombinierte, nämlich Standardformatierer und Format beim Speichern ), wurde ich hübscher.

.prettierrc ist nur erforderlich, wenn Sie die VSCode-Einstellungen überschreiben möchten

Vergessen Sie nicht, "editor.defaultFormatter" in den Einstellungen des VSCode zu aktivieren. In meinem Fall war es null und daher schien auch das "editor.formatOnSave" das Problem nicht zu lösen.