Как в VS Code настроить автоформатирование HTML и Vue‑файлов так, чтобы вложенные элементы автоматически переносились на новые строки внутри тегов?

Коротко — в VS Code форматирование HTML/Vue контролируется установленным форматтером (Prettier, js-beautify/Beautify, встроенный HTML formatter, Vetur/Volar). Как правило самый простой путь — установить Prettier и сделать его дефолтным форматтером для .html и .vue, но Prettier по умолчанию старается не «ломать» короткие инлайн‑элементы (он объединяет дочерние теги в одну строку, если помещается в printWidth). Если вы хотите, чтобы вложенные элементы всегда переносились на новую строку, можно:

1) Попробовать настроить Prettier (если вас устраивают переносы из‑за ширины строки)
- Установите расширение Prettier (esbenp.prettier-vscode).
- В settings.json:
  {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
    "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
  }
- В .prettierrc (пример):
  {
    "printWidth": 80,
    "singleAttributePerLine": true,
    "bracketSameLine": false,
    "htmlWhitespaceSensitivity": "strict"
  }
Комментарий: уменьшив printWidth вы заставите Prettier чаще переносить содержимое на новые строки, но он всё равно может оставить короткие вложенные элементы в одной строке.

2) Если Prettier не даёт желаемого результата — использовать js-beautify (Beautify) или встроенный HTML formatter с опциями для жёстких переносов
- Установите расширение Beautify (HookyQR.beautify) или используйте настройки встроенного HTML formatter.
- Пример .jsbeautifyrc, который чаще ставит вложенные теги на отдельные строки:
  {
    "html": {
      "indent_size": 2,
      "indent_with_tabs": false,
      "indent_inner_html": true,
      "wrap_attributes": "force-expand-multiline",
      "wrap_line_length": 80,
      "preserve_newlines": false,
      "max_preserve_newlines": 1
    }
  }
- Пример settings.json для Vetur (если используете Vetur):
  {
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        "wrap_attributes": "force-expand-multiline",
        "wrap_line_length": 80
      }
    },
    "editor.formatOnSave": true
  }
- Для встроенного HTML-форматтера VS Code:
  {
    "html.format.wrapLineLength": 80,
    "html.format.wrapAttributes": "force-expand-multiline",
    "html.format.indentInnerHtml": true
  }

3) Vue (Volar)
- Если используете Volar + Prettier: используйте Prettier как дефолтный форматтер (см. пункт 1). Если форматирование шаблонов Vue происходит не так, как нужно, переключитесь у Vetur (если он есть) или задайте параметр форматирования шаблона через Prettier и плагин prettier-plugin-vue.

Замечания и рекомендации
- Нет универсальной опции «всегда переносить каждый дочерний элемент на новую строку» у Prettier; нужно либо снижать printWidth, либо использовать js-beautify/встроенный форматтер с принудительными правилами обёртки.
- Если пришлёте пример «до» и «после» (как у вас сейчас и как нужно), я предложу точную конфигурацию (какой форматтер и какие параметры) и дам готовые snippets для settings.json / .prettierrc / .jsbeautifyrc.