Форматувач 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 у форматері коду.