Vite Component Creator
Швидке створення компонентів для ваших Vite-проєктів!
Цей плагін додає пункт "Створити компонент збірки" до контекстного меню папок у VSCode. Після введення назви компонента автоматично створюється папка з HTML та SCSS файлами, де HTML уже має підключений SCSS через <link>
.
Основні функції
- Додає пункт "Створити компонент збірки" до контекстного меню папок.
- Запитує назву компонента через діалогове вікно.
- Створює папку з назвою компонента, а всередині:
- HTML-файл із підключеним SCSS.
- SCSS-файл із базовим класом для стилізації.
- Перевіряє введену назву (дозволяє лише літери, цифри та дефіс).
Як почати
- У провіднику VSCode клацніть правою кнопкою миші на папці.
- Виберіть "Створити компонент збірки".
- Введіть назву компонента (наприклад,
MyComponent
).
- Натисніть Enter — нова структура буде створена:
MyComponent/
├── MyComponent.html
├── MyComponent.scss
Приклад створених файлів
<link rel="stylesheet" href="/src/html/components/MyComponent/MyComponent.scss">
<div class="MyComponent">
<!-- Ваш контент тут -->
</div>
@import 'src/scss/mixins';
.MyComponent {
/* Ваші стилі тут */
}
settings.json
Ви можете налаштувати поведінку плагіна через settings.json у VSCode. Дефолтна конфігурація виглядає так:
{
"viteHtmlComponentCreator.defaultImports": {
"html_imports": ["<link rel='stylesheet' href='@c/{component}/{component}.scss'/>"],
"scss_imports": ["@import '@s/connect';"]
}
}
html_imports: Масив із рядками для HTML-файлу. За замовчуванням містить із динамічним шляхом до стилів, де {component} замінюється на назву компонента.
scss_imports: Масив із імпортами для SCSS-файлу, наприклад, підключення зовнішніх стилів чи міксинів.
Щоб змінити налаштування:
Відкрийте settings.json (Ctrl + , → "Open Settings (JSON)").
Додайте або змініть секцію viteHtmlComponentCreator.defaultImports.
Приклад кастомізації:
{
"viteHtmlComponentCreator.defaultImports": {
"html_imports": ["<link rel='stylesheet' href='@styles/{component}/{component}.scss'/>"],
"scss_imports": ["@import '@s/variables';", "@import '@s/mixins';"]
}
}