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

Posted 2023-02-22

【中文标题】在 VS Code 中，我收到此错误，“无法加载模块。尝试从 package.json\' 加载更漂亮的

【英文标题】：In VS Code, I'm getting this error, 'Failed to load module. Attempted to load prettier from package.json'在 VS Code 中，我收到此错误，“无法加载模块。尝试从 package.json' 加载更漂亮的

【发布时间】：2020-03-11 00:08:48

【问题描述】：

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

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)

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

【问题讨论】：

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

似乎我的机器上的某些路径已损坏或缺少某些东西。我们有一个 package.json 和一个运行 prettier 的脚本和一个 linter。从 package.json 文件运行脚本并不适用，但如果我自己格式化它（在 Mac 上为 option+shift+f），它可以工作。不得不手动格式化每个文件真是太奇怪和烦人了。

这似乎是最近对 VS Code 的“补充”。尽管过去也使用过 prettier，但我们还没有观察到这个问题。我不知道从哪个版本的 VS Code 开始，这会成为问题。

几天前遇到同样的问题。没有代理或防火墙 - 在最新的 VS Code 更新中出现了一些更漂亮的东西

这是相关的 github 问题。他们正在寻找有关此问题的更多信息（如果有可以共享的存储库）。 github.com/prettier/prettier-vscode/issues/1066

【参考方案1】：

这是一个对我有用的解决方案

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

npm i prettier -g

2. 在您的 VS 代码设置中搜索并使用 Prettier Path 扩展设置

// 您可以导航到 VS Code Settings > Extensions > Prettier 进行所有 Prettier 扩展设置

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

举例

/usr/local/lib/node_modules/prettier (Mac 操作系统)

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

【讨论】：

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

@ghostagent151 只是最后一个“更漂亮：更漂亮的路径”，根据截图。

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

@ghostagent151 这是一个不同的问题。如果项目中存在package.json，则运行npm run prettier 会使用项目中的本地prettier node_modules。我的建议是，如果您要为项目使用自定义格式规则，请关闭 VS Code formatOnSave。避免格式覆盖。

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

【参考方案2】：

在设置 Prettier 时，为每个项目配置它很重要。并非每个项目都使用相同的代码风格，因此尊重您当前工作的任何项目的风格很重要。

demo repo bahmutov/prettier-config-example 有两个子文件夹，每个子文件夹都有不同的代码风格，由 Prettier 强制执行。实际上，您的每个存储库都有自己的风格；我使用子文件夹是为了使示例简单。

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

【参考方案3】：

尝试了此处提供的所有解决方案，但没有帮助。 更新 Visual Studio Code 解决了这个问题。

【参考方案4】：

更新

它现在适用于 prettier-vscode 4.1.1 和 prettier 2.0.4，试一试。我可以使用捆绑或本地安装的 prettier 版本。

Notable changes:

[4.0.0] 更漂亮的更新到 2.0 [4.1.0] 添加配置选项 withNodeModules 以启用对 node_modules 文件夹中文件的处理 [默认值：false] [4.1.0] 支持从 node_modules 加载 Prettier，即使它在 package.json 中不显示为直接依赖项

---

原帖

我在查看node_modules下的外部包源代码时遇到了这个问题。

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

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

保持package.json 有效 - 没有尾随逗号，不要只是注释掉该行。它起作用的原因是：

扩展程序向下搜索树，直到我们提交 package.json。如果该 package.json 包含 prettier，则扩展使用它，否则它将回退到使用 prettier 的捆绑版本。 Link

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

从node_modules 的包中删除devDependency 应该没有害处。这也使得使用与prettier-vscode 捆绑在一起的prettier 版本成为可能（无需安装）。

【参考方案5】：

我刚刚遇到这个问题，发现我的 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

【参考方案6】：

替代解决方案（无需全局安装 prettier）

如果你有一个本地安装 prettier 的项目（例如通过npm install -D prettier），你不想全局添加它。

当 VSCode 询问您是否允许使用已安装的扩展程序在本地安装 prettier run 时，您可能只是单击了“不允许”。

在这种情况下，解决方案是：

打开 VSCode 并输入 cmd + shift + p 以打开命令面板。 输入Prettier: Reset Module Execution State 然后再次保存您的文件，VSCode 会询问您是否允许运行更漂亮。在那里你要选择Allow everywhere。

【参考方案7】：

通过全局执行npm install 解决了这个问题。

我在清理 node_nodules 时遇到了这个问题。我安装了eslint 以及更漂亮的全局安装。当我删除node_modules 时，这个错误就出现了。

【参考方案8】：

@tunji-oyeniran 所说的对我有用。 正如他所说，我在全球范围内安装了 prettier：

npm i prettier -g

然后我在我的电脑里寻找它

我使用 pwd 命令看到路径是正确的，然后我转到 vscode 并寻找那个扩展路径：

我重新启动了 vscode，我看到格式化代码正在工作。

这是我的 settings.json：

    "editor.minimap.enabled": false,
    "editor.fontSize": 12,
    "editor.formatOnSave": true,
    "editor.tabSize": 2,
    "liveServer.settings.donotShowInfoMsg": true,
    "editor.wordWrap": "on",
    "workbench.iconTheme": "material-icon-theme",
    "emmet.triggerExpansionOnTab": true,
    "emmet.showSuggestionsAsSnippets": true,
    "editor.snippetSuggestions": "top",
    "[javascript]": 
        // "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true,
        "editor.formatOnPaste": true
    ,
    "workbench.colorTheme": "Monokai",
    "window.zoomLevel": 0,
    "editor.columnSelection": false,
    "explorer.compactFolders": false,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "javascript.updateImportsOnFileMove.enabled": "always",
    "liveServer.settings.donotVerifyTags": true,
    // "javascript.format.enable": true,
    "prettier.prettierPath": "/usr/local/lib/node_modules/prettier",

更漂亮的路径是自动添加到这里的，在这个 settings.json 中。