Indent for Angular 18 control flow @if and @for

[ssj3sunny]

Hi there. I am developing in angular 18 and there are these control work flows like @if and @for and etc. I get an error for indent when I do
@if (a > b) {
{{a}}
}
and the auto fix is then
@if (a > b) {
{{a}}
}
The ESLint error is: "Expected indentation of 0 space but found 4 space. (@html-eslint/indent)"

Do you know how I can fix it?

[yeonjuan]

Hi, @ssj3sunny html-eslint does not provide support for Angular-specific syntax.

[ssj3sunny]

Hi @yeonjuan . Thank you for the response. Is this something that will be considered for the future?

[yeonjuan]

Hi @ssj3sunny Unfortunately, there are no plans for this. It would be possible to write a parser to change the angular AST to html-eslint AST, but it would be a lot of work and changes.

[Martinspire]

Well, the overall syntax isn't all that difficult but at least compatibility or ignoring the angular syntax would be beneficial since it would allow for more rules and parsing on top of the current angular implementation. If it could at least work together, it would open the plugin to more developers.

[yeonjuan]

@Martinspire Thank you for your feedback.

or ignoring the angular syntax would be..

Telling it to ignore syntax can be simple. However, we believe that users will expect rules like indent to take the block into account, such as in the case of an “@if” block.
Perhaps I could consider a parser that converts angualr ast to html-eslint ast. It would probably be a lot of work, but I'll check it out.