Сделайте красивее менее уродливым - предотвратите разделение тегов

Question

Prettier в VS Code - это здорово, за исключением этого случая, когда кажется, что это делает вещи менее читаемыми. Вот пример поведения упаковки Prettier в файле шаблона Vue:

Notice the opening tag's end bracket is placed as start of second line, and closing tag is split between end of line 2 and 3. In my mind, this is more pretty:

введите описание изображения здесь

Теперь теги заполнены в отдельных строках, а содержимое находится только в строке 2.

Мне не удалось найти способ настроить это в более красивой документации. Какие-нибудь ниндзя умеют?

Answer 1

Прочтите это

, есть свойство jsxBracketSameLine, установите для него значение true, и вам хорошо go. Просто добавьте в свой пакет конфигурацию json

Пример:

"prettier": {
    "singleQuote": true,
    "jsxBracketSameLine": true,
    "printWidth": 80,
    "tabWidth": 2,
    "semi": true,
    "bracketSpacing": true,
    "jsxSingleQuote": false
  }

Answer 2

Попробуйте установить для свойства htmlWhitespaceSensitivity значение ignore в вашей более красивой конфигурации.

Answer 3

Согласен с вашим мнением. Это правило Linter поможет вам.

eslint-plugin-vue / html -closing-bracket-newline.md at master · vuejs / eslint-plugin- vue

Я настраиваю правила в .eslintrc.js ниже.

"vue/html-closing-bracket-newline": [2, { multiline: "never" }]

и устанавливаю .vscode/setting.json ниже

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "[vue]": {
    "editor.formatOnSave": false
  }
}