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

问题描述

我正在使用 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,script" // Don't format content within these tags
}

知道出了什么问题吗？我也乐于接受其他构建事物的方法的建议。感谢您的帮助！

解决方法

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

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