如何禁用Prettier对HTML文件的格式化？Angular模板问题咨询

我懂你这种困扰——Prettier对Angular模板的格式化有时候确实没法贴合我们想要的写法。下面是几种靠谱的解决方法，你可以根据自己的场景选：

1. 项目全局配置（推荐） #

通过修改项目根目录的Prettier配置文件（比如.prettierrc、.prettierrc.json或者prettier.config.js），给HTML/Angular模板单独设置规则，甚至直接禁用格式化：

方法A：完全禁用指定文件的Prettier解析 #

在配置里添加overrides规则，针对.html或者.component.html文件关闭Prettier：

{
  "overrides": [
    {
      "files": ["*.html", "*.component.html"],
      "options": {
        "enabled": false
      }
    }
  ]
}

方法B：调整HTML格式化规则（如果不想完全禁用） #

如果你只是不满意当前的格式化效果，也可以调整HTML相关的规则，比如忽略空格敏感度、放宽换行阈值：

{
  "overrides": [
    {
      "files": ["*.html", "*.component.html"],
      "options": {
        "htmlWhitespaceSensitivity": "ignore",
        "printWidth": 120
      }
    }
  ]
}

2. 单个文件/代码段忽略 #

如果只想针对某一个文件或者某一段代码禁用Prettier，用注释就能搞定：

忽略整个文件 #

在HTML文件的最顶部添加这个注释：

<!-- prettier-ignore -->
<some-component some-attribute [ang-binding1]='someExpr' [ang-binding2]='someExpr' (someEvent)='someFunc($event)'> </some-component>

忽略特定代码段 #

用prettier-ignore-start和prettier-ignore-end包裹你想保留格式的代码：

<!-- prettier-ignore-start -->
<some-component some-attribute [ang-binding1]='someExpr' [ang-binding2]='someExpr' (someEvent)='someFunc($event)'> </some-component>
<!-- prettier-ignore-end -->

3. 编辑器层面设置（以VS Code为例） #

如果你只是在编辑器里不想让Prettier格式化HTML文件，可以直接修改编辑器设置：

方法A：禁用Prettier对HTML的处理 #

打开VS Code设置（快捷键Ctrl+,），搜索Prettier: Disable Languages，在输入框里添加html，这样Prettier就不会碰HTML文件了。

方法B：切换到Angular官方格式化器 #

Angular有自己的Language Service格式化器，更适配模板语法。在VS Code的settings.json里添加：

"[html]": {
  "editor.defaultFormatter": "angular.ng-template"
}

这样就能用Angular官方的规则来格式化模板，替代Prettier啦。

内容的提问来源于stack exchange，提问作者Rachid O