Angular HTML templates indent size
Hi. Please help me with finding information about the reformat angular template.
When I reformat the html template with angular attributes, the next constructions like:
```
<div
#container
class="flex"
></div>
```
or
```
<ng-template
#menuGroupTemplate
let-items="items"
>
<div class="menu-group">…</div>
</ng-template>
```
rearrange my attributes with 4 spaces, but in the settings, and even in .editorconfig I have an indent size of 2 for html documents.
How can I set up my IDE so that the indent size remains always the same and thus for both element references and default html attributes?
Please sign in to leave a comment.
What IDE version do you use? Also, do you have Prettier configured for your project in Settings | Languages & Frameworks | JavaScript | Prettier?
I'm always using latest version of WebStorm. And I don't use Prettier in my project
Does disabling editorconfig support make any difference?
Note also that attributes are indented according to Continuation indent settings (Settings | Editor | Code Style | HTML | Tabs and Indents, Continuation indent:)
I found the problem. I have different indent sizes for javascript and html. For javascript, it is 4, for html is 2. And when I changed the indent size for javascript to 2 also, all my problems went away. It's wrong logic because I think javascript indent size should not affect html documents. Should I create a request for this problem?
Settings | Editor | Code Style | HTML | Tabs and Indents, Continuation indent preferences
You are right. Ordinary attributes like class, type, even (click) and formControlName indented according to html settings. But if I declares DOM elements as variables, for example:
<div
#container
class="flex"
></div>
then attributes of such element start to indented according to javascript rules that you can find at Settings | Editor | Code Style | JavaScript | Tabs and Indents, Continuation indent preferences
Thanks for your help