在 VS Code 中，我收到此错误，'Failed to load module. Attempted to load prettier from package.json'

Question

当我使用 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 没有解决这个问题。任何人都知道这是为什么或我可以做些什么来解决它？

Answer 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 OS)

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

Answer 2

我只是运行进入这个并发现我的 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

Answer 3

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

我在清洁 node_nodules 时遇到了这个问题。我在全局安装了 eslint 和 prettier。当我删除 node_modules 时，出现了这个错误。

Answer 4

更新

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

Notable changes:

[4.0.0] 将 prettier 更新为 2.0
[4.1.0] 添加了配置选项 withNodeModules 以启用对 node_modules 文件夹中文件的处理 [默认值：false]
[4.1.0] 支持从 node_modules 加载 Prettier，即使它没有在 package.json

原版post

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

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

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

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

The extension searches the tree down until we file a package.json. If that package.json contains prettier, the extension uses that, otherwise it will fall back to using the bundled version of prettier. Link

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

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

Answer 5

设置 Prettier 时，按项目进行配置很重要。并非每个项目都使用相同的代码风格，因此尊重您当前从事的任何项目的风格很重要。

演示存储库 bahmutov/prettier-config-example 有两个子文件夹，每个子文件夹都有其独特的代码风格，由 Prettier 强制执行。实际上，您的每个回购协议都有其风格；我正在使用子文件夹以保持示例简单。

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

Answer 6

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

Answer 7

@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。

Answer 8

备选方案（无需全局安装 prettier）

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

也许当 VSCode 询问您是否允许本地安装带有已安装扩展的 prettier 运行时，您只是点击了“不允许”。

那样的话，解决方法是：

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

Answer 9

Preferences -> Settings

搜索

prettier path

在下面的选项中写下更漂亮的文件的名称：

Prettier: Prettier Path

Path to the prettier module

我有 .prettierrc 作为文件名。

这是一个示例文件 .prettierrc:

{
    "useTabs": true,
    "tabWidth": 4,
    "trailingComma": "es5",
    "printWidth": 120
}

在 VS Code 中，我收到此错误，'Failed to load module. Attempted to load prettier from package.json'

In VS Code, I'm getting this error, 'Failed to load module. Attempted to load prettier from package.json'

package.json

visual-studio-code

prettier

更新

原版post

备选方案（无需全局安装 prettier）