为 HTML 文件配置 Prettier

如何解决为 HTML 文件配置 Prettier

我查看了 Prettier 的文档并进行了大量搜索，但不知道如何按照我想要的方式配置 angular html 文件。如果元素不超过一行的最大字符数，我希望元素在一行上，但如果它确实超过了最大值，那么我只希望每行一个属性，如下所示。

所需的格式：

<app-example-component [attribute1]="attribute1"></app-example-component>

<app-example-component
  [attribute1]="attribute1"
  [attribute2]="attribute2"
  [attribute3]="attribute3"
  [attribute4]="attribute4"
></app-example-component>

这是我目前得到的，我觉得很难阅读：

<app-example-component [attribute1]="attribute1" [attribute2]="attribute2"
  [attribute3]="attribute3" [attribute4]="attribute4"
  [attribute3]="attribute3" [attribute4]="attribute4"
  [attribute3]="attribute3"></app-example-component>

我正在使用 VS Code，最近将我的 Angular 项目转换为使用 ESLint 而不是 TSLint，但在此之前我没有使用 Prettier，所以我不知道该转换是否会导致问题。

这是我的 .eslintrc.json 文件。也许这以某种方式破坏了 Prettier？

{
  "root": true,"ignorePatterns": [
    "projects/**/*"
  ],"overrides": [
    {
      "files": [
        "*.ts"
      ],"parserOptions": {
        "project": [
          "tsconfig.json","e2e/tsconfig.json"
        ],"createDefaultProgram": true
      },"extends": [
        "plugin:@angular-eslint/ng-cli-compat","plugin:@angular-eslint/ng-cli-compat--formatting-add-on","plugin:@angular-eslint/template/process-inline-templates"
      ],"rules": {
        "@typescript-eslint/consistent-type-definitions": "error","@typescript-eslint/dot-notation": "off","@typescript-eslint/explicit-member-accessibility": [
          "off",{
            "accessibility": "explicit"
          }
        ],"id-blacklist": "off","id-match": "off","no-underscore-dangle": "off"
      }
    },{
      "files": [
        "*.html"
      ],"extends": [
        "plugin:@angular-eslint/template/recommended"
      ],"rules": {}
    }
  ]
}

代码/用户/settings.jsons：

{
  "editor.tabSize": 2,"editor.detectIndentation": false,"html.format.endWithNewline": true,"editor.linkedEditing": true,"typescript.updateImportsOnFileMove.enabled": "always","editor.formatOnSave": true,"editor.defaultFormatter": "esbenp.prettier-vscode","[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

解决方法

实际上，prettier 的工作原理与您描述的所需解决方案完全相同。您可以在 the playground 中轻松查看。您确定将 html 文件添加到 IDE 的漂亮配置中吗？因为通常默认情况下，据我所知，它只对js、ts、jsx、tsx文件开启。

因此，请检查您的 .vscode/settings.json 以包含下一行：

"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},"editor.formatOnSave": true,

更新：

我认为这是你的问题。

 "[html]": {
     "editor.defaultFormatter": "vscode.html-language-features"   
 }

您的代码没有按照更漂亮的规则进行格式化。

改成

"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},

正如我上面提到的

更新 2：

另外，请检查您的“解析器”选项以获取更漂亮的配置文件。只要您对多个不同的文件使用 prettier，就不应将其添加到顶级配置中。请参阅有关此 here 的文档。在你的情况下，它只允许在“覆盖”内