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

21

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?

ghostagent151
fuente
Tener el mismo problema también. ¿Estás detrás del poder por casualidad?
Bryce
Parece que se ha roto algún camino en mi máquina o falta algo. Tenemos un package.json con un script para ejecutar más bonito y un linter. Ejecutar el script desde el archivo package.json no se aplica más bonito, pero si lo formateo yo mismo (opción + shift + f en una Mac) funciona. Tan extraño y molesto tener que formatear manualmente cada archivo.
ghostagent151
Esto parece ser una "adición" bastante reciente al Código VS. A pesar de usar también más bonito en el pasado, no hemos observado este problema. No sé desde qué versión de VS Code en adelante esto se convirtió en un problema.
Manfred
Tener el mismo problema desde hace unos días. Sin proxy o firewall: algo se rompió más bonito en la última actualización de VS Code
Hemal
3
Este es el problema relacionado con github. Están buscando más información sobre este tema (y, si está disponible, un repositorio que se pueda compartir). github.com/prettier/prettier-vscode/issues/1066
Kasper

Respuestas:

16

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

ingrese la descripción de la imagen aquí

// 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)

Tunji Oyeniran
fuente
He instalado Prettier a nivel mundial. Cuando entro en la configuración de VS Code, busco Prettier Path. Veo 2 opciones aquí, Prettier:Config Pathy Prettier: Prettier Path. Estoy usando una mac. ¿Debo agregar /usr/local/lib/node_modules/prettiera ambas rutas o solo a la primera?
ghostagent151
1
@ ghostagent151 solo el último "Prettier: Prettier Path" según la captura de pantalla.
donovan
Aquí hay otro problema que estoy viendo. Si descargo la extensión más bonita en el código vs, tengo mi configuración configurada para que al guardarla se aplique automáticamente más bonita a mi código. Sin embargo, parece haber dos versiones diferentes de más bonito que se aplica. Si ejecuto npm run prettierdesde la línea de comandos, por ejemplo, las variables que tienen cadenas con comillas dobles se convierten en comillas simples. Si guardo y se aplica el formato automático, se convierten en comillas dobles. No estoy seguro de qué está pasando con eso.
ghostagent151
1
@ ghostagent151 Este es un problema diferente. La ejecución npm run prettierutiliza el más bonito local en su proyecto node_modulessi package.jsonexiste uno en el proyecto. Mi consejo es que desactive el Código VS formatOnSavesi va a utilizar reglas de formato personalizadas para su proyecto. Para evitar la sobrescritura de formatos.
Tunji Oyeniran
1
Su ruta a los módulos instalados globalmente diferirá no solo según el sistema operativo, sino también cómo instaló npm (es decir, nvm, etc.). Una manera fácil de obtener el camino es ejecutarnpm root -g
BoDeX
2

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

ford04
fuente
1

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
Sam Storie
fuente
1

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

Shanwaz Ghulam
fuente
1

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

Psy
fuente
0

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

vikrantnegi007
fuente