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

Question

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

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

Disable Prettier from formatting inline JS in HTML files in VS Code

visual-studio-code

vscode-settings

prettier

prettier-eslint