禁止 Prettier 在 VS Code 中格式化 HTML 文件中的内联 JS

Question

我正在使用 eslint-config-prettier 和 eslint-plugin-prettier 包通过 ESLint 运行 Prettier。我也将 Prettier 作为开发依赖项用于非 JS 文件。我将这两个扩展与 VS Code 一起使用，在保存时自动验证和格式化我的代码：Prettier - Code formatter 和 ESLint。

我在 HTML 文件中遇到内联 JS 的问题。似乎通过 ESLint 运行的 Prettier 要么没有运行，要么被常规的 Prettier 扩展所推翻，即使在我的配置文件中我已明确将选项 html.format.contentUnformatted 设置为 "pre,code,textarea,script" 以防止格式化该内容使用默认格式化程序。我希望它忽略 script 标签中的内容，因为 ESLint 应该在那里处理格式。

相关设置在我的settings.json:

{
  "javascript.validate.enable": false,  // turns off default VS Code validation, I'm using ESLint's
  "javascript.format.enable": false,    // ^ see above
  "editor.formatOnSave": true,          // Turn on formatting for all files except JS/JSX
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false
  },
  "eslint.alwaysShowStatus": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true // Let ESLint fix all fixable errors on save
  },
  "eslint.run": "onSave", // Run ESLint on save
  // Turn off Prettier for JS since we are doing it through Eslint already
  "prettier.disableLanguages": ["javascript", "javascriptreact"],
  "html.validate.scripts": false, // turn off default VSCode JS validation in HTML files
  "editor.defaultFormatter": "esbenp.prettier-vscode", // Use Prettier formatter
  "html.format.contentUnformatted": "pre,code,textarea,script" // Don't format content within these tags
}

知道有什么问题吗？我也愿意接受其他方式来构建事物的建议。感谢您的帮助！

Answer 1

您可以使用 Prettier 的 embeddedLanguageFormatting 选项来实现您想要的。见https://prettier.io/docs/en/options.html#embedded-language-formatting

html.format.*VS Code 设置，是 VS Code 内置格式化程序的设置，与 Prettier 无关。