Prettier Extension 没有纠正不一致的代码格式

Posted 2023-03-07

【中文标题】Prettier Extension 没有纠正不一致的代码格式

【英文标题】：The Prettier Extension is not correcting inconsistent formatting of code

【发布时间】：2021-07-04 12:31:28

【问题描述】：

我下载了一些练习文件来学习如何使用 javascript。我使用 Visual Studio Code 作为编辑器，可以在编辑器中打开练习 javascript 文件。我已经安装了 Prettier - Code Formatter 和 ESlint 以及 Live Server 和 npm-install 扩展，并在课程视频中提供了建议。 ESlint 扩展似乎工作正常，即当我删除一些代码时，代码中的错误会被强调，当我将鼠标移到错误上时，一个弹出窗口会指示缺少的内容。但是，在下面的代码中，我删除了单词“update”周围的左括号和右括号，并缩进了以单词“main”开头的行。并删除应遵循第一个括号的分号。然而，Prettier 扩展并没有更正这些修正，正如视频所建议的那样，我收到了错误 ["ERROR" - 14:55:15] Prettier 无法加载。有关详细信息，请参阅以前的日志。

const updateBackpack = (update) => 
  let main = document.querySelector("main"); // main is an element
  main.innerhtml = markup(backpack);
  console.info(update);
;

你知道为什么 Prettier 不工作以及我如何让它工作吗？请记住，我是编码和 Javascript 的新手。

谢谢， 克莱夫

【问题讨论】：

"查看以前的日志以获取更多信息" 那么这些以前的日志是怎么说的呢？

嗨，荆棘。谢谢你回到我身旁。抱歉，我一直在带我儿子去踢足球。我不确定在哪里可以找到日志。但会尽快查看和反馈。谢谢克莱夫

太棒了。我已经解决了。找到日志文件，这表明npm install 进程没有正确运行。我已经对其进行了排序，并且 Prettier 扩展程序运行正常。非常感谢克莱夫

【参考方案1】：

我认为你和我有完全相同的问题，而我的课程与我完全相同：D！

首先安装更漂亮，使用：

npm 我更漂亮-g

然后配置 VS 代码以选择下载的包。

这是我所做的：在设置中搜索“更漂亮的路径”> 选择“在 settings.json 中编辑”并添加以下配置：

    
  "editor.minimap.enabled": false,
  "editor.fontSize": 12,
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "liveServer.settings.donotShowInfoMsg": true,
  "editor.wordWrap": "on",
  "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,
  "prettier.prettierPath": "/usr/local/lib/node_modules/prettier"

确保 prettier 安装在给定路径："prettier.prettierPath": "/usr/local/lib/node_modules/prettier"

您也可以通过取消注释代码来将 prettier 设为默认值："editor.defaultFormatter": "esbenp.prettier-vscode"

它有我的自定义视觉设置，所以请查看这些设置，然后设置，对于初学者，请尝试按原样粘贴！