Vue форматер
Форматируйте однофайловые компоненты Vue с помощью этого форматтера Vue. Вставьте компонент, и инструмент отформатирует его блок script как JavaScript или как TypeScript, если указан lang="ts", а блок style — как CSS, SCSS или Less в соответствии с атрибутом lang, добавив отступы для обоих блоков под открывающими тегами. Блок template останется в одной строке, а лишние пробелы будут сокращены. Подходит разработчикам Vue, которые приводят компоненты в порядок перед проверкой и добавлением в документацию.
Часто задаваемые вопросы
Что форматтер Vue изменяет в компоненте?
Он форматирует содержимое блоков script и style и размещает каждый блок верхнего уровня на отдельной строке. Код в каждом блоке получает отступ в два пробела относительно открывающего тега.
Как обрабатывается блок template?
Блок template остается в одной строке, а последовательности пробелов сокращаются до одного пробела. Директивы, такие как v-if, v-for, :prop и @event, а также выражения mustache копируются точно в исходном виде.
Как форматируется блок script?
Обычный блок script разбирается и выводится как JavaScript с отступом в два пробела и точками с запятой. При lang="ts" он форматируется как TypeScript, который также поддерживает аннотации типов.
Как форматируется блок style?
По умолчанию блок style форматируется как CSS: каждое объявление размещается на отдельной строке. При lang="scss" или lang="less" применяются правила SCSS или Less, а атрибут scoped сохраняется.
Что происходит при синтаксической ошибке в script?
Блоки JavaScript и CSS разбираются, поэтому при синтаксической ошибке инструмент останавливается и показывает сообщение об ошибке. Исправьте указанную проблему и запустите форматирование снова.
Поддерживается ли script setup?
Да, атрибут setup сохраняется в теге, а содержимое форматируется так же, как в любом другом блоке script. Макросы компилятора, такие как defineProps, форматтер воспринимает как обычные вызовы функций.
Можно ли изменить отступ?
Нет, форматтер всегда использует отступ в два пробела и не имеет настроек. Один и тот же компонент всегда дает одинаковый результат.
Комментарии сохраняются?
Да, сохраняются комментарии HTML между блоками, а также комментарии внутри блоков script и style. Комментарии внутри template остаются на своих местах в его единственной строке.
Почему результат заключен в блок кода html?
Однофайловые компоненты считываются как HTML, поэтому результат возвращается в виде блока кода Markdown с пометкой html. Скопируйте строки между ограждениями в файл .vue.
Какой размер компонента допускается?
До 5 MB за один запуск; более крупный ввод отклоняется с сообщением. Результат идентичен варианту Vue форматтера Code Formatter.