htmlangulareslintprettiereslintrc

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

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: &quot;400px&quot;"

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 }]
        }
      }
    }
Solution

  • 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>