Warum formatiert Prettier keinen Code in VSCODE?

97

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?

Billal Begueradj
quelle
3
Dass schönere standardmäßig scheint hat prettier.disableLanguages auf["vue"]
barbsan
Ich würde der .prettierrcZeile hinzufügen "disableLanguages": []. Docs sagt, dass diese Änderung einen Neustart erfordert
Barbansan
1
Es gibt auch ein Problem für v1.27.2 mit dem Hinweis, dass die gleiche Konfiguration für v.1.23
Barbsan
In der Tat habe ich VSCode 1.27.2
Billal Begueradj
3
Upvoted b / c nur Drücken von CMD+ Shift+, Pdann Dokument formatieren und dann Prettier als Standardformatierer auswählen, half mir: D
Blundering Philosopher

Antworten:

228

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

Miha
quelle
2
Ich habe Prettier in den Einstellungen als Standardformatierer konfiguriert, aber es würde einfach nicht funktionieren. Das hat funktioniert. Meinen Tag gerettet!
Garyee
Das gleiche gilt hier, aber ich musste meinen Standardformatierer abwählen und dann die von Ihnen erwähnte Aktion erneut ausführen, damit dies funktioniert.
Lmerino
3
Configure Default FormatterIch bin mir nicht sicher, wo ich es finden soll, aber ich habe Datei-> Einstellungen-> Texteditor-> Standardformatierer verwendet
wlf
Wenn ich den Standardformatierer als hübscher auswähle, wird diese Datei formatiert, danach funktioniert das Speichern jedoch nicht mehr. Ich habe meine Speicheroption aber trotzdem aktiviert. Ich musste immer wieder den Standardformatierer auswählen. Jede Lösung
Himanshu Tariyal
@HimanshuTariyal Dies sollte für Sie funktionieren, aber Sie können sich gerne
lbragile
76

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

Geben Sie hier die Bildbeschreibung ein

Simin Maleki
quelle
18
dient auch alt (command) + shift + fzum Formatieren ohne Speichern.
Yaya
1
Beachten Sie, dass neben der Aktivierung von Format On Save häufig auch ein Standardformatierer angegeben werden muss.
Andy
76

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

Schritte zum Aktivieren des Standardformatierers

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

Format beim Speichern prüfen

lbragile
quelle
5
Dies hat das Problem für mich behoben. Vielen Dank.
Aslamdoctor
2
Genau richtig
2
Zufällig hört mein vscode nach Monaten korrekter Arbeit auf, mit hübscher zu arbeiten. Ich weiß nicht, warum dies das
Problem
1
Gelöst !!!! Danke mein Freund!!!
Antonio Pavicevac-Ortiz
1
Dies ist die Antwort, nach der ich gesucht habe !!!
Strudel
50

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

Geben Sie hier die Bildbeschreibung ein

FacePalm
quelle
2
Manchmal wird Prettier unten nicht angezeigt, aber eine andere Erweiterung (z. B. ESLint) wird angezeigt. Wenn Sie darauf klicken, wird ein Dropdown-Menü angezeigt, in dem Sie andere Tools auswählen können ... einschließlich Prettier. Wählen Sie es aus, um das Protokoll von Prettier anzuzeigen (und danach sollte Prettier im Fach angezeigt werden).
Machineghost
13

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.

Lucas
quelle
12

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.

Geben Sie hier die Bildbeschreibung ein

Juan Castano
quelle
11

Ich war mit diesem Problem konfrontiert und diese drei Schritte lösten mein Problem: Schöner Formatiert keinen Code

Arsham
quelle
1
Vielen Dank, ich konnte dies nicht im Meer der Optionen finden.
Crowmagnumb
7

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
}
Devesh
quelle
5

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.

Hellwach
quelle
Wie man das löst. Ich habe ein Problem, bei dem Eslint nach einer neuen Zeile fragt, wenn Sie die Eingabetaste drücken und speichern. Diese wird an dieselbe Position zurückgesetzt und es tritt erneut ein Fehler auf.
Ammad Khan
4

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

Drucken

Zenox
quelle
3

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

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

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

Kartick Shaw
quelle
3

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.
Manohar Reddy Poreddy
quelle
Vielen Dank. Die akzeptierte Lösung hat bei mir funktioniert. Aber vielleicht kann Ihr Feedback für die anderen funktionieren. Vielen Dank für die Weitergabe der Informationen
Billal Begueradj
1
@BillalBegueradj Richtig, akzeptiert hat bei mir nicht funktioniert, und ich habe ungefähr 1 Stunde verschwendet, also habe ich diese gepostet. Vielleicht ist dies ein neueres Problem, mit dem wir 2020 konfrontiert sind.
Manohar Reddy Poreddy
Ihre Lösung ist der "nicht grafische" Ansatz für meine Antwort: stackoverflow.com/a/64273353/4298115
lbragile
@lbragile Ich konnte es nicht mit GUI tun, daher oben Lösung. Dies ist insbesondere dann besser, wenn wir mehrere Formatierer für verschiedene Sprachen haben. Es ist keine Zeit zu verlieren, wenn wir eine Zeile durch Öffnen einer Datei kopieren und einfügen können.
Manohar Reddy Poreddy
2

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

Ali Monapour
quelle
2

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.

fromm
quelle
2

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

Pankaj Sharma
quelle
2

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.

Geben Sie hier die Bildbeschreibung ein

Dan Macák
quelle
1

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: Geben Sie hier die Bildbeschreibung ein

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.

jaop
quelle
1

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.

Geben Sie hier die Bildbeschreibung ein

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

supi
quelle
0

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.

Sakthi
quelle
8
Was fügt dies zu den anderen 4 Antworten hinzu, die dasselbe erwähnen?
Krisz