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

【问题标题】：为什么 Prettier 不格式化 VS Code 中的代码？
【发布时间】：2019-03-06 07:38:49
【问题描述】：

在我安装并启用了 ESlint 和 Prettier 的 Nuxt 应用程序中，我切换到了 Visual Studio Code。

当我打开一个 .vue 文件并按 CMD+ Shift + P 并选择 格式化文档，我的文件根本没有得到formatted。

我的 .prettierrc settings:

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

我有这么多的源代码行，所以我无法手动格式化它们。我做错了什么？

【问题讨论】：

似乎更漂亮的是默认将prettier.disableLanguages 设置为["vue"]
我会添加到.prettierrc 行"disableLanguages": []。 Docs 说这个改动需要重启
v1.27.2 也有 issue，注意相同的配置适用于 v.1.23
赞成 b/c 只需按 CMD+ Shift + P 然后 格式化文档，然后选择 Prettier 作为我的默认格式化程序对我有帮助：D
对我来说，即使在进行了所有配置设置更改后，它也无法正常工作。然后，我意识到我正在尝试格式化写在 HTML 文件中的代码片段 var x = "test";，而我应该将它写在 *.JS 文件中。当我将 JS 代码写入 JS 文件时，它被格式化为 var x = 'test'。

标签： javascript vue.js visual-studio-code nuxt.js prettier

【解决方案1】：

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

prettier.disableLanguages（默认：["vue"]）

要禁用此扩展的语言 ID 列表。需要重启。 注意：禁用父文件夹中启用的语言将阻止格式化，而不是让任何其他格式化程序运行

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

【讨论】：

此设置已被删除。

【解决方案2】：

有时，当代码中出现语法错误时，prettier 会停止工作。您可以点击右下角Prettier

旁边的x按钮查看错误

【讨论】：

有时 Prettier 不会显示在底部，但另一个扩展程序（例如 ESLint）会显示，如果你点击它，就会有一个下拉菜单来选择其他工具……包括 Prettier。选择它来查看 Prettier 的日志（之后 Prettier 应该会显示在托盘中）。
非常感谢！这花了我两个小时试图弄清楚无济于事，直到我看到你的答案。这么简单的事情。
你救了我的命。我忘了在我的配置文件前加一个点，所以它默认使用 VS Code 配置。
我在右下角没有看到prettier。我有"editor.defaultFormatter": "esbenp.prettier-vscode", 并安装了分机。想要 powershell 格式。

【解决方案3】：

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

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

【讨论】：

这也是我的情况。通过禁用保存时格式化将默认格式化程序设置为正确的格式化程序。

【解决方案4】：

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

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

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

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

【讨论】：

【解决方案5】：

1 .Use the other extension prettier 不适合我

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

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

【讨论】：

【解决方案6】：

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

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

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

【讨论】：

还有alt (command) + shift + f 用于格式化而不保存。
请注意，除了启用保存时格式化之外，您通常还必须指定默认格式化程序。
从顶部开始遵循每个解决方案，它在这一点上起作用了:)，非常感谢

【解决方案7】：

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

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

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

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

【讨论】：

我确实在设置中将 Prettier 配置为 std 格式化程序，但它不起作用。这行得通。让我开心！
此处相同，但我必须取消选择我的默认格式化程序，然后再次执行您提到的操作才能使其正常工作。
不确定在哪里可以找到Configure Default Formatter，但我使用了文件->设置->文本编辑器->默认格式化程序
当我选择默认格式化程序作为 Prettier 时，它会格式化该文件，但之后它无法保存。我检查了我的保存选项，但仍然。我不得不一次又一次地选择默认格式化程序。任何解决方案
@HimanshuTariyal 这应该适合你，但请随时查看我的解决方案：stackoverflow.com/a/64273353/4298115

【解决方案8】：

我将 prettier 回滚到 1.7.3 并修复它

【讨论】：

【解决方案9】：

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

Print

【讨论】：

【解决方案10】：

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

我已经设置好了

Editor: default formatter更漂亮
Editor: Format on Save 到 true
我已经有了.eslintrc.js 和.prettierrc 文件但没有任何效果。

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

Command + Shift + p
输入format document with
选择Configure Default Formatter...
默认选择Prettier。

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

【讨论】：

如果你已经有一个 ESlint 配置，你可能应该通过 ESlint 使用 Prettier。这是my answer关于如何实现这样的事情。

【解决方案11】：

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

【讨论】：

如何解决这个问题。我遇到了一个问题，Eslint 在按下回车键时要求换行并保存它会回到相同的位置并且错误再次开始出现。
如果你已经有一个 ESlint 配置，你可能应该通过 ESlint 使用 Prettier。这里是my answer关于如何实现这样的事情。

【解决方案12】：

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

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

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

循序渐进

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

【讨论】：

正确答案应该是
在正常工作几个月后，我的 vscode 随机停止使用 prettier，不知道为什么会修复它：祈祷：
@ncubica 完全相同的事情也发生在我身上，我很困惑，因为我没有采取任何措施来引发问题。花了一点挖掘，但终于找到了这个，不得不分享。很高兴它对你有用:)
我这样做了，也尝试了@miha 的解决方案，但无济于事。终于卸载/重新安装，它工作了
是的，这就是答案

【解决方案13】：

不要忘记在 VSCode 的设置中启用“editor.defaultFormatter”。在我的情况下，它是空的，因此即使是“editor.formatOnSave”似乎也没有解决问题。

【讨论】：

这对提到同一件事的其他 4 个答案有什么作用？

【解决方案14】：

我遇到了这个问题，这三个步骤解决了我的问题：

【讨论】：

谢谢，我在众多选项中找不到这个。

【解决方案15】：

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

【讨论】：

【解决方案16】：

在 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

【讨论】：

谢谢。接受的解决方案对我有用。但也许您的反馈对其他人有用。感谢您分享信息
@BillalBegueradj 是的，接受对我不起作用，我浪费了大约 1 个小时，所以发布了这个。也许这是我们在 2020 年面临的一个较新的问题。
如何在macos中添加？
@MalithKuruppu 这也适用于 macOS。您只需按 cmd+p 并选择“首选项：打开设置 (JSON)”即可访问 settings.json 文件。
这对我有用，谢谢！

【解决方案17】：

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

当我点击这个时看到了错误信息：

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

【讨论】：

【解决方案18】：

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

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

【讨论】：

【解决方案19】：

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

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

【讨论】：

【解决方案20】：

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

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

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

【讨论】：

谢谢，你拯救了我的一天。
这是我的情况！非常感谢。

【解决方案21】：

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

{
  "editor.formatOnSave": false
}

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

【讨论】：

【解决方案22】：

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

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

瞧，一切都开始工作了。

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

npx prettier --version

【讨论】：

这对我有用。我已经在全球范围内安装了prettier，但它没有用。如果我不得不猜测，那可能是 WSL 问题。

【解决方案23】：

我尝试启用“保存时格式化”并将“自动保存延迟”设置为 0。它起作用了，所以我想你也可以试试这个。

编辑：您可以通过这些步骤查看它们。

Manage(左下齿轮图标)

Settings（在管理下拉列表中）

搜索 Format On Save 并启用它（选中复选框）

向下滚动并查找Auto Save Delay 并将其设置为0

【讨论】：

【解决方案24】：

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

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

【讨论】：

【解决方案25】：

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

【讨论】：

【解决方案26】：

有一些语法是 prettier 无法解析的。 ?? 就是其中之一。去掉这个符号后，我的更漂亮就像一个魅力。你应该看看 vscode 中 Prettier 扩展的输出。这应该指出导致 prettier 正确格式化问题的行和语法。

【讨论】：

【解决方案27】：

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

【讨论】：

【解决方案28】：

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

【讨论】：

如果所有其他配置都是正确的，这就可以解决问题。
不敢相信就是这样...试图解决这个问题将近一个小时。安装了 vs 扩展，安装了 npm 包，设置了 settings.json，eslintrc 很好用，尝试切换设置，进入设置面板，一切......我很惊讶就是这样，因为我尝试“关闭它并再次开启”在所有其他方面，设置似乎立即应用......
看来我的问题是由升级我的节点版本引起的。这样做可以解决问题。
使用命令面板中的Developer: Reload Window 也对我有用。

【解决方案29】：

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

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

【讨论】：

致restart vscode 打开命令面板(Ctrl + Shift + P) 并执行命令：Reload Window，谢谢！

【解决方案30】：

如果您设置了所有可以在设置中执行的操作，则 Prettier 将无法正常工作。尝试通过此命令行安装它。 npm install --save-dev prettier

【讨论】：

尽管npx prettier --version 工作，但在此答案中运行install 命令之前，我没有得到任何自动格式化。（我用了yarn，结果是一样的。）