在 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 應該格式化所有這些錯誤。

---