No código VS, estou recebendo este erro, 'Falha ao carregar o módulo. Tentativa de carregar mais bonita do package.json '

Quando estou usando o VS Code e abro um projeto, recebo esta notificação no canto inferior direito:

Failed to load module. If you have prettier or plugins referenced in package.json, ensure you have runinstalação npmAttempted to load prettier from package.json.

Source: Prettier Code Format (Extension)

A execução da instalação do npm não resolve isso. Alguém tem alguma idéia do porquê disso ou o que posso fazer para corrigi-lo?

Esta é uma solução que funcionou para mim

1. Instale o Prettier Globalmente via npm se você nunca o instalou globalmente

npm i prettier -g

2. Pesquise e use as Prettier Pathconfigurações de extensão nas configurações de código VS

// Você pode navegar para o VS Code Settings > Extensions > Prettierpara todas as configurações de extensão mais bonitas

3. Atualize Prettier Pathpara o seu Prettier instalado globalmente.

Por exemplo

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

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

Atualizar

Agora funciona para mim com prettier-vscode4.1.1 e prettier2.0.4, experimente. Posso usar a versão empacotada ou instalada localmente de mais bonita.

Mudanças notáveis :

• [4.0.0] Atualizado mais bonito para 2.0
• [4.1.0] Foi adicionada a opção de configuração withNodeModules para permitir o processamento de arquivos na pasta node_modules [padrão: false]
• [4.1.0] Suporte ao carregamento do Prettier a partir de node_modules, mesmo que não apareça como uma dependência direta em um package.json

Postagem original

Encontrei esse problema ao inspecionar o código-fonte de um pacote externo em node_modules.

Uma solução alternativa é remover a prettierentrada package.jsondeste pacote - nenhuma instalação local / global é prettiernecessária. Exemplo :

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

Mantenha a package.jsonvalidade - sem vírgula à direita, não apenas comente a linha. A razão pela qual funciona é:

A extensão pesquisa na árvore até que arquivemos um package.json. Se esse package.json contiver mais bonito, a extensão o usará; caso contrário, voltará a usar a versão em pacote do mais bonito. Ligação

Meu palpite é que a extensão deseja usar prettierdo pacote, mesmo que seja devDependencies.

Não deve haver nenhum dano para soltar a devDependencypartir de um pacote no node_modules. Isso também possibilita o uso da prettierversão empacotada prettier-vscode(não é necessária a instalação).

Eu acabei de descobrir isso e descobri que havia um erro de sintaxe no meu arquivo package.json. Havia uma vírgula à direita em uma linha, e isso por si só parecia ser a causa raiz para mim.

Percebi isso porque vi a seguinte saída ao tentar executar alguns testes 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

Ao configurar o Prettier, é importante configurá-lo por projeto. Nem todo projeto usa o mesmo estilo de código, portanto, é importante respeitar o estilo de qualquer projeto em que você esteja trabalhando atualmente.

O repositório de demonstração bahmutov/prettier-config-exampletem duas subpastas, cada uma com seu estilo de código distinto, imposto pelo Prettier. Na realidade, cada um dos seus repositórios terá seu estilo; Estou usando subpastas para manter o exemplo simples.

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

Tentei todas as soluções fornecidas aqui, não ajudou. A atualização do código do Visual Studio corrigiu esse problema.

Corrigido esse problema executando npm installglobalmente.

Eu tive esse problema quando limpei o meu node_nodules. Eu tinha eslintjunto com mais bonito globalmente instalado. E quando eu apaguei o node_moduleserro este indicado aparecendo.