En VS Code, recibo este error, 'Error al cargar el módulo. Intenté cargar más bonito desde package.json '

Cuando uso VS Code y abro un proyecto, recibo esta notificación en la esquina inferior derecha:

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)

Ejecutar npm install no resuelve esto. ¿Alguien tiene alguna idea de por qué es eso o qué puedo hacer para solucionarlo?

Esta es una solución que funcionó para mí.

1. Instale Prettier Globally a través de npm si nunca lo ha instalado globalmente

npm i prettier -g

2. Busque y use la Prettier Pathconfiguración de extensión en la configuración de su código VS

// Puedes navegar a VS Code Settings > Extensions > Prettier para todas las configuraciones de extensión más bonitas

3. Actualice elPrettier Path a su Prettier instalado globalmente.

Por ejemplo

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

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

Actualizar

Ahora funciona para mí con prettier-vscode4.1.1 y prettier2.0.4, pruébalo. Puedo usar la versión incluida o localmente instalada de Prettier.

Cambios notables :

• [4.0.0] Actualizado más bonito a 2.0
• [4.1.0] Se agregó la opción de configuración con NodeModules para permitir el procesamiento de archivos en la carpeta node_modules [valor predeterminado: falso]
• [4.1.0] Admite cargar Prettier desde node_modules incluso si no aparece como una dependencia directa en un package.json

Publicación original

Encontré este problema al inspeccionar el código fuente de un paquete externo en node_modules.

Una solución alternativa es eliminar la prettierentrada package.jsonde este paquete; no es prettiernecesaria una instalación local / global . Ejemplo :

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

Mantenga el valor package.jsonválido, sin coma final, no solo comente la línea. La razón por la que funciona es:

La extensión busca el árbol hacia abajo hasta que archivamos un package.json. Si ese package.json contiene más bonito, la extensión lo usa, de lo contrario volverá a utilizar la versión incluida de prettier. Enlace

Supongo que la extensión quiere usar prettierdesde el paquete, incluso si es así devDependencies.

No debería haber ningún daño al dejar caer devDependencyun paquete node_modules. Esto también permite utilizar la prettierversión incluida prettier-vscode(no es necesaria la instalación).

Me encontré con esto y descubrí que tenía un error de sintaxis en mi archivo package.json. Había una coma final en una línea, y eso solo parecía ser la causa principal para mí.

Noté esto porque vi el siguiente resultado al intentar ejecutar algunas pruebas angulares:

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

Al configurar Prettier es importante configurarlo por proyecto. No todos los proyectos usan el mismo estilo de código, por lo tanto, es importante respetar el estilo de cualquier proyecto en el que esté trabajando actualmente.

El repositorio de demostración bahmutov/prettier-config-exampletiene dos subcarpetas, cada una con su estilo de código distinto, impuesta por Prettier. En realidad, cada uno de tus repositorios tendrá su estilo; Estoy usando subcarpetas para mantener el ejemplo simple.

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

Intenté todas las soluciones proporcionadas aquí, no ayudó. La actualización de Visual Studio Code solucionó este problema.

Se solucionó este problema haciendo npm installglobalmente.

Tuve este problema cuando limpié mi node_nodules. Tenía eslintjunto con más bonito instalado a nivel mundial. Y cuando eliminé el node_moduleserror, este apareció.