在VS Code中，我收到此错误，“无法加载模块。试图从package.json加载漂亮的图片

21

当我使用VS Code并打开一个项目时，我在右下角收到此通知：

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

Source: Prettier Code Format (Extension)

运行npm install无法解决此问题。任何人都知道为什么会这样，或者我可以做些什么来解决它？

visual-studio-code package.json prettier

— ghostagent151
source

也有同样的问题。您是不是偶然地落后于代理人？

— 布莱斯

看来我的机器上的某些路径已损坏或缺少某些内容。我们有一个package.json文件，其中包含一个可以运行漂亮脚本和一个linter脚本的脚本。从package.json文件运行脚本并不适用，但是如果我自己对其进行格式设置（在Mac上为option + shift + f），则可以正常运行。因此，必须手动格式化每个文件的怪异而烦人的事情。

— ghostagent151

这似乎是VS Code的最新“添加”。尽管过去也使用更漂亮的方法，但我们尚未观察到此问题。我不知道从哪个版本的VS Code开始会出现问题。

— 曼弗雷德

从几天前开始出现同样的问题。没有代理服务器或防火墙-这打破了最新的VS代码更新更漂亮

— 血管

3

这是相关的github问题。他们正在寻找有关此问题的更多信息（以及可以共享的回购协议）。github.com/prettier/prettier-vscode/issues/1066

— Kasper

16

这是对我有用的解决方案

1.如果您从未在全球范围内安装过Prettier，请通过npm在全球范围内进行安装

npm i prettier -g

2.Prettier Path在VS Code设置中搜索并使用扩展设置

//您可以导航到VS Code Settings > Extensions > Prettier以获取所有更漂亮的扩展设置

3.更新Prettier Path到您全局安装的Prettier。

例如

/usr/local/lib/node_modules/prettier （苹果系统）

\AppData\Roaming\npm\node_modules\prettier （视窗）

— Tunji Oyeniran
source

我已经在全球范围内安装了Prettier。当我进入VS Code设置时，我搜索Prettier Path。我看到2个选择这里，Prettier:Config Path和Prettier: Prettier Path。我正在使用Mac。我应该添加/usr/local/lib/node_modules/prettier两个路径还是仅添加第一个？

— ghostagent151

1

@ ghostagent151只是屏幕截图中的最后一个“漂亮：漂亮路径”。

— donovan

这是我看到的另一个问题。如果我在vs代码中下载了更漂亮的扩展名，则我已经进行了设置，以便在保存时自动将更漂亮的代码应用于我的代码。但是，似乎有两种不同版本的更漂亮。npm run prettier例如，如果我从命令行运行，则具有双引号的字符串的变量将转换为单引号。如果我保存并应用了自动格式，则它们将转换为双引号。不知道这是怎么回事。

— ghostagent151

1

@ ghostagent151这是一个不同的问题。如果npm run prettier项目中存在本地，则“ 运行”会使用项目中的本地漂亮。我的建议是，如果要为项目使用自定义格式设置规则，请关闭VS Code 。为了避免格式覆盖。node_modulespackage.jsonformatOnSave

— Tunji Oyeniran

1

通往全局安装模块的路径不仅取决于操作系统，还取决于npm（即nvm等）的安装方式。运行路径的一种简单方法是运行npm root -g

— BoDeX

2

更新资料

现在，它适用于prettier-vscode4.1.1和prettier2.0.4，请尝试一下。我可以使用捆绑的或本地安装的更漂亮的版本。

显着变化：

[4.0.0]更漂亮的版本更新为2.0
[4.1.0]在NodeModules中添加了配置选项，以启用对node_modules文件夹中文件的处理[默认值：false]
[4.1.0]支持从node_modules加载Prettier，即使它在package.json中没有直接依赖关系也是如此

原始帖子

我在检查外部软件包的源代码时遇到了此问题node_modules。

一种解决方法是删除此软件包中的prettier条目package.json-无需本地/全局prettier安装。范例：

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

保持package.json有效- 请勿在结尾加上逗号，也不要只注释掉行。它起作用的原因是：

该扩展会向下搜索树，直到我们提交package.json。如果该package.json包含漂亮的扩展名，则扩展名将使用它，否则它将退回到使用捆绑的漂亮的版本。链接

我的猜测是，即使扩展名是prettier要从包中使用devDependencies。

devDependency从中取出包裹应该没有害处node_modules。这也使得可以使用prettier捆绑的版本prettier-vscode（无需安装）。

— 福特04
source

1

我刚遇到这个问题，发现我的package.json文件中存在语法错误。一行上有一个逗号，这似乎是我的根本原因。

我注意到了这一点，因为尝试运行一些Angular测试时看到了以下输出：

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）
source

1

设置Prettier时，必须按项目配置它。并非每个项目都使用相同的代码样式，因此重要的是要尊重当前正在处理的任何项目的样式。

该演示仓库bahmutov/prettier-config-example有两个子文件夹，每个子文件夹都有其各自的代码样式，由Prettier实施。实际上，您的每个存储库都会有其样式。我使用子文件夹是为了简化示例。

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

— 尚瓦兹·古兰
source

1

尝试了此处提供的所有解决方案，没有帮助。更新Visual Studio代码可解决此问题。

— 精神病
source

0

通过npm install全局解决此问题。

清洁扫帚时，我遇到了这个问题node_nodules。我eslint与更漂亮的全球安装一起。当我删除node_modules此错误时，显示该错误。

— vikrantnegi007
source