Prettier replaces single quote character with " when used inside double quotes | Angular .html files

Question

I have applied angular-eslint in my angular package. I have also added prettier configurations. The prettier is changing the single quotation mark to &quote; symbol.

How can I fix that

The code before lint:

 <div
      [id]="field?.tempId"
      style="width: 100%; height: '400px'"
    ></div>

the code after lint

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

I have tried to change the parser for html files currently it is structured as bellow

{
      "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"]
      },
      "parserOptions": {
        "project": [
          "tsconfig.json"
        ],
        "extends": ["plugin:@angular-eslint/template/recommended"],
        "rules": {
          "max-len": ["error", { "code": 140 }]
        }
      }
    }

Answer 1

If you're using Prettier through an Angular CLI project, you can also set Prettier options directly in your angular.json file under the "projects"

"projects": {
  "your-project-name": {
      "lint-fix": {
        "options": {
          "lintFilePatterns": [
            "src/**/*.html"
          ],
          "fix": true
        }
      }
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script>

Answer 2

You can use the override prop in this way:

{
  "files": ["*.html"],
  ...
  "parserOptions": {
    ...
  },
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "angular",
        "printWidth": 140,
        "singleQuote": true,
        "htmlWhitespaceSensitivity": "ignore"
      }
    }
  ]
}