為什么 Prettier 不在 VS Code 中格式化代碼？

Question

在安裝並啟用了 ESlint 和 Prettier 的 Nuxt 應用程序中，我切換到了 Visual Studio Code。

當我打開一個.vue文件並按CMD + Shift + P並選擇Format Document時，我的文件根本沒有格式化。

我的.prettierrc設置：

{
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

我有太多的源代碼行，所以我無法手動格式化它們。 我究竟做錯了什么？

Answer 1

在對 Prettier 停止在 VSCode 中工作感到非常沮喪之后，我是如何對其進行排序的。

1. 選擇VS Code -> View -> Command Palette ，然后輸入： Format Document With
2. 然后Configure Default Formatter...然后選擇Prettier - Code formatter 。

這神奇地為我解決了問題。

根據您的情況，這可能會幫助您...

Answer 2

如果執行@Simin Maleki 提到的操作並不能為您解決問題，則有可能未設置您的默認格式化程序：

File > Preferences > Settings > Search for "default formatter" 

確保您的Editor: Default Formatter字段不為null ，而是esbenp.prettier-vscode並且勾選以下所有語言。 這解決了我的問題。

逐步演練

還要確保您的保存格式已啟用：

Answer 3

有時，當代碼中存在語法錯誤時，prettier 會停止工作。 您可以通過單擊Prettier旁邊右下角的x按鈕來查看錯誤

Answer 4

Prettier 還可以在保存時格式化您的文件。

但是，安裝和啟用不會導致工作。

您必須在 VSCode 中檢查“保存時的格式”：設置 >> 用戶 >> 文本編輯器 >> 格式化

Answer 5

在安裝 prettier 后，您只需配置默認格式化程序並選中設置中保存時格式化的復選框即可。 不要亂用其他配置文件。

1 - 選擇默認格式化程序

1. 打開Files -> Preferences -> Settings （或Ctrl + , 在 Windows 中）。
2. 搜索Editor: Default Formatter程序
3. 選擇您的默認格式化程序Prettier - Code Formatter ；

見下圖；

2 - 保存格式

1. 打開Files -> Preferences -> Settings （或Ctrl + , 在 Windows 中）。
2. 搜索Editor: Format on Save
3. 單擊Format On Save下的復選框；

見下圖；

Answer 6

禁用和啟用prettier的擴展解決了我的問題

Answer 7

我沒有使用Vue，但遇到了同樣的問題。

我已經有設置

• Editor: default formatter更漂亮
• 編輯器：保存為true時的Editor: Format on Save
• 我已經有.eslintrc.js和.prettierrc文件但沒有任何效果。

我的問題的解決方案是我已經正確設置，除了我需要：

• Command + Shift + p
• 鍵入format document with
• 選擇Configure Default Formatter...
• 選擇Prettier作為默認值。

我不知道為什么Editor: Format on Save設置為true是不夠的。 我需要使用上述步驟選擇默認格式化程序，以便它工作。

Answer 8

您可以嘗試將此部分添加到您的 VS Code settings.json 文件中嗎？

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

Answer 9

我遇到了這個問題，這三個步驟解決了我的問題：

Answer 10

在 Windows 上：

我們可以使用以下文件打開：

Start > Run 

文件路徑：

%AppData%\Code\User\settings.json

更改自：

"[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
},

至：

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},

筆記：

• 如果以上不存在，請添加而不是更改。
• 您應該已經安裝了“Prettier - 代碼格式化程序”以查看上述更改的效果 - https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Answer 11

盡管有所有這些設置，您仍然可能遇到問題。 在這種情況下，正如之前的回答中所指出的那樣，最好在 VSCode 的底部狀態欄中檢查更漂亮的通知。

單擊該狀態時，輸出面板應在 HTML 文件中報告該問題。 對我來說，問題是我在 ap 標簽中有一個 div，我認為更漂亮/VSCode 約定是反對的。 當我刪除它（並結合上面的所有設置，即默認格式化程序和保存格式）時，我得到了更漂亮的工作。

.prettierrc 不是必需的，除非你想覆蓋 VSCode 設置

Answer 12

這不是 Prettier 本身的問題，而是 VSCode 擴展 prettier prettier-vscode的問題。 根據其文檔，默認情況下禁用 Vue 格式化：

prettier.disableLanguages (默認: ["vue"])

禁用此擴展的語言 ID 列表。 需要重啟。 注意：禁用父文件夾中啟用的語言將阻止格式化，而不是讓任何其他格式化程序運行

在這種情況下，要啟用您應該設置"prettier.disableLanguages": [] 。 由於這是一個擴展配置，你應該在 VSCode 設置文件中進行，而不是.prettierrc 。

Answer 13

對我來說，問題在於 HTML 文件的格式在某一天停止工作。 我配置了Format On Save ，它適用於除 HTML 之外的所有文件。

然后我意識到我實驗性地將Format On Save Mode設置為modification而不是file並忘記了它。 這產生了沒有格式化 HTML 文件中的任何內容的效果，令人驚訝的是，甚至我的更改也沒有。 將其設置回file解決了這個問題。

Answer 14

1 .Use the other extension prettier was not working for me 我只是使用另一個名為PrettierNow的 VSCODE 擴展現在我認為這會有所幫助，為我完成。 在此處查看擴展程序

2 .從prettier 的最新更新中，如果您想堅持使用prettier，您需要在項目的根目錄中添加.prettierrc文件。 .prettierrc的一個例子是 -

{
  "tabWidth": 4,
  "singleQuote": true,
  "semi": false
}

Answer 15

就我而言，它被打字稿格式化程序劫持了。

它讓我發瘋，因為它不斷重新格式化我的空間！

修復我做了cmd+. （設置）類型->“默認格式化程序”

和未經檢查的打字稿

Answer 16

在 VSCode 中啟用“保存時格式化”：設置 >> 用戶 >> 文本編輯器 >> 格式化對我有用！ 🙌

打印

Answer 17

如果 Prettier 在保存時自動格式化除 HTML 文件之外的所有其他文件：

按Cmd + P或Ctrl + P打開命令面板並在其中鍵入以下文本：

> open settings

從建議下拉菜單中單擊Preferences: Open Settings (JSON) 。 在settings.json文件中，檢查"[html]"鍵是否存在。 如果該鍵存在並且其值指示使用 Visual Studio Code 中安裝的另一個格式化擴展，則應將其重置為使用Prettier 。

"[html]": {
    "esbenp.prettier-vscode"
}

例如，有時，當您安裝 Prettier Now 擴展時， "[html]"鍵的值可能是"remimarsal.prettier-now" 。

如果您沒有安裝 Prettier 以外的任何其他格式擴展，您也可以從settings.json文件中完全刪除"[html]"鍵。

Answer 18

這對我有用（我的默認格式化程序已經設置為 Prettier）

1. 將默認格式化程序更改為default
2. 重啟vscode
3. 將默認格式化程序改回Prettier 。

Answer 19

轉到管理（位於左下角）->設置->用戶選項卡->文本編輯器->格式->檢查保存時的格式

如果不起作用，請關閉並再次打開您的 vscode 編輯器

Answer 20

對我來說 - 它與 ESlint 相關，它也適用於 Prettier。 Eslint 無法正常工作（本地安裝與全局安裝沖突），這破壞了 Prettier。

Answer 21

最近我遇到了同樣的問題，Prettier 在保存時不會自動格式化代碼。 檢查 Prettier，我看到一個錯誤：無效的"arrowParens"值。 預期“總是”或“避免”，但收到true 。

當我單擊此錯誤消息時看到：

原來我也安裝了 Prettier Now。 這在我的配置文件中有一個布爾值。 卸載 Prettier Now 后，一切正常。

Answer 22

有時使用自動插件更新 Prettier 使用的必需文件可能會丟失。

如果此處存在文件或文件夾為空，請檢查此路徑

C:\Users\YOURUSERNAME\.vscode\extensions\esbenp.prettier-vscode-2.2.2\out

如果缺少卸載並重新安裝更漂亮

Answer 23

如果其他答案都不起作用，請檢查您的工作目錄中是否不存在沖突的更漂亮的配置.prettierrc或檢查.prettierignore以確保文件/文件夾沒有被忽略。

Answer 24

檢查您的項目目錄（工作區）中是否有 .vscode/settings.json 文件。 就我而言，有人簽入了此文件：

{
  "editor.formatOnSave": false
}

解決方案：刪除文件（也從源代碼管理中刪除）並將.vscode/添加到 .gitignore （如果您使用的是 git）。

Answer 25

在某些情況下，prettier 作為依賴項提供，您可能需要在 prettier vscode 使用以下命令之一識別它之前安裝它，具體取決於您使用的包管理器
npm i或yarn

Answer 26

就我而言，事實證明我已經將 prettier 配置為使用不存在的配置文件（見下面的截圖）。 這很難找到，因為沒有任何錯誤消息，但更漂亮只是沒有用。 也許這對某人也有幫助。

Answer 27

我將更漂亮的回滾到 1.7.3 並修復它

Answer 28

就我而言，我必須執行以下操作：

1. 從命令行安裝 prettier ( npm install --save-dev --save-exact prettier prettier-plugin-custom )
2. 重新加載 VSCode

瞧，一切都開始工作了。

提示：為確保安裝良好，我檢查了版本：

npx prettier --version

Answer 29

檢查 .prettierrc 中的 requirePragma，它說您需要為要格式化的文件添加頂級注釋

刪除該規則，它應該可以工作

Answer 30

如何通過 VScode 的 ESlint 插件格式化你的代碼

好吧，與其給出如何使用VScode 的 Prettier 擴展的指南，我更願意解釋如何依賴 ESlint 並擁有兩個世界：檢查你的代碼是否正確（ESlint），然后格式化它（Pr​​ettier）。

這樣做有什么好處？

• 不要強迫你的整個團隊使用帶有 Prettier 擴展的 VScode，也許有些人更喜歡 Vim、IntelliJ 的 Webstorm、Emacs 等......與工具無關的解決方案總是 IMO 更好。
• 我認為 linting 你的代碼比格式化更重要，但是如果你有兩個擴展同時工作，你可能會在格式化和 linting 之間發生沖突。
• 如果您運行的擴展更少（主要是因為它可以阻止沖突），您的硬件將更少掙扎
• 使用 ESlint + Prettier 組合將無需在代碼庫之外進行特定的個人配置（未跟蹤）。 您還將受益於擁有 Vue/Nuxt 特定的 ESlint 規則和更簡單/更通用的配置。
• 可以將 ESlint 配置配置為在提交之前、在 CI/CD 或任何地方運行。

如何實現這種設置？

讓我們首先安裝ESlint 擴展，並且只安裝它，不要安裝 Prettier 的。

還沒有安裝Vetur ？

我強烈推薦它用於 Vue2 應用程序（目前 Nuxt 正在運行），你可以在下面找到它。 它將允許快速簡單地 ESlint (+ Prettier) 任何.vue文件。

---

完成后，使用ctrl + shift + p (Windows/Linux) 或cmd + shift + p (Mac) 訪問Command Palette並輸入Preferences: Open Default Settings (JSON)

在那里，你應該有這樣的東西

{
  "workbench.colorTheme": "Solarized Dark", // example of some of your own configuration

  "editor.codeActionsOnSave": {
    "source.fixAll": true,
  },
  "eslint.options": {
    "extensions": [
      ".html",
      ".js",
      ".vue",
      ".jsx",
    ]
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
  ],
}

如何嘗試您的配置現在可以正常工作？

要查看我的解決方案是否有效，請下載此Github 存儲庫，獲取最新的穩定 Node 版本（例如：14）並運行yarn以使其正常工作。 否則，只需打開 VScode。
這個 repo 也可以用來通過檢查我的文件來仔細檢查你的配置是否正確！

然后，您可以訪問任何.js或.vue文件並查看那里的問題（命令面板： Problems: Focus on Problems View ）。 nuxt.config.js和/pages/index.vue是很好的例子，這里是index.vue文件。

你可以看到我們確實有一些可以被 Prettier 修復的東西，但是我們也有一個eslint(vue/require-v-for-key)錯誤。 順便說一句，該解決方案可作為評論提供。

PS：如果你想像截圖一樣有內聯的 ESlint 警告/錯誤，你可以安裝Error Lens ，如果你想擺脫錯誤，這是一個超級棒的擴展。

保存此文件，您應該會看到所有可自動修復的事情都已為您完成。 通常它主要是 Prettier 問題，但有時也可能是 ESlint。 由於我們確實擁有 Nuxt 的 ESlint 規則，因此您也將獲得一些開箱即用的良好實踐！

塔達，它的工作！ 如果不是，請閱讀我答案末尾的部分。

如果你想創建一個全新的項目

您可以運行npx create-nuxt-app my-super-awesome-project並在那里選擇一些東西，最重要的是Linting tools: Eslint + Prettier （點擊空格以選擇其中之一）。

警告：從今天開始，還有一個額外的步驟可以讓 ESlint + Prettier 正常工作，如Github issue所示。 修復應該很快就會發布，那么下面的配置就不再需要了！

要解決此問題，請運行yarn add -D eslint-plugin-prettier並仔細檢查您的.eslintrc.js文件是否如下

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false
  },
  extends: [
    '@nuxtjs',
    'plugin:prettier/recommended', // this line was updated
    'prettier'
  ],
  plugins: [
  ],
  // add your custom rules here
  rules: {}
}

然后，你可以讓它像上面一樣工作得很好。 保存文件，它應該一個接一個地運行 ESlint 然后 Prettier！

---

如果你還有一些問題

• 嘗試再次使用Command Palette和ESLINT: restart ESLint Server甚至Developer: Reload Window
• 如果您需要幫助，請隨時發表評論或與我聯系

Answer 31

從菜單中瀏覽： view -> Command Palette在命令面板中搜索Format Document ，然后選擇 Prettier 作為您的格式引擎。

我已經在另一個項目上工作了，但是對於新項目，我必須通過這種方式再次為新項目啟用它。

Answer 32

檢查您的package.json文件是否有prettier屬性，因為這將優先。

{
  "name": "example",
  "scripts": { ... },

  "prettier": {},

  "dependencies": { ... },
  "devDependencies": { ... },
}

刪除此屬性，將使用.prettierrc文件。

優先順序在prettier docs中說明。

Answer 33

不要忘記在 VSCode 的設置中啟用“editor.defaultFormatter”。 在我的情況下，它是空的，因此即使是“editor.formatOnSave”似乎也沒有解決這個問題。

Answer 34

我嘗試啟用“保存時格式化”並將“自動保存延遲”設置為 0。它起作用了，所以我想你也可以試試這個。

編輯：您可以通過這些步驟查看它們。

1. Manage （左下角的齒輪圖標）

2. Settings （在管理下拉列表中）

3. 搜索Format On Save並啟用它（選中該框）

4. 向下滾動並查找Auto Save Delay並將其設置為0

Answer 35

有一些語法是 prettier 無法解析的。 ?? 是其中之一。 去掉這個符號后，我的更漂亮的工作就像一個魅力。 你應該看看 vscode 中 Prettier 擴展的輸出。 這應該指出導致 prettier 正確格式化問題的行和語法。

Answer 36

如果您已經設置了所有可以在設置中執行的操作，那么 Prettier 將無法正常工作。 嘗試通過此命令行安裝它。 npm install --save-dev prettier

Answer 37

這是我處理 vue.js 文件、打字稿文件和 json 文件的更漂亮的配置。

arrowParens: 'always'
bracketSpacing: true
endOfLine: 'crlf'
htmlWhitespaceSensitivity: 'css'
insertPragma: false
jsxBracketSameLine: false
jsxSingleQuote: true
overrides:
- files: '*.json'
  options:
    semi: true
    parser: 'json'
parser: 'babel'
printWidth: 120
proseWrap: 'preserve'
quoteProps: 'truepreserve'
requirePragma: false
semi: false
singleQuote: true
tabWidth: 8
trailingComma: 'es5'
useTabs: true
vueIndentScriptAndStyle: 

不要忘記更新你的 vscode 設置

{
"extensions.ignoreRecommendations": false,
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
    "editor.defaultFormatter": "octref.vetur"
},
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
},
"vetur.format.options.useTabs": true}

這都是民間的！

Answer 38

對於我的情況，我使用的是 Windows 機器，結果發現文件系統已損壞，因此 prettier 引發了一個錯誤，因為由於文件系統損壞，它無法打開配置文件。

為了解決它，我在終端上運行chkdsk /fh: ，其中 h 是文件分區。

這解決了文件損壞和 prettier 現在工作正常。

Answer 39

對我來說，幫助在 VS Code 設置中禁用了這個選項（然后更漂亮地使用默認配置）：

更漂亮：需要配置

Answer 40

我在 WSL 中工作（也適用於僅在自定義工作區中遇到問題的人）並且我嘗試了所有可能的修復方法，直到我在 vscode 設置上找到此選項卡：

Select 關於您的問題的選項卡並再次更改您想要的所有設置並將設置“文件：自動保存”更改為“onFocusChange”或“onWindowChange”。

Answer 41

當我從 Ubuntu 移動到 Windows 10 時，我遇到了同樣的問題。

問題在於快捷方式“ctrl + shirt + i”，它在 Ubuntu 上是默認的，但在 Win10 中不是。

Go 到文件 -> 首選項 -> 鍵盤快捷鍵。

然后寫prettier，找到'Format Document (Forced)'。 單擊左側的鉛筆並編寫鍵盤快捷方式，然后按 Enter。

如果不可能因為已經有命令寫入該快捷方式，請找到它並將其更改為其他內容。 那么這將是可能的。

Answer 42

重新啟動 VSCode 也可以工作

Answer 43

我唯一需要做的就是用一個簡單的更新我的包

npm install

我在這里嘗試了一切，但仍然無法正常工作。 就好像它不存在一樣。 Prettier 也被添加為項目中的依賴項。 事實證明，其他人添加或更新了任何導致我的 prettier 停止工作的包。

希望它可以避免它給我帶來的頭痛。

Answer 44

對我來說，當我擺脫解析器時它起作用了：.pretterrc 文件中的 json。

Answer 45

我嘗試了這個線程中的每一個解決方案，我才意識到我唯一的問題是我的Visual Studio 顏色主題。 就這么簡單！

之前：

之后：