tri*_*nge 5 javascript css visual-studio-code prettier
在 vmwareworkstation 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 Code 的工作区中。旁注，/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-dependency
旁注：prettier：prettier 模块的 prettier 路径当前为空。插入文件路径不起作用，因为我相信这与节点模块相关？
请问有人对如何解决这种情况有任何建议吗？我已经尝试过我遇到的所有解决方案。非常感谢我能得到的任何帮助。
了解"settings.json"您的配置很有帮助。您需要确保您的工作区".vscode/settings.json"文件和用户"settings.json"文件（路径取决于您运行的操作系统）都配置为协调工作，并且一个文件不会两次使用相同的配置覆盖另一个文件。
删除您添加到“./settings.json”文件中的所有配置以使其更漂亮。这些设置是由扩展作者添加的。尽管esbenp.prettier-vscodePrettier 是 VS Code 的官方 Prettier 扩展，但 Prettier 从未打算通过 VS Code 的配置文件进行配置。"./.prettierrc"Prettier 对它的配置文件非常挑剔。当我们使用 VS Code 配置 ( "settings.json") 时，尝试使用扩展在某处生成的更漂亮的配置。如果您最终在某些项目工作区 vscode 配置中进行了设置（例如".vscode/settings.json"文件）中使用了设置，则每次加载更漂亮的设置时，扩展都会尝试重新生成文件。它甚至可能尝试加载多个，具体取决于 settings.json 文件的范围。它必须如何处理用户范围的 settings.json 文件应始终被工作区“settings.json”配置文件覆盖。更不用说更漂亮的配置通常在“.prettierrc”配置文件中包含自己的重写规则集。
"prettier.configPath"设置。我将停止陷入兔子洞，希望您能明白我的意思，即：不要使用 VS Codesettings.json配置文件来配置“Prettier”。
以下内容将帮助您配置一个干净的环境，Prettier 将在其中像您配置的那样工作。
\n开始...
\nsettings.json。这包括您添加到项目“.vscode/settings.json”文件中的任何 Prettier 设置，尤其包括您添加到用户“settings.json”文件中的所有 Prettier 设置。完成后，通过完全关闭并重新打开 VS Code 来重新加载它。此外，请确保所有选项卡也已关闭。
\n此时，您的 VS Code 实例应该完全是空的，完全是空白的画布。从这里您将要创建一个新文件。去做这个...
\n您有两种选择之一
\n提示 VS Code 创建新文件后，VS Code 会要求您选择创建文件的位置。位置并不重要，只要它位于一个完全空的文件中，其中没有其他内容即可。为了命名文件，VS Code 可能会使用通常称为快速输入菜单的下拉菜单。该文件必须是 JavaScript 文件，因此该文件必须以文件扩展名结尾".js"。所以我可以稍后引用该文件，我将调用我的文件"main.js"，但是你可以调用你想要的任何文件，只要你知道当你阅读时我引用的是哪个文件"main.js"。
在与 相同的文件夹中"main.js"，再创建一个不带文件扩展名的新文件。该文件必须具有名称...
.prettierrc注意： “该文件的名称中的第一个字符是句点（或点）（这使其成为隐藏文件）。”
\n{\n "trailingComma": "es5",\n "tabWidth": 4,\n "semi": true,\n "singleQuote": true\n}\n $ npm init\n"package.json"文件。 $ sudo npm i -g prettier && npm i -D prettier\n\n // Or you can execute it as two commands, like this:\n\n $ sudo npm i -g prettier\n $ npm i -D prettier\n注意： “确保您已将 Prettier 安装为 vscode 扩展。并确保您只有一个 Prettier 扩展。拥有多个扩展可能会产生问题和混乱。您应该拥有的扩展应该具有扩展 ID ：esbenp.prettier-vscode ”
main.js我们之前创建的文件编写一些 javascript，然后按F1打开快速输入，键入“格式化文档”一词，直到看到您"Format Document"要单击的选项。然后从菜单中选择更漂亮。如果您有错误的代码，Prettier 不会格式化，它需要没有错误。（如果你想修复错误，请使用像 ESLint 这样的 linter）。您可以添加一堆空行，或者将大括号放在错误的行上，省略分号，并且 prettier 应该格式化所有这些错误。
\n| 归档时间： |
|
| 查看次数： |
15115 次 |
| 最近记录： |