为什么 Prettier 不格式化 VS Code 中的代码？

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

选择 VS Code -> View -> Command Palette，然后输入：Format Document With Then Configure Default Formatter... 然后选择 Prettier - Code formatter。

这神奇地为我解决了问题。

根据您的情况，这可能会帮助您...

---

如果执行@Simin Maleki 提到的操作并不能为您解决问题，则有可能未设置您的默认格式化程序：

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

确保您的 Editor: Default Formatter 字段不是 null 而是 esbenp.prettier-vscode，并且勾选了以下所有语言。这解决了我的问题。

逐步演练

https://i.stack.imgur.com/DINkP.png

还要确保您的保存格式已启用：

https://i.stack.imgur.com/xBmiH.png

---

有时，当代码中存在语法错误时，prettier 会停止工作。您可以通过单击 Prettier 旁边右下角的 x 按钮来查看错误

https://i.stack.imgur.com/Zd03Y.png

---

Prettier 还可以在保存时格式化您的文件。

但是，安装和启用不会导致工作。

您必须在 VSCode 中检查“保存时的格式”：设置 >> 用户 >> 文本编辑器 >> 格式化

https://i.stack.imgur.com/unii7.png

---

在安装 prettier 后，您只需配置默认格式化程序并选中设置中保存时格式化的复选框即可。不要乱用其他配置文件。

1 - 选择默认格式化程序

打开文件 -> 首选项 -> 设置（或 Ctrl + , 在 Windows 中）。搜索编辑器：默认格式化程序 选择您的默认格式化程序为 Prettier - Code Formatter；

见下图；

https://i.stack.imgur.com/gsqh8.png

2 - 保存格式

打开文件 -> 首选项 -> 设置（或 Ctrl + , 在 Windows 中）。搜索编辑器：保存时格式化 单击保存时格式化下的复选框；

见下图；

https://i.stack.imgur.com/7jMCf.png

---

禁用和启用 prettier 扩展解决了我的问题

---

我没有使用Vue，但遇到了同样的问题。

我已经有设置

编辑器：默认格式化程序更漂亮

编辑器：保存为真时的格式

我已经有 .eslintrc.js 和 .prettierrc 文件但没有任何效果。

我的问题的解决方案是我已经正确设置，除了我需要：

命令 + Shift + p

键入格式文档

选择配置默认格式化程序...

选择 Prettier 作为默认值。

我不知道为什么将 Editor: Format on Save 设置为 true 还不够。我需要使用上述步骤选择默认格式化程序，以便它工作。

https://i.stack.imgur.com/6uamN.png

---

您可以尝试将此部分添加到您的 VS Code settings.json 文件中吗？

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

---

https://i.stack.imgur.com/3Euic.png

---

尽管有所有这些设置，您仍然可能遇到问题。在这种情况下，正如之前的回答中所指出的那样，最好在 VSCode 的底部状态栏中检查更漂亮的通知。

https://i.stack.imgur.com/S5buS.png

单击该状态时，输出面板应在 HTML 文件中报告该问题。对我来说，问题是我在 ap 标签中有一个 div，我认为更漂亮/VSCode 约定是反对的。当我删除它（并结合上面的所有设置，即默认格式化程序和保存格式）时，我的工作变得更漂亮了。

.prettierrc 不是必需的，除非你想覆盖 VSCode 设置

---

在 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

---

这不是 Prettier 本身的问题，而是 VSCode 扩展的 prettier-vscode。根据 its documentation，Vue 格式化默认是禁用的：

prettier.disableLanguages (default: ["vue"]) 禁用此扩展的语言 ID 列表。需要重启。注意：禁用父文件夹中启用的语言将阻止格式化，而不是让任何其他格式化程序运行

在这种情况下，要启用您应该设置 "prettier.disableLanguages": []。由于这是一个扩展配置，你应该在 VSCode 设置文件中进行，而不是 .prettierrc。

---

对我来说，问题在于 HTML 文件的格式在某一天停止工作。我配置了 Format On Save ，它适用于除 HTML 之外的所有文件。

然后我意识到我实验性地将 Format On Save Mode 设置为 modification 而不是 file 并忘记了它。这产生了没有格式化 HTML 文件中的任何内容的效果，令人惊讶的是，甚至我的更改也没有。将其设置回 file 解决了该问题。

https://i.stack.imgur.com/NZ1dI.png

---

1 . 使用另一个更漂亮的扩展对我不起作用我只是使用另一个名为 PrettierNow 的 VSCODE 扩展，我认为这对我有帮助。Checkout the extension here

2 .从prettier的最新更新中，如果您想坚持使用prettier，您需要在项目的根目录中添加.prettierrc文件。 .prettierrc 的一个例子是 -

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

---

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

它让我发疯，因为它不断重新格式化我的空间！

修复我做了cmd+.（设置）类型-> “默认格式化程序”

和未经检查的打字稿

https://i.stack.imgur.com/224tE.png

---

在 VSCode 中启用“保存时格式化”：设置 >> 用户 >> 文本编辑器 >> 格式化对我有用！ 🙌

Print

---

如果 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]" 键。

---

这对我有用（我的默认格式化程序已经设置为 Prettier）

将默认格式化程序更改为默认重新启动 vscode 将默认格式化程序更改回 Prettier。

---

转到管理（位于左下角） -> 设置 -> 用户选项卡 -> 文本编辑器 -> 格式 -> 检查保存时的格式

如果不起作用，请关闭并再次打开您的 vscode 编辑器

---

对我来说 - 它与 ESlint 相关，它也适用于 Prettier。 Eslint 无法正常工作（本地安装与全局安装冲突），这破坏了 Prettier。

---

最近我遇到了同样的问题，Prettier 在保存时不会自动格式化代码。检查 Prettier，我看到一个错误：无效的 "arrowParens" 值。应为“总是”或“避免”，但收到 true。

https://i.stack.imgur.com/FeRfA.png

原来我也安装了 Prettier Now。这在我的配置文件中有一个布尔值。卸载 Prettier Now 后，一切正常。

---

有时使用自动插件更新 Prettier 使用的必需文件可能会丢失。

如果此处存在文件或文件夹为空，请检查此路径

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

如果缺少卸载并重新安装更漂亮

---

如果其他答案都不起作用，请检查您的工作目录中是否不存在冲突的更漂亮的配置 .prettierrc 或检查 .prettierignore 以确保文件/文件夹没有被忽略。

---

检查您的项目目录（工作区）中是否有 .vscode/settings.json 文件。就我而言，有人签入了此文件：

{
  "editor.formatOnSave": false
}

解决方案：删除文件（也从源代码管理中删除）并将 .vscode/添加到 .gitignore（如果您使用的是git）。

---

在某些情况下，prettier 作为依赖项提供，您可能需要在 prettier vscode 使用以下命令之一识别它之前安装它，具体取决于您使用的包管理器
npm i 或 yarn

---

就我而言，事实证明我已经将 prettier 配置为使用不存在的配置文件（见下面的截图）。这很难找到，因为没有任何错误消息，但更漂亮只是没有用。也许这对某人也有帮助。

https://i.stack.imgur.com/haoOQ.png

---

我将更漂亮的回滚到 1.7.3 并修复它

---

就我而言，我必须执行以下操作：

从命令行安装 prettier (npm install --save-dev --save-exact prettier prettier-plugin-custom) 重新加载 VSCode

瞧，一切都开始工作了。

提示：为确保安装良好，我检查了版本：

npx prettier --version

---

检查 .prettierrc 中的 requirePragma，它说您需要为要格式化的文件添加顶级注释

删除该规则，它应该可以工作

---

如何通过 VScode 的 ESlint 插件格式化你的代码

好吧，与其给出如何使用 VScode's Prettier extension 的指南，我更愿意解释如何依赖 ESlint 并拥有两全其美：检查您的代码是否正确（ESlint），然后对其进行格式化（Prettier）。

这样做有什么好处？

不要强迫你的整个团队使用带有 Prettier 扩展的 VScode，也许有些人更喜欢 Vim、IntelliJ 的 Webstorm、Emacs 等......与工具无关的解决方案总是 IMO 更好。

我认为 linting 你的代码比格式化更重要，但是如果你有两个扩展同时工作，你可能会在格式化和 linting 之间发生冲突。

如果您运行的扩展更少（主要是因为它可以阻止冲突），您的硬件将更少挣扎

使用 ESlint + Prettier 组合将无需在代码库之外进行特定的个人配置（未跟踪）。您还将受益于拥有 Vue/Nuxt 特定的 ESlint 规则和更简单/更通用的配置。

可以将 ESlint 配置配置为在提交之前、在 CI/CD 或任何地方运行。

如何实现这种设置？

让我们首先安装 ESlint extension，并且只安装它，不要安装 Prettier 的。

https://i.stack.imgur.com/0F3N6.png

还没有安装 Vetur？

我强烈推荐它用于 Vue2 应用程序（目前 Nuxt 正在运行），你可以在下面找到它。它将允许快速简单地 ESlint (+ Prettier) 任何 .vue 文件。

完成后，使用 ctrl + shift + p (Windows/Linux) 或 cmd + shift + p (Mac) 访问 Command Palette 并输入 Preferences: Open Default Settings (JSON)

https://i.stack.imgur.com/TP7oY.png

在那里，你应该有这样的东西

{
  "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 repo，获取最新的稳定 Node 版本（例如：14）并运行 yarn 以使其正常工作。否则，只需打开 VScode。
这个 repo 也可以用来通过检查我的文件来仔细检查你的配置是否正确！

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

https://i.stack.imgur.com/2oDyc.png

您可以看到，我们确实有一些可以由 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（点击空格以选择其中之一）。

https://i.stack.imgur.com/r5Qtc.png

警告：从今天开始，还有一个额外的步骤可以让 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！

如果你还有一些问题

尝试再次使用命令面板和 ESLINT: restart ESLint Server 甚至 Developer: Reload Window

如果您需要帮助，请随时发表评论或与我联系

---