为什么 Visual Studio Code 会更改我的 Angular html？

Question

I have the following segment of code in my Angular html:

<div class="col">
<input 
   #changeValue
   type="range" 
   min={{minMaxPrices.minPrice}} 
   max={{minMaxPrices.maxPrice}}     
   classname="custom-range w-100"        
   (change)="handlePriceChange(changeValue.value)"
/>

Within the code is the template variable #changeValue. But whenever I save the code in in Visual Studio Code the template variable, #changeValue is automatically assigned to itself like so: #changeValue="#changeValue" as shown below.

<div class="col">
<input 
   #changeValue="#changeValue" 
   type="range" 
   min={{minMaxPrices.minPrice}} 
   max={{minMaxPrices.maxPrice}}     
   classname="custom-range w-100"        
   (change)="handlePriceChange(changeValue.value)"
/>

And this breaks my code. How can I stop this from happening?

Answer 1

Do you have any VS Code extensions for auto-code formatting enabled? That could be the cause.

To disable auto-format, you can add "editor.formatOnSave": false to your settings file .