VS-Code Prettier Format On Save 不起作用

Posted 2023-02-22

【中文标题】VS-Code Prettier Format On Save 不起作用

【英文标题】：VS-Code Prettier Format On Save doesn't work

【发布时间】：2020-04-13 10:36:06

【问题描述】：

大约一个月以来，我的 Prettier 扩展程序已停止正常工作。最值得注意的是 - 保存格式不起作用。其他说明：

输入; 的格式有效

我在 Prettier 按钮旁边的状态栏中看到此错误类型符号 - 我在 Google 上找不到与 Prettier 有关的任何参考：

]

我在设置中检查了我的保存格式：

'Format Document,Format SelectionandFormat Document with`命令调色板选项什么都不做

休息时间恰逢从 Prettier 2-3 开始

我已按照迁移步骤进行操作，并认为一切正常。我拥有的 eslint 和 prettier 之间的一些配置的 sn-ps：

根据the prettier documentation，我的 VS Code 设置有：

"eslint.autoFixOnSave": true, // (even though VSCode has this as deprecated), have tried with and without this line
"editor.codeActionsOnSave": 
  "source.organizeImports": true,
  "source.fixAll.eslint": true
,

我的开发依赖项包括：

    "eslint-config-prettier": "^6.5.0",
    "eslint-plugin-prettier": "^3.1.2",
    "prettier-eslint": "^9.0.0",

我有一个 prettier.config.js 文件 我的 .eslintrc.js 文件包括：

extends: ['airbnb', 'prettier'],
plugins: ['react', 'jsx-a11y', 'import', 'react-hooks', 'plugin:prettier/recommended'],

有人知道如何解决此问题或在此处进行进一步的调试测试吗？快把我逼疯了！

【问题讨论】：

建议：1) 查看自述文件here。尤其是关于“2.x 和 3.x 之间的重大变化）的部分。卸载并重新安装。3）确保安装最新/最好的版本。4）发回你发现的内容。

已卸载并重新安装了最新版本。从 2 到 3 的时间迁移似乎对我来说是正确的，所以这似乎与此有关。我已经用所采取的相关迁移步骤更新了我的 qn。感谢您的帮助！

听起来其他人也遇到了同样的问题：github.com/prettier/prettier-vscode/issues/1156

【参考方案1】：

尝试通过按 CTRL + SHIFT + P 手动使您的代码更漂亮 >>> 格式化文档。如果您的文件正在被格式化而没有任何问题，则意味着问题在于 formatOnSave 设置。或许，您可以尝试从那里进行进一步的调试。

【讨论】：

这是对我有用的解决方案。当我按照这些说明进行操作时，VS Code 会询问我想使用哪种格式化程序来格式化文档，即使已经在 settings.json 文件中设置了更漂亮。我要补充一点，如果这不起作用，请尝试从命令行运行 prettier 命令以查看是否安装了二进制文件等。

【参考方案2】：

配置已更改，您需要将其添加到您的 vs-code 设置中：

根据文档：“您可以为 ESLint、TSLint 或 Stylelint 启用 Auto-Fix on Save 并且仍然具有格式化和快速修复”

"editor.codeActionsOnSave": 
  // For ESLint
  "source.fixAll.eslint": true,
  // For TSLint
  "source.fixAll.tslint": true,
  // For Stylelint
  "source.fixAll.stylelint": true

【讨论】：

或"source.fixAll": trueto fix all generic linting。我用的是 1.56.2 版本的 VSCode。

【参考方案3】：

按照以下步骤操作：

CTRL + SHIFT + P 格式化文档（在弹出栏中） 选择Format Document 选择Configure Default Formatter... 选择Prettier - Code formatter

完成！

【讨论】：

我注意到在 VS 代码更新后 prettier 无法正常工作。我不知道它是否与问题有关，但如果是，那么问题可能会在以后的更新中再次出现，并且此解决方案可能会再次适用于这些情况。

干杯伙伴。这似乎可以自行解决（我尝试了一百万种方法，但不确定其中哪一种有效）。我确实更好地理解了它，并且可以看到您的流程背后的逻辑。对我来说，配置已经设置为 Prettier，但仍然无法正常工作（您可以看到 Prettier 已经配置，我认为是通过第一个屏幕截图右下角的 Prettier 按钮。

还有！如果有任何语法错误，或者脚本中某处未关闭注释，则保存格式或 Prettier 将不起作用。祝你好运，黑客愉快:)

对 VSCode 版本仍有帮助：1.55.0！

不幸的是，这对我不起作用 - 已经将 Prettier 设置为默认格式化程序，并且打开了保存时格式化。

【参考方案4】：

在VSCode设置中，搜索“Editor: Default Formatter”并设置为esbenp.prettier-vscode

【讨论】：

这应该是最佳答案。效果很好。

谢谢，这正是我所缺少的。

【参考方案5】：

对我来说，使用 prettier+(svipas.prettier-plus) -- 因为默认的 prettier 插件不好 -- 只能更改：

"editor.formatOnSaveMode": "modifications",

到

"editor.formatOnSaveMode": "file",

解决了我的问题。

【参考方案6】：

因为formatonSave 已经是checked 而defaultFormatter 更漂亮...当我切换到settings.json 时，就像！！

"[javascript]": "editor.formatOnSave": false , "eslint.autoFixOnSave": true, "prettier.disableLanguages": [ "js" ],

改成之后

"[javascript]": "editor.formatOnSave": true , "eslint.autoFixOnSave": true, "prettier.disableLanguages": [],

确实有效...

【参考方案7】：

我必须添加一个 jsconfig.json 文件，其中包含：

  "exclude": ["node_modules"]

到我的应用程序目录，并重新加载 Visual Code，以便 Prettier 工作。 此外，在添加此文件之前，我无法在 Visual Code 命令面板中选择“使用...格式化文档”。

基本上它告诉 Visual Code 该项目是用 JavaScript 编写的（如果我理解正确的话）并从智能感知中排除 node_modules。

这是在完成了这里提到的所有其他事情之后。

【参考方案8】：

在 VScode 上，转到 设置 > 文本编辑器 > 格式化

然后勾选Format On Save复选框。

【参考方案9】：

首先检查 Prettier 是否正常工作。您可以尝试使用Shift + Cmd + P 和Format Document 格式化单个文件。如果这不起作用，那么很可能是 Prettier 扩展的问题。从 Extensions 禁用和启用 Prettier 扩展。

如果Formant Document 在单个文件上运行良好，那么解决此类问题的最佳方法是转到settings.json 并查找配置。我遇到了一个问题，即settings.json 中的前几行有问题，因此其他设置（如保存格式 (editor.formatOnSave) 和defaultFormatter 位于格式错误的行下方）不起作用。