为 HTML 文件配置 Prettier

Posted 2023-02-22

【中文标题】为 HTML 文件配置 Prettier

【英文标题】：Configuring Prettier for HTML files

【发布时间】：2021-05-05 05:40:53

【问题描述】：

我查看了 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"
  

【参考方案1】：

实际上，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 的文档。在你的情况下，它只允许在“覆盖”内

【讨论】：

我最初忽略了 html 文件，但是当我从我的 prettierignore 文件中删除 html 时，它开始自动重新格式化为我显示的丑陋格式。我一定是设置有问题，但找不到它是什么。

@Bryan，请检查我更新的答案。但是，分享您的 .vscode/settings.json 可能会有所帮助。

@Bryan，您的 html 文件的格式化程序不正确。检查我的更新答案

@Bryan，你有机会检查一下吗？当您在上下文菜单中选择“格式化文档”选项时，您的 vscode 会显示什么？

我确信这就是问题所在，但没有奏效。结果我不得不从 prettier.config 中删除“解析器：'typescript'”。谢谢你帮我追查。如果您将其添加到您的答案中，我会接受它:)