Working on a project set up with the VUE CLI and default settings in VSCode, I'm struggling with formatting a list at the end of a string.
If I use this code:
<span v-if="fruits">(<span v-for="(fruit,index) in fruits" :key="index">{{fruit}}<span v-if="index != (fruits.length - 1)">, </span></span>)I get the desired output: (orange, banana, strawberry).
However, when I format the code using ESLint, it changes to:
<span v-if="fruits">
(
<span v-for="(fruit,index) in fruits" :key="index">
{{fruit}}
<span v-if="index != (fruits.length - 1)">, </span>
</span>)
</span>
Although this formatting is more readable, it introduces unwanted spaces resulting in ( orange , banana , strawberry ).
Is there a way to remove these extra spaces without disabling ESLint?
As a newcomer to web development, I've come across similar issues but most solutions involve adjusting CSS margins rather than deleting the spaces directly.
I initially tried using the .join method in JavaScript, but realized I would need individual spans for each fruit to apply specific CSS classes.