In VS Code wird folgende Fehlermeldung angezeigt: 'Modul konnte nicht geladen werden. Es wurde versucht, hübscher von package.json zu laden. '

21

Wenn ich VS Code verwende und ein Projekt öffne, wird folgende Benachrichtigung in der unteren rechten Ecke angezeigt:

Failed to load module. If you have prettier or plugins referenced in package.json, ensure you have runnpm installierenAttempted to load prettier from package.json.

Source: Prettier Code Format (Extension)

Durch Ausführen der npm-Installation wird dies nicht behoben. Hat jemand eine Idee, warum das so ist oder was ich tun kann, um es zu beheben?

Ghostagent151
quelle
Das gleiche Problem auch haben. Sind Sie zufällig hinter dem Proxy?
Bryce
Es scheint, als ob auf meinem Computer ein Pfad unterbrochen ist oder etwas fehlt. Wir haben eine package.json mit einem Skript zum Ausführen von Prettier und einem Linter. Das Ausführen des Skripts aus der Datei package.json ist nicht hübscher, aber wenn ich es selbst formatiere (Option + Umschalt + f auf einem Mac), funktioniert es. So bizarr und nervig, jede Datei manuell formatieren zu müssen.
Ghostagent151
Dies scheint eine relativ neue "Ergänzung" zu VS Code zu sein. Obwohl wir in der Vergangenheit auch hübscher verwendet haben, haben wir dieses Problem nicht beobachtet. Ich weiß nicht, ab welcher Version von VS Code dies zu einem Problem wurde.
Manfred
Ich habe das gleiche Problem seit ein paar Tagen. Kein Proxy oder Firewall - etwas ist beim letzten VS-Code-Update hübscher
kaputt gegangen
3
Dies ist das verwandte Github-Problem. Sie suchen nach weiteren Informationen zu diesem Thema (und, falls verfügbar, nach einem Repo, das geteilt werden kann). github.com/prettier/prettier-vscode/issues/1066
Kasper

Antworten:

16

Dies ist eine Lösung, die für mich funktioniert hat

1. Installieren Sie Prettier global über npm, wenn Sie es noch nie global installiert haben

npm i prettier -g

2. Suchen und verwenden Sie die Prettier PathErweiterungseinstellungen in Ihren VS-Codeeinstellungen

Geben Sie hier die Bildbeschreibung ein

// Sie können Settings > Extensions > Prettierfür alle hübscheren Erweiterungseinstellungen zu VS-Code navigieren

3. Aktualisieren Sie das Prettier Pathauf Ihren global installierten Prettier.

Zum Beispiel

/usr/local/lib/node_modules/prettier (Mac OS)

\AppData\Roaming\npm\node_modules\prettier (Windows)

Tunji Oyeniran
quelle
Ich habe Prettier global installiert. Wenn ich in die VS-Code-Einstellungen gehe, suche ich nach Prettier Path. Ich sehe hier 2 Optionen Prettier:Config Pathund Prettier: Prettier Path. Ich benutze einen Mac. Soll ich /usr/local/lib/node_modules/prettierbeide Pfade oder nur den ersten hinzufügen ?
Ghostagent151
1
@ ghostagent151 nur der letzte "Prettier: Prettier Path" laut Screenshot.
Donovan
Hier ist ein weiteres Problem, das ich sehe. Wenn ich die schönere Erweiterung in vs-Code herunterlade, habe ich meine Einstellungen so eingerichtet, dass sie beim Speichern automatisch schöner auf meinen Code angewendet werden. Es scheint jedoch zwei verschiedene Versionen von hübscher zu geben. Wenn ich beispielsweise npm run prettierüber die Befehlszeile ausgeführt werde, werden Variablen mit Zeichenfolgen in doppelten Anführungszeichen in einfache Anführungszeichen konvertiert. Wenn ich speichere und das automatische Format angewendet wird, werden sie in doppelte Anführungszeichen konvertiert. Ich bin mir nicht sicher, was damit passiert.
Ghostagent151
1
@ ghostagent151 Dies ist ein anderes Problem. Beim Ausführen npm run prettierwird die lokale Schönheit in Ihrem Projekt verwendet, node_moduleswenn im Projekt eine package.jsonvorhanden ist. Ich rate Ihnen, VS Code zu deaktivieren, formatOnSavewenn Sie benutzerdefinierte Formatierungsregeln für Ihr Projekt verwenden. Um das Überschreiben des Formats zu vermeiden.
Tunji Oyeniran
1
Ihr Pfad zu Ihren global installierten Modulen hängt nicht nur vom Betriebssystem ab, sondern auch davon, wie Sie npm installiert haben (z. B. nvm usw.). Ein einfacher Weg, um den Pfad zu bekommen, ist zu laufennpm root -g
BoDeX
2

Aktualisieren

Es funktioniert jetzt für mich mit prettier-vscode4.1.1 und prettier2.0.4, probieren Sie es aus. Ich kann entweder die gebündelte oder die lokal installierte Version von Prettier verwenden.

Bemerkenswerte Änderungen :

  • [4.0.0] Schöner auf 2.0 aktualisiert
  • [4.1.0] Konfigurationsoption mit Knotenmodulen hinzugefügt, um die Verarbeitung von Dateien im Ordner node_modules zu ermöglichen [Standard: false]
  • [4.1.0] Unterstützt das Laden von Prettier aus node_modules, auch wenn es nicht als direkte Abhängigkeit in einer package.json angezeigt wird

Ursprünglicher Beitrag

Ich bin auf dieses Problem gestoßen, als ich den Quellcode eines externen Pakets unter überprüft habe node_modules.

Eine Problemumgehung besteht darin, den prettierEintrag in package.jsondiesem Paket zu entfernen - keine lokale / globale prettierInstallation erforderlich. Beispiel :

{
  "devDependencies": {
    ...
    "prettier": "^1.19.1", // remove this line completely
  },
}

Behalten Sie die package.jsonGültigkeit bei - kein nachfolgendes Komma, kommentieren Sie nicht nur die Zeile aus. Der Grund, warum es funktioniert, ist:

Die Erweiterung durchsucht den Baum, bis wir eine package.json ablegen. Wenn diese package.json hübscher enthält, verwendet die Erweiterung diese, andernfalls wird die gebündelte Version von prettier verwendet. Verknüpfung

Ich vermute, dass die Erweiterung prettieraus dem Paket verwendet werden möchte , auch wenn dies der Fall ist devDependencies.

Es sollte nicht schaden, das devDependencyaus einem Paket zu werfen node_modules. Dies ermöglicht auch die Verwendung der prettiermitgelieferten Version prettier-vscode(keine Installation erforderlich).

ford04
quelle
1

Ich bin gerade darauf gestoßen und habe festgestellt, dass meine Datei package.json einen Syntaxfehler enthält. In einer Zeile stand ein nachkommendes Komma, und das allein schien die Hauptursache für mich zu sein.

Ich habe dies bemerkt, weil ich beim Versuch, einige Angular-Tests auszuführen, die folgende Ausgabe gesehen habe:

C:\... [feature/migrate-away-from-angular-http +2 ~6 -0 | +0 ~5 -0 !]> ng test
10% building 3/3 modules 0 active20 11 2019 21:11:18.638:WARN [karma]: No captured browser, open http://localhost:9876/
20 11 2019 21:11:19.575:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/
20 11 2019 21:11:19.576:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
20 11 2019 21:11:19.594:INFO [launcher]: Starting browser Chrome

ERROR in ./src/app/app.component.spec.ts
Module not found: SyntaxError: C:\...\package.json (directory description file): SyntaxError: C:\...\package.json (directory description file): SyntaxError: Unexpected token } in JSON at position 167
 @ ./src/app/app.component.spec.ts 7:31-75
 @ ./src sync \.spec\.ts$
 @ ./src/test.ts
ERROR in ./src/app/app.component.ts
Sam Storie
quelle
1

Beim Einrichten von Prettier ist es wichtig, es pro Projekt zu konfigurieren. Nicht jedes Projekt verwendet denselben Codestil. Daher ist es wichtig, den Stil des Projekts zu berücksichtigen, in dem Sie gerade arbeiten.

Das Demo-Repo bahmutov/prettier-config-exampleverfügt über zwei Unterordner mit jeweils eigenem Codestil, die von Prettier erzwungen werden. In Wirklichkeit hat jedes Ihrer Repos seinen eigenen Stil. Ich verwende Unterordner, um das Beispiel einfach zu halten.

npm install --save-dev --save-exact prettier

Shanwaz Ghulam
quelle
1

Versuchte alle hier angebotenen Lösungen, hat nicht geholfen. Durch das Aktualisieren von Visual Studio Code wurde dieses Problem behoben.

Psy
quelle
0

Dieses Problem wurde npm installglobal behoben.

Ich hatte dieses Problem, als ich meine säuberte node_nodules. Ich hatte eslintzusammen mit hübscher global installiert. Und als ich das löschte, wurde node_modulesdieser Fehler angezeigt.

vikrantnegi007
quelle