Vue CLI ESLint 将额外的空白注入到多行跨度中答案

【问题标题】：Vue CLI ESLint injects additional whitespace into multi-line spansVue CLI ESLint 将额外的空白注入到多行跨度中
【发布时间】：2020-06-02 18:46:04
【问题描述】：

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

我有一个想要放在字符串末尾的列表。如果我这样写代码：

({{fruit}}, )

然后它会显示为(orange, banana, strawberry)，这正是我想要的。

但是当我应用 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>

这更具可读性，我喜欢它，只是结果将它变成了( orange , banana , strawberry )，这非常不是我想要的。

如何在不禁用 ESLint 并保持其应用格式的情况下删除那些插入的多余空格？

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

我最初切换到 javascript .join 方法，但意识到我需要用自己的 span 包装每个水果来应用 css 类。

【问题讨论】：

我偶然发现了两个潜在的解决方法：让格式化程序忽略该行。使用默认值，我发现 github.com/Prettyhtml/prettyhtml#ignore-element 和有效。还有一个潜在的使用指令。 github.com/vuejs/vue/issues/7701#issuecomment-368249629这些都不是解决方案，只是上游出现问题的创可贴。

标签： html css vue.js visual-studio-code eslint

【解决方案1】：

您可以切换到 Prettier 格式化程序，它会保留您的空白，但会造成这种混乱：

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

或者你可以通过忽略单行循环来转义格式规则：

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

【讨论】：