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

Question

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

File "main.py", line 11 if Playerexp > 100 ^ SyntaxError: invalid error npm install Failed to load module. If you have prettier or plugins referenced in package.json, ensure you have run

Attempted to load prettier from package.json.

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

Answer 1

这是对我有用的解决方案

1。（如果您从未在全球范围内进行安装），可通过npm在全球范围内进行安装。

npm i prettier -g

2。。在VS代码设置中搜索并使用Prettier Path扩展名设置

//您可以导航至所有更漂亮扩展设置的VS代码Settings > Extensions > Prettier

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

例如

/usr/local/lib/node_modules/prettier（Mac OS）

\AppData\Roaming\npm\node_modules\prettier（Windows）

Answer 2

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

Answer 3

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

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

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

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

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

  

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

我的猜测是，扩展名希望使用软件包中的prettier，即使它是devDependencies。

将devDependency从node_modules中的程序包中删除不会有任何危害。这也使得可以使用与prettier捆绑在一起的prettier-vscode版本（无需安装）。

Answer 5

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

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

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

Answer 6

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

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

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

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

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

Answer 7

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

清理node_nodules时遇到了这个问题。我安装了eslint和更漂亮的全局文件。当我删除node_modules时，此错误提示出现。

Answer 8

@tunji-oyeniran 所说的对我有用。 我在全球范围内安装了更漂亮的，就像他说的：

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 中自动添加了更漂亮的路径。