Angular HTML文件中Prettier将双引号内单引号转义为"的解决方法

1. 修正ESLint配置的错误 #

你当前的ESLint配置中，parserOptions字段错误地包含了extends和rules选项，这两个配置应该放在顶层而非解析器选项内部。修正后的HTML配置块如下：

{
  "files": [
    "*.html"
  ],
  "extends": [
    "plugin:@angular-eslint/template/recommended",
    "prettier"
  ],
  "rules": {
    "@angular-eslint/template/eqeqeq": ["off"],
    "@angular-eslint/template/banana-in-box": ["error"],
    "@angular-eslint/template/no-negated-async": ["off"],
    "max-len": ["error", { "code": 140 }]
  },
  "parserOptions": {
    "project": [
      "tsconfig.json"
    ]
  }
}

2. 调整Prettier配置解决引号转义 #

根据需求选择以下任意一种方案：

方案一：让HTML属性使用单引号（推荐） #

在Prettier配置文件（.prettierrc或prettier.config.js）中添加以下配置：

{
  "singleQuote": true,
  "overrides": [
    {
      "files": ["*.html"],
      "options": {
        "singleQuote": true
      }
    }
  ]
}

处理后style属性会变为：

style='width: 100%; height: "400px"'

内部双引号无需转义，彻底避免"的问题。

方案二：保留属性双引号，禁止自动转义嵌套引号 #

若坚持使用双引号作为HTML属性引号，需确保Prettier版本≥2.4.0，然后在配置中添加：

{
  "overrides": [
    {
      "files": ["*.html"],
      "options": {
        "attributeQuoteStyle": "preserve"
      }
    }
  ]
}

该配置会让Prettier保留你原本的引号嵌套逻辑，不会自动转义内部的单引号。

3. 验证修复效果 #

重新执行lint格式化命令，检查HTML中的style属性是否不再出现"转义符号。

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