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

Ваша реклама тут?

[Напишіть нам електронною поштою](mailto:hi@dennn.is?subject=%D0%A0%D0%B5%D0%BA%D0%BB%D0%B0%D0%BC%D0%B0%20%D0%BD%D0%B0%20OneClick%20Pro)

[Реклама Набір плагінів для роботи з агентами для WordPress.](https://sleekwp.com/?ref=oneclickpro)