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

IT技术 javascript vue.js visual-studio-code nuxt.js prettier
2021-02-12 04:43:46

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

当我打开一个.vue文件并按CMD+ Shift+P 并选择Format Document 时，我的文件根本没有被格式化。

我的 .prettierrc 设置：

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

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

6个回答

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

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

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

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

当我选择默认格式化程序作为 Prettier 时，它会格式化该文件，但之后它在保存时不起作用。我检查了我的保存选项，但仍然如此。我不得不一次又一次地选择默认的格式化程序。任何解决方案
2021-03-22 04:43:46
@HimanshuTariyal 这应该适合你，但请随时查看我的解决方案：stackoverflow.com/a/64273353/4298115
2021-03-27 04:43:46
在这里相同，但我必须取消选择我的默认格式化程序，然后再次执行您提到的操作才能使其正常工作。
2021-03-31 04:43:46
我确实在设置中将 Prettier 配置为 std 格式化程序，但它不起作用。这奏效了。让我的一天！
2021-04-06 04:43:46
不确定在哪里可以找到，Configure Default Formatter但我使用了 File->Settings->Text Editor->Default Formatter
2021-04-06 04:43:46

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

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

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

分步演练

启用默认格式化程序的步骤

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

保存检查时的格式

在正常工作数月后，我的 vscode 随机停止与更漂亮的工作，不知道为什么会修复它：祈祷：
2021-03-15 04:43:46
厉害了哥……！
2021-03-22 04:43:46
现场应该是答案
2021-03-25 04:43:46
我这样做了，也尝试了@miha 的解决方案，但无济于事。最后卸载/重新安装，它工作
2021-03-25 04:43:46
救命稻草！！💯
2021-03-26 04:43:46

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

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

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

在此处输入图片说明

也alt (command) + shift + f用于格式化而不保存。
2021-03-27 04:43:46
遵循顶部的每个解决方案，它在这一点上起作用:)，非常感谢
2021-04-08 04:43:46
请注意，除了启用 Format On Save 之外，您还经常需要指定默认格式化程序。
2021-04-09 04:43:46

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

在此处输入图片说明

太感谢了！这花了我两个小时的时间试图找出无济于事，直到我看到你的答案。这么简单的事情。
2021-03-25 04:43:46
我prettier在右下角看不到。我已经"editor.defaultFormatter": "esbenp.prettier-vscode",安装并安装了 ext。想要powershell格式。
2021-03-28 04:43:46
有时 Prettier 不会显示在底部，但另一个扩展程序（例如 ESLint）会显示，如果您单击它，则会出现一个下拉菜单以选择其他工具......包括 Prettier。选择它以查看 Prettier 的日志（然后 Prettier 应显示在托盘中）。
2021-04-07 04:43:46
你救了我的命。我忘了在我的配置文件前加一个点，所以它默认使用 VS Code 配置。
2021-04-13 04:43:46

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

如果所有其他配置都正确，这将起作用。
2021-03-17 04:43:46
使用Developer: Reload Window从我工作过的命令调色板。
2021-03-24 04:43:46
看起来我的问题是由升级我的节点版本引起的。这样做解决了问题。
2021-03-27 04:43:46
简直不敢相信就是这样......试图解决这个问题将近一个小时。安装了 vs 扩展，安装了 npm 包，settings.json 设置，eslintrc 很好，尝试切换设置，进入设置面板，一切......我很惊讶就是这样，因为我尝试“关闭它并再次打开”在所有其他方面，设置似乎立即应用......
2021-04-04 04:43:46
其它你可能感兴趣的问题
上一篇AngularJs 未加载外部资源 下一篇React JSX：在选定的 <select> 选项上选择“selected”