Html Vue CLI ESLint在多行跨距中注入额外的空白

我正在输出一个列表，其中包含一个使用VUE CLI及其提供的所有默认值设置的项目，并在VSCode中工作

我有一张单子要放在字符串的末尾。如果我像这样编写代码：

（{{fruit}}，）

然后它显示为

（橙色、香蕉、草莓）

，这正是我想要的

但当我应用ESLint格式化程序时，它希望将代码转换为：

<span v-if="fruits">
  (
  <span v-for="(fruit,index) in fruits" :key="index">
    {{fruit}}
    <span v-if="index != (fruits.length - 1)">, </span>
  </span>)
</span>

(
{{水果}
, 
)

这是更可读，我喜欢它，除了结果将它变成

（橙色，香蕉，草莓）

，这是我非常不想要的

如何在不禁用ESLint并保留其应用的格式的情况下删除插入的额外空格

我对web开发相对较新，我很确定这是一个重复，但我在这个主题上找到的所有其他答案都是应用CSS规则来更改文本的边距，我只想删除多余的空间

---

我最初切换到javascript

.join

方法，但我意识到我需要用每个水果自己的跨度来包装它们以应用css类。

您可以切换到更漂亮的格式化程序，它将保留空白，但会造成混乱：

（{{fruit}}，）

或者，您可以忽略单行循环来逃避格式规则：

（{{fruit}}，）

我偶然发现了两个潜在的解决方法：让格式化程序忽略行。使用默认设置，我找到并工作了。还有一种可能是使用指令。这两种方法都不是解决问题的办法，只是在上游出了问题的地方贴上绷带。