VS code adds semicolon to the end of an HTML line

Question

I'm working in an Angular project. When I create a simple HTML template like:

<div>some {{ text }}</div>

VS Code adds a semicolon to the end of the line when saving, which is obviously not desired. when you delete and save again it adds it back in.

This doesn't seem to happen for more complex templates, especially when using directives or inputs/outputs.

Any ideas how to prevent this?

Also just to mention that I have the following extensions installed, which might affect it.

Angular Language Service Prettier - Code formatter

Answer 1

Solution 1

---

You can do a save without formatting using Ctrl+k Ctrl+Shift+S. Again, this will be a temporary solution.

Solution 2.0

---

You should check for plugins that you have added and remove them to make the VSCode save functionality work as expected.

Solution 2.1

---

Press CTRL+SHIFT+P, type "Formatter" and you should see an option that says Formatter Config.

After selecting that option, a file named formatter.json opens and all you do is edit the property (named onSave) from having true to being false.

Restart VSCode and it should have stopped auto-formatting.

Answer 2

I did not have the exact same issue, but some people may stumble across this with the same issue I had.

TLDR; I am an idiot; I was using the incorrect syntax.

This was my code:

<ul class="contents__items">
  <li *ngFor="let list in shoppingLists">{{ list.name }}</li>
</ul>

When I would save in VS Code, VS Code would add a colon an semicolon in like so:

<ul class="contents__items">
  <li *ngFor="let: list: in; shoppingLists">{{ list.name }}</li>
</ul>

This is because I was using the keyword in instead of of. Changing this to the correct syntax corrected all the issues.