In VS Code, visualizzo questo errore "Impossibile caricare il modulo. Tentativo di caricare più bello da package.json '

21

Quando utilizzo VS Code e apro un progetto, ricevo questa notifica nell'angolo in basso a destra:

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

Source: Prettier Code Format (Extension)

L'esecuzione di npm install non risolve questo problema. Qualcuno ha idea del perché sia o cosa posso fare per risolverlo?

visual-studio-code package.json prettier

— ghostagent151
fonte

Avere lo stesso problema. Sei dietro proxy per caso?

— Bryce,

Sembra che sulla mia macchina si sia rotto un percorso o che manchi qualcosa. Abbiamo un package.json con uno script per eseguire più bello e una linter. L'esecuzione dello script dal file package.json non si applica più carina, ma se lo formatto da solo (opzione + maiusc + f su un mac) funziona. Così bizzarro e fastidioso dover formattare manualmente ogni file.

— ghostagent151

Questa sembra essere una "aggiunta" abbastanza recente al Codice VS. Nonostante abbiamo usato anche più bello in passato, non abbiamo riscontrato questo problema. Non da quale versione di VS Code in poi questo sia diventato un problema.

— Manfred,

Avere lo stesso problema da qualche giorno fa. Nessun proxy o firewall - qualcosa si è rivelato più bello nell'ultimo aggiornamento VS Code

— Hemal

3

Questo è il problema relativo a github. Stanno cercando ulteriori informazioni su questo problema (e se disponibile un repository che può essere condiviso). github.com/prettier/prettier-vscode/issues/1066

— Kasper

16

Questa è una soluzione che ha funzionato per me

1. Installa Prettier a livello globale tramite npm se non l'hai mai installato a livello globale

npm i prettier -g

2. Cerca e usa le Prettier Pathimpostazioni dell'estensione nelle impostazioni del tuo codice VS.

// È possibile accedere a VS Code Settings > Extensions > Prettierper tutte le impostazioni di estensione Prettier

3. Aggiorna il Prettier Pathtuo Prettier installato a livello globale.

Per esempio

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

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

— Tunji Oyeniran
fonte

Ho installato Prettier a livello globale. Quando entro nelle impostazioni VS Code, cerco Prettier Path. Vedo 2 opzioni qui Prettier:Config Pathe Prettier: Prettier Path. Sto usando un mac. Devo aggiungere /usr/local/lib/node_modules/prettierad entrambi i percorsi o solo il primo?

— ghostagent151

1

@ ghostagent151 solo l'ultimo "Prettier: Prettier Path" come da screenshot.

— donovan,

Ecco un altro problema che sto vedendo. Se scarico l'estensione più carina in vs codice, ho le mie impostazioni configurate in modo che al momento del salvataggio si applichi automaticamente più carina al mio codice. Tuttavia, sembra che vengano applicate due diverse versioni di più carina. Se corro npm run prettierdalla riga di comando, ad esempio, le variabili che hanno stringhe con virgolette doppie vengono convertite in virgolette singole. Se salvo e viene applicato il formato automatico, vengono convertiti in virgolette doppie. Non sono sicuro di cosa stia succedendo.

— ghostagent151,

1

@ ghostagent151 Questo è un problema diverso. Running npm run prettierutilizza il più bello locale nel progetto node_modulesse package.jsonesiste nel progetto. Il mio consiglio è di disattivare VS Code formatOnSavese si useranno regole di formattazione personalizzate per il proprio progetto. Per evitare la sovrascrittura del formato.

— Tunji Oyeniran,

1

Il percorso dei moduli installati a livello globale varierà non solo in base al sistema operativo, ma anche al modo in cui hai installato npm (ovvero nvm, ecc.). Un modo semplice per ottenere il percorso è eseguirenpm root -g

— BoDeX il

2

Aggiornare

Ora funziona per me con prettier-vscode4.1.1 e prettier2.0.4, provalo. Posso usare la versione in bundle o installata localmente di più bella.

Notevoli cambiamenti :

[4.0.0] Aggiornato più carino alla 2.0
[4.1.0] Aggiunta opzione di configurazione conNodeModules per abilitare l'elaborazione dei file nella cartella node_modules [default: false]
[4.1.0] Supporta il caricamento di Prettier da node_modules anche se non appare come dipendenza diretta in un package.json

Posta originale

Ho riscontrato questo problema durante l'ispezione del codice sorgente di un pacchetto esterno in node_modules.

Una soluzione alternativa è rimuovere la prettiervoce in package.jsonquesto pacchetto - non è prettiernecessaria alcuna installazione locale / globale . Esempio :

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

Mantieni la package.jsonvalidità - nessuna virgola finale, non commentare solo la riga. Il motivo per cui funziona è:

L'estensione cerca l'albero verso il basso fino a quando non archiviamo un package.json. Se quel package.json contiene più bello, l'estensione lo utilizza, altrimenti tornerà a utilizzare la versione in bundle di più bello. collegamento

La mia ipotesi è che l'estensione vuole usare prettierdal pacchetto, anche se lo è devDependencies.

Non ci dovrebbero essere danni a far cadere devDependencyda un pacchetto node_modules. Ciò consente anche di utilizzare la prettierversione fornita in bundle prettier-vscode(non è necessaria l'installazione).

— ford04
fonte

1

Mi sono appena imbattuto in questo e ho scoperto di avere un errore di sintassi nel mio file package.json. C'era una virgola finale su una riga e quella sola sembrava essere la causa principale per me.

Ho notato questo perché ho visto il seguente output durante il tentativo di eseguire alcuni test angolari:

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
fonte

1

Quando si imposta Prettier è importante configurarlo per progetto. Non tutti i progetti utilizzano lo stesso stile di codice, quindi è importante rispettare lo stile di qualsiasi progetto in cui si sta attualmente lavorando.

Il repository demo bahmutov/prettier-config-exampleha due sottocartelle, ognuna con il suo stile di codice distinto, applicato da Prettier. In realtà, ognuno dei tuoi repository avrà il suo stile; Sto usando le sottocartelle per mantenere semplice l'esempio.

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

— Shanwaz Ghulam
fonte

1

Ho provato tutte le soluzioni fornite qui, non ha aiutato. L'aggiornamento del codice di Visual Studio ha risolto questo problema.

— Psy
fonte

0

Risolto questo problema facendo npm installglobalmente.

Ho avuto questo problema quando ho pulito il mio node_nodules. Avevo eslintinstallato con più bello a livello globale. E quando ho cancellato node_modulesquesto errore ha dichiarato di apparire.

— vikrantnegi007
fonte