Vue CLI ESLint вводит дополнительные пробелы в многострочные промежутки - PullRequest
Новая
       6

Vue CLI ESLint вводит дополнительные пробелы в многострочные промежутки

1 голос
/ 18 февраля 2020

Я выводлю список с проектом, настроенным с помощью VUE CLI и всеми настройками по умолчанию, которые он предоставляет, и работающими в VSCode.

У меня есть список, который я хочу поместить в конец строки. Если я напишу код вроде:

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

, то он отобразится как (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 и не применяя форматирование, к которому он применяется?

Я относительно новичок в веб-разработке и уверен, что это дубликат , но все остальные ответы, которые я нашел в этом топи c, должны применять CSS правила, которые изменяют поле текста, и я просто хочу удалить лишний пробел.

Сначала я переключился на метод javascript .join, но понял, что мне нужно обернуть каждый фрукт своим собственным диапазоном, чтобы применить класс css.

1 Ответ

1 голос
/ 18 февраля 2020

Вы можете переключиться на форматтер 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
  >

Или вы можете избежать правил форматирования, игнорируя однострочную l oop: 

<!-- 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>
...