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

Question

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

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

我的 .prettierrc settings：

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

我有很多源代码行，我无法手动设置它们的格式。我在做什么错了？

Answer 1

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

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

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

一步一步漫步

还要确保启用了保存格式：

Answer 2

我没有使用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还不够。 我需要按照上述步骤选择默认格式化程序，这样才能正常工作。

Answer 3

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

Answer 4

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

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

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

Answer 5

对我来说-与ESlint有关，后者也与Prettier一起使用。 Eslint无法正常工作（本地安装与全局安装冲突）破坏了Prettier。

Answer 6

如果 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 之外没有安装任何其他格式扩展，您也可以从 "[html]" 文件中完全删除 settings.json 键。

Answer 7

漂亮也可以在保存时格式化文件。

但是，安装和启用无法正常工作。

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

Answer 8

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

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

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

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

Answer 9

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

Print

Answer 10

这不是Prettier本身的问题，而是prettier-vscode（VSCode扩展名）。根据{{​​3}}，Vue格式默认为禁用：

  

prettier.disableLanguages（默认：[“ vue”]）

     

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

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

Answer 11

文件路径：

C:\Users\pgmre\AppData\Roaming\Code\User\settings.json

更改 发件人：

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

收件人：

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

注意：

• 如果不存在上述内容，请添加而不是更改。
• 您应该已经安装了“ Prettier-代码格式化程序”才能看到上述更改的效果。

Answer 12

有时候，当代码中出现语法错误时，漂亮的代码会停止工作。您可以通过单击右下角更漂亮

旁边的 x 按钮来查看错误。

Answer 13

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

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

瞧，一切都开始工作了。

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

npx prettier --version

Answer 14

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

{
  "editor.formatOnSave": false
}

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

Answer 15

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

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

Answer 16

如果没有其他答案有效，请检查工作目录中是否没有冲突的漂亮配置.prettierrc或检查.prettierignore以确保文件/文件夹未被忽略。 / p>

Answer 17

我将漂亮的版本回滚到1.7.3并进行了修复

Answer 18

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

单击此错误消息时看到：

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

Answer 19

对我来说，问题出在HTML文件上，格式化一天就停止了。我配置了保存时格式化，该格式适用于HTML以外的所有文件。

然后我意识到我实验性地将保存模式格式化设置为modification而不是file并忘记了。这具有不格式化HTML文件中任何内容的效果，令人惊讶的是，甚至没有我的更改。将其重新设置为file解决了该问题。

Answer 20

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

Answer 21

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

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

C：\ Users \您的用户名\ .vscode \ extensions \ esbenp.prettier-vscode-2.2.2 \ out

如果缺少卸载，请重新安装更漂亮的

Answer 22

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

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

<块引用>

1. Manage（左下角的齿轮图标）

<块引用>

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

<块引用>

3. 搜索 Format On Save 并启用它（选中该框）

<块引用>

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

Answer 23

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

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

Answer 24

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

Answer 25

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

Answer 26

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

Answer 27

不要忘记在VSCode的设置中启用“ editor.defaultFormatter”。在我的情况下，它为null，因此甚至“ editor.formatOnSave”似乎也无法解决问题。

Answer 28

您可以尝试将此部分添加到用户设置文件吗？

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