Prettier replaces single quote character with " when used inside double quotes

MariaAli
February 26, 2024
99 views
0 votes
2 Answers

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

Answers

- Ale_Bianco
- February 26, 2024 at 9:16 am
- 0 votes
0
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.

- WaqasNaseer
- February 26, 2024 at 12:00 pm
- 0 votes
0
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.