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


21

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?


Tendo o mesmo problema também. Você está atrás de procuração por acaso?
Bryce

Parece que algum caminho está quebrado na minha máquina ou algo está faltando. Temos um package.json com um script para rodar mais bonito e um linter. A execução do script a partir do arquivo package.json não se aplica mais bonita, mas se eu mesmo formatar (opção + shift + f em um mac) ele funcionará. Tão bizarro e irritante ter que formatar manualmente cada arquivo.
ghostagent151

Parece ser uma "adição" relativamente recente ao VS Code. Apesar de usarmos mais bonitos no passado também, não observamos esse problema. Não sei de qual versão do VS Code em diante isso se tornou um problema.
Manfred

Tendo o mesmo problema desde alguns dias atrás. Sem proxy ou firewall - algo quebrou mais bonita na última atualização Código VS
Hemal

3
Esse é o problema do github relacionado. Eles estão procurando mais informações sobre esse problema (e, se disponível, um repositório que possa ser compartilhado). github.com/prettier/prettier-vscode/issues/1066
Kasper

Respostas:


16

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

insira a descrição da imagem aqui

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


Eu instalei o Prettier globalmente. Quando entro nas configurações do código VS, procuro Prettier Path. Eu vejo duas opções aqui, Prettier:Config Pathe Prettier: Prettier Path. Estou usando um mac. Devo adicionar /usr/local/lib/node_modules/prettieraos dois caminhos ou apenas ao primeiro?
ghostagent151

11
@ ghostagent151 apenas o último "Prettier: Prettier Path", conforme a captura de tela.
31419

Aqui está outra questão que estou vendo. Se eu baixar a extensão mais bonita no código vs, tenho minhas configurações definidas para que, ao salvar, ela se aplique automaticamente mais bonita ao meu código. No entanto, parece haver duas versões diferentes de aplicação mais bonita. Se eu executar a npm run prettierpartir da linha de comando, por exemplo, variáveis ​​que possuem seqüências de caracteres com aspas duplas são convertidas em aspas simples. Se eu salvar e o formato automático for aplicado, eles serão convertidos em aspas duplas. Não tenho certeza do que está acontecendo com isso.
precisa saber é o seguinte

11
@ ghostagent151 Este é um problema diferente. A execução npm run prettierusa a local mais bonita no seu projeto, node_modulesse houver alguma package.jsonno projeto. Meu conselho é que você desative o VS Code formatOnSavese estiver usando regras de formatação personalizadas para o seu projeto. Para evitar a substituição do formato.
Tunji Oyeniran 21/11/19

11
O caminho para os módulos instalados globalmente será diferente, dependendo não apenas do sistema operacional, mas como você instalou o npm (por exemplo, nvm, etc). Uma maneira fácil de obter o caminho é executarnpm root -g
BoDeX 09/12/19

2

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


1

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

1

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


1

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


0

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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.