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

问题描述

我正在输出一个列表，其中包含使用 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 并保持其适用的格式的情况下删除那些插入的额外空格？

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

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

标签： htmlcssvue.jsvisual-studio-codeeslint

您可以切换到 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>

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

问题描述

解决方案

推荐阅读