VSCode中Angular内联模板格式化异常问题求助

在VSCode中使用Prettier的「保存时格式化」功能处理Angular组件内联模板时，出现了无效的异常格式化结果：

原代码：

template: `<div class="filter"><input type="checkbox" id="switch" /><label for="switch">Toggle</label></div>`,

格式化后错误结果：

template: `<di class="filter"><input type="checkbox" id="switch" /><label for="switch">Toggle</label></di>
>`,

现有配置文件 #

.prettierrc.json #

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "singleQuote": true,
  "useTabs": false,
  "printWidth": 120,
  "overrides": [
    {
      "files": "*.scss",
      "options": {
        "singleQuote": false
      }
    },
    {
      "files": "*.html",
      "options": {
        "parser": "html",
        "singleQuote": false
      }
    },
    {
      "files": "*.component.html",
      "options": {
        "parser": "angular"
      }
    }
  ]
}

tsconfig.json #

{
  "noImplicitAny": true,
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2020",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "noImplicitAny": true,
    "target": "es2020",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2020", "dom"],
    "baseUrl": "./",
    "paths": {
      "@app/*": ["src/app/*"],
      "@core": ["src/app/@core"],
      "@core/*": ["src/app/@core/*"],
      "@shared": ["src/app/@shared"],
      "@shared/*": ["src/app/@shared/*"],
      "@modules/*": ["src/app/modulesV2/*"],
      "@env/*": ["src/environments/*"]
    },
    "skipLibCheck": true
  },
  "angularCompilerOptions": {
    "strictTemplates": true,
    "strictInjectionParameters": true,
    "preserveWhitespaces": true
  }
}

解决方法 #

在.prettierrc.json的overrides数组中添加以下配置，针对Angular组件的TS文件关闭HTML空格敏感性检查：

{
  "files": "*.component.ts",
  "options": {
    "htmlWhitespaceSensitivity": "ignore"
  }
}

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