skip to Main Content

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

2

Answers


  1. You can use the override prop in this way:

    {
      "files": ["*.html"],
      ...
      "parserOptions": {
        ...
      },
      "overrides": [
        {
          "files": "*.html",
          "options": {
            "parser": "angular",
            "printWidth": 140,
            "singleQuote": true,
            "htmlWhitespaceSensitivity": "ignore"
          }
        }
      ]
    }
    
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search