Я довольно долго возился с форматированием, так как мой предыдущий проект перестал форматировать однажды Вот то, что я думаю, текущее состояние техники:
Используйте расширения vetur и более симпатичные (в частности, esbenp.prettier-vscode Prettier - Code formatter). (Вы получаете их с помощью пакета расширений Vue.js esbenp.prettier-vscode и других.)
Vetur - (текущий) обязательный инструмент по умолчанию для vue. Не принимать замены.
Prettier не поддерживает файлы .vue как таковые, поэтому тип файла по умолчанию отключен: https://github.com/prettier/prettier-vscode/issues/338.
Но Vetur понимает его ограничения и вместо этого делегирует форматирование отдельных разделов файла .vue потенциально другому формататору. По умолчанию, однако, он делегирует все, кроме разделов HTML, Prettier. https://vuejs.github.io/vetur/formatting.html. Отключает форматирование разделов HTML.
Разработчики Vetur отказались от js-beautify-html, хотя он все еще, по-видимому, функционален: https://vuejs.github.io/vetur/formatting.html. И в настоящее время они не дают альтернативных рекомендаций.
Более красивая поддержка HTML, которая была бы очевидным выбором, если бы она существовала, - длинная и грустная история. В настоящее время (май 2018 г.) более симпатично форматирует HTML как JSX. Упоминаются многие тонкости, но одна проблема, которую я понял, заключается в том, что JSX преобразует начальные / пустые / конечные теги в пустые теги, например, в. Судя по всему React и (я полагаю) Vue, это не нравится, поэтому vetur отключает Prettier для HTML.
Так что я собираюсь включить js-beautify-html в настройках vetur, надеясь на лучшее и не отрывая глаз. Но я настолько поверхностный кодер, что никогда не опрокину его известные проблемы.