Is this vue js html line split by Prettier or ESLint in VSCode

Question

When I save my Vue JS component in VSCode the template code shown below is split from a single line into two or more, depending on the length of the "Load Depot.." string.

Sometimes, depending on the length of the string it splits in the middle of the quotes and breaks my code.

I have both ESLint or Prettier enabled in the project, but I don't know which one is responsible for this and how to fix it.


    <h4>Depot Edit - {{ route.params.code }}, {{ depotStore.currentDepot ? depotStore.currentDepot.name : "Loading..." }} </h4>

This receives a line break in an inconvenient location


    <h4>Depot Edit - {{ route.params.code }}, {{ depotStore.currentDepot ? depotStore.currentDepot.name : "Loading 
Depot..." 
}} </h4>

Ying-Shan Lin Ying-Shan Lin · Accepted Answer · 2022-06-20T03:22:45

You can check your VSCode formatter by Ctrl + Shift + P, search Format Document ... then choose the formatter which you want.

Second, you can install Prettier ESLint - Visual Studio Marketplace. It makes Prettier work with ESlint.

Is this vue js html line split by Prettier or ESLint in VSCode

1 Answers