在 VS 代码中检测到无效的更漂亮的配置文件

Question

在 vmware workstation 17 pro 中启动运行 xubuntu 的虚拟机。 开始在 VS Code 中的 Odin 项目中进行练习，事先通过 sudo apt-get update 和 upgrade 更新和升级。 开始工作并注意到我更漂亮的规则在保存时没有格式化。

出现以下错误：

["INFO" - 5:58:23 AM] Formatting completed in 6ms.
["INFO" - 5:58:30 AM] Formatting file:///home/t/repos/css-exercises/flex/03-flex-header-2/style.css
["ERROR" - 5:58:30 AM] Invalid prettier configuration file detected.
["ERROR" - 5:58:30 AM] No loader specified for extension ".prettierrc"
Error: No loader specified for extension ".prettierrc"
    at Explorer.getLoaderEntryForFile (/home/t/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/third-party.js:8194:17)
    at Explorer.loadFileContent (/home/t/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/third-party.js:8448:29)
    at Explorer.createCosmiconfigResult (/home/t/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/third-party.js:8453:40)
    at runLoad (/home/t/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/third-party.js:8464:37)
    at async cacheWrapper (/home/t/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/third-party.js:8294:22)
    at async Promise.all (index 0)
    at async t.ModuleResolver.getResolvedConfig (/home/t/.vscode/extensions/esbenp.prettier-vscode-9.10.3/dist/extension.js:1:5693)
    at async t.default.format (/home/t/.vscode/extensions/esbenp.prettier-vscode-9.10.3/dist/extension.js:1:13308)
    at async t.PrettierEditProvider.provideEdits (/home/t/.vscode/extensions/esbenp.prettier-vscode-9.10.3/dist/extension.js:1:11417)
    at async B.provideDocumentFormattingEdits (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:94:45902)
["ERROR" - 5:58:30 AM] Invalid prettier configuration file detected. See log for details.

查看用户设置，格式化程序不正确，然后我将其切换为更漂亮的代码格式化程序。 仍然没有任何效果。 卸载并重新安装更漂亮，没有任何变化。 尝试禁用并重新启用扩展。 尝试打开和关闭更漂亮：使用编辑器配置，更漂亮：解析全局模块，更漂亮：需要配置。 没变化。

目前该文件位于 /home/t/repos/ 中，我还尝试复制并粘贴到项目目录中并添加到 vs 代码的工作区中。 旁注，在 /repos 文件夹中也是 node_modules 目录。 eslintrc.prettierrc 和 prettier.eslintrc 文件已正确命名并且保持完整。 我尝试解决此问题的方法是通过 settings.JSON 将配置路径直接添加到 repos 目录中的文件。 这是我当前的 settings.JSON 文件：

{
  "workbench.colorTheme": "Default Dark+",
  "editor.guides.bracketPairs": true,
  "workbench.iconTheme": "vscode-icons",
  "editor.linkedEditing": true,
  "security.workspace.trust.untrustedFiles": "open",
  "prettier.configPath": "/home/t/repos/eslintrc.prettierrc",

  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "gitlens.hovers.currentLine.over": "line",
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.AdvanceCustomBrowserCmdLine": "/opt/firefox/firefox",
  "editor.formatOnSave": true,
  "prettier.useEditorConfig": false
}

我最初是从哪里获得这些配置的？ 直接来自本指南： https://vicvijayakumar.com/blog/eslint-airbnb-style-guide-prettier#4-install-the-airbnb-style-config-for-eslint-and-all-dependencies

旁注：更漂亮：更漂亮模块的更漂亮路径目前是空白的。 插入文件路径不起作用，因为我认为这与节点模块相关？

请问有人对如何解决这种情况有任何建议吗？ 我已经尝试了遇到的所有解决方案。 非常感谢我能得到的任何帮助。

Answer 1

开始：

了解您配置的"settings.json"很有帮助。 您需要确保您的工作区".vscode/settings.json"文件和您的用户"settings.json"文件（路径取决于您运行的操作系统）配置为和谐工作，并且不会覆盖另一个具有相同配置的两次。

其次

删除您添加到“./settings.json”文件中的所有配置以更漂亮。 这些设置是由扩展作者添加的。 尽管esbenp.prettier-vscode是 VS Code 的官方 prettier 扩展，但 Prettier 从未打算通过 VS Code 的配置文件进行配置。 Prettier 对其"./.prettierrc"配置文件非常挑剔。 当我们尝试使用扩展在某处生成的更漂亮的配置时，我们使用 VS Code 配置（ "settings.json" ）。 如果您最终在某些项目工作区 vscode 配置（例如".vscode/settings.json"文件）中设置了设置，则每次加载更漂亮的设置时，扩展都会尝试重新生成一个文件。 它甚至可能会尝试加载多个，具体取决于您的 settings.json 文件中的 scope。 它必须如何处理用户范围的 settings.json 文件应该始终被工作区“settings.json”配置文件覆盖。 更不用说更漂亮的配置通常在“.prettierrc”配置文件中包含自己的覆盖规则集。

• 注意：仅供参考，您使用的最有问题的配置是"prettier.configPath"设置。

_我要停止掉入兔子洞，希望你明白我的意思，即：不要使用 VS Code settings.json配置文件来配置“更漂亮”。

这将更容易用项目符号列表来解释

以下内容将帮助您配置一个干净的环境，Prettier 将在您配置的环境中正常工作。

开始...

1. ...删除您添加到所有settings.json文件的所有 Prettier 设置。 这包括您添加到项目“.vscode/settings.json”文件的任何 Prettier 设置，尤其包括您添加到用户“settings.json”文件的所有 Prettier 设置。 完成后，重新加载 VS Code，将其完全关闭，然后重新打开。

---

2. 我不会从您打开的任何项目中删除所有更漂亮的配置文件，而是要求您在重新打开 VS Code 时只打开一个 VS Code 实例。 如果 VS Code 在重新启动后打开一个项目（又名项目文件夹），您将想要关闭该项目而不打开另一个项目。 为此，您可以...
   • 使用键绑定ALT + K后跟F键。
   • 或者，您可以像这样使用标题栏菜单： FILE >> CLOSE FOLDER

此外，请确保所有选项卡也已关闭。

---

3. 此时你的 VS Code 实例应该是完全空的，完全是空白 canvas。从这里你将要创建一个新文件。 去做这个...

   • 你有两个选择之一

     • (A)您可以使用快捷键CTRL + ALT + SUPER + N
     • (B)实现相同目的的另一种方法是像这样使用标题栏菜单： FILE >> NEW FILE

   • 一旦你提示 VS Code 创建一个新文件，VS Code 将要求你选择一个位置来创建它。 位置无关紧要，只要它在一个完全空的文件中，没有其他内容即可。 为了给文件命名，VS Code 可能会使用通常被称为快速输入菜单的下拉菜单。 该文件需要是一个 JavaScript 文件，因此，该文件必须以文件扩展名".js"结尾。 所以我可以稍后引用该文件，我将调用我的"main.js" ，但你可以随意调用你的文件，只要你在阅读"main.js"时知道我引用的是哪个文件。

   • 在与"main.js"相同的文件夹中，再创建一个没有文件扩展名的新文件。 这个文件必须有名字......

   • .prettierrc

注意： “该文件的名称中有一个句点（或点）作为第一个字符（这使其成为一个隐藏文件）。”

---

4. 将以下更漂亮的配置添加到您刚刚创建的“.prettierrc”文件中。

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": true,
  "singleQuote": true
}

---

5. **执行以下命令”

   1.  $ npm init

      • 该命令会询问一堆问题，只需对每个问题按 Enter 即可使用默认的 npm/Node.js 配置快速配置环境。
      • 这样做的目的只是创建一个有效的"package.json"文件。

   2.  $ sudo npm i -g prettier && npm i -D prettier // Or you can execute it as two commands, like this: $ sudo npm i -g prettier $ npm i -D prettier

      • 命令（或命令，取决于您输入它们的方式）将 prettier 安装为项目依赖项，并作为全局 Node.js package。

注意： “确保您已将 prettier 安装为 vscode 扩展程序。并确保您只有一个 prettier 扩展程序。拥有多个 prettier 扩展程序会造成问题和混乱。您应该拥有的扩展程序 ID 应为： esbenp.prettier-vscode “

---

6. Prettier 现在应该可以工作了。 使用我们之前创建的main.js文件写一些javascript，然后按F1打开快捷输入，输入“格式化文档”，直到看到"Format Document"选项，点击即可。 然后从菜单中选择更漂亮。 如果你有错误的代码，Prettier 不会格式化，它需要没有错误。 （如果你想修复错误，请使用像 ESLint 这样的 linter）。

你可以添加一堆空行，或者把大括号放在错误的行上，省去分号，prettier 应该格式化所有这些错误。

---