VS-Code Prettier Format On Save 不起作用

Question

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

• 打字;作品格式

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

  ]

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

  

• 'Format Document ,Format Selection andFormat Document with` 命令面板选项都不起作用

• 休息时间与从 Prettier 2-3 转会一致

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

  1. 根据更漂亮的文档，我的 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
},

2. 我的开发依赖项包括：

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

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

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

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

Answer 1

按着这些次序：

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

完毕！

Answer 2

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

然后选中Format On Save复选框。

Answer 3

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

Answer 4

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

"editor.formatOnSaveMode": "modifications",

到

"editor.formatOnSaveMode": "file",

解决了我的问题。

Answer 5

就我而言，问题是默认格式化程序设置未用于打字稿文件。看着我的settings.json我看到

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

调整数值后[typescript]问题得到解决。
我在设置 UI 中找不到可以仅更改 TS 的默认格式化程序的位置，但这将是一个不错的功能。

Answer 6

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

Answer 7

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

根据文档：“您可以在保存为 ESLint、TSLint 或 Stylelint 时启用自动修复，并且仍然可以进行格式化和快速修复”

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