Лучшее форматирование для HTML-тегов с Vetur?

Я заметил, что prettier теперь используется Vetur для форматирования HTML-части файлов Vue. Я не всегда понимаю, как он отформатирован:

<b-button v-else pill variant="primary" @click="submit"
  >Finish</b-button
>

Если я добавлю всего один элемент class, получится:

<b-button
  v-else
  pill
  class="pb-2"
  variant="primary"
  @click="submit"
  >Finish</b-button
>

Однако, поскольку мой редактор имеет ширину более 100 символов, его можно отформатировать как:

<b-button v-else pill class="pb-2" variant="primary" @click="submit">
  Finish
</b-button>

Я просмотрел параметры Prettier, но не нашел никаких соответствующих настроек конфигурации по этому поводу.

Как я могу указать моему модулю форматирования vscode форматировать HTML-теги по своему усмотрению?

В моем .prettierrc.json есть:

{
  "singleQuote": true,
  "arrowParens": "avoid",
  "jsxBracketSameLine": true
}

visual-studio-code html prettier vetur vscode-settings
person nowox    schedule 04.10.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

prettier предлагает варианты для обоих:

Чтобы получить желаемый результат, вам, вероятно, понадобятся:

{
  "printWidth": 100,
  "htmlWhitespaceSensitivity": "ignore"
}

По умолчанию для htmlWhitespaceSensivity установлено значение 'css', потому что:

как вы можете заметить во время повседневной работы с HTML, следующие два случая не будут давать одинаковый результат:

1<b> 2 </b>3 => 1 2 3

1<b>2</b>3 => 123

Это происходит потому, что во встроенных элементах важны пробелы.

из: https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting

person tommueller    schedule 04.10.2020
comment
Кажется, printwidth не работает. Я установил его на 1000, но все равно объекты HTML размещены в нескольких строках. - person nowox; 04.10.2020
comment
Ой. Это опечатка, должно быть printWidth. - person tommueller; 04.10.2020