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

Question

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

当我打开.vue文件并按CMD+ Shift+ P 并选择“设置文档格式”时，我的文件根本没有被格式化。

我的 .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 还可以在保存时格式化您的文件。

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

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

Answer 4

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

1 - 选择默认格式化程序

1. 打开Files -> Preferences -> Settings（或Windows 中的Ctrl+ ）。,
2. 搜索Editor: Default Formatter
3. 选择您的默认格式化程序为Prettier - Code Formatter；

见下图；

2 - 保存时格式化

1. 打开Files -> Preferences -> Settings（或Windows 中的Ctrl+ ）。,
2. 搜索Editor: Format on Save
3. 单击下面的复选框Format On Save；

见下图；

Answer 5

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

Answer 6

我没有使用 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 7

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

Answer 8

在 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 9

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

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

Answer 10

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

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

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

和未经检查的打字稿

Answer 11

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

Answer 12

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

好吧，我不想提供有关如何使用VScode 的 Prettier 扩展的指南，而是解释如何依赖 ESlint 并拥有两个世界：检查代码是否正确 (ESlint)，然后对其进行格式化 (Prettier)。

这样做有什么好处呢？

• 不要强迫整个团队使用带有 Prettier 扩展的 VScode，也许有些人更喜欢 Vim、IntelliJ 的 Webstorm、Emacs 等...在我看来，与工具无关的解决方案总是更好。
• 我认为对代码进行 linting 比对其进行格式化更重要，但如果两个扩展同时工作，则格式化和 linting 之间可能会发生冲突。
• 如果您运行的扩展较少，您的硬件将会遇到更少的困难（主要是因为它可以阻止冲突）
• 使用 ESlint + Prettier 组合将消除对代码库（未跟踪）之外的特定个人配置的需要。您还将受益于 Vue/Nuxt 特定的 ESlint 规则和更简单/更通用的配置。
• ESlint 配置可以配置为在提交之前、CI/CD 中或任何地方运行。

如何实现这种设置？

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

尚未安装Vetur？

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

完成后，使用Command Palette( ctrl + shift + pWindows/Linux) 或cmd + shift + p(Mac) 访问并键入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。
该存储库还可以用于通过检查我的文件来双重检查您的配置是否正确！

然后，您可以访问任何.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 问题所示。修复应该很快就会发布，那么下面的配置就不再需要了！

要解决此问题，请运行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 13

只需右键单击代码格式未按预期工作的区域中的任意位置

并选择文档格式... 从上下文菜单中。

然后单击配置默认格式化程序...

然后单击此列表中的Prettier。

对文件进行一些更改并保存后应该可以解决问题。

Answer 14

对我来说，问题出在 HTML 文件上，格式有一天会停止工作。我配置了保存时的格式，它适用于除 HTML 之外的所有文件。

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

Answer 15

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

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

除非您想覆盖 VSCode 设置，否则不需要 .prettierrc

Answer 16

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

1. 将默认格式化程序更改为default
2. 重启vscode
3. 将默认格式化程序更改回Prettier.

Answer 17

这不是prettier-vscodePrettier 本身的问题，而是VSCode扩展。根据其文档，Vue格式默认为禁用：

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

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

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

Answer 18

1 .使用其他扩展更漂亮对我不起作用我只是使用另一个名为PrettierNow我认为这会有所帮助的VSCODE 扩展，为我完成。在此处查看扩展程序

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

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

Answer 19

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

打印

Answer 20

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

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

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

Answer 21

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

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

Answer 22

If Prettier formats all other files except HTML files automatically on save:

Press Cmd + P or Ctrl + P to open the command palette and type the following text in it:

> open settings

Preferences: Open Settings (JSON)从建议下拉菜单中单击。在settings.json文件内部，检查"[html]"密钥是否存在。如果该键存在并且其值指示使用安装在 Visual Studio Code 中的另一个格式扩展，则应将其重新设置为使用Prettier。

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

例如，有时，"[html]"key的值可能是"remimarsal.prettier-now"您安装 Prettier Now 扩展的时间。

如果您除了 Prettier 之外没有安装任何其他格式扩展，您也可以"[html]"从settings.json文件中完全删除密钥。

Answer 23

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