🔥 Как ускорить разработку компонентов в твоём проекте Со временем разработка компонентов превращается в рутину. Приходится создавать одни и те же файлы для тестов, делать реэкспорт в index.ts, добавлять стандартные импорты для типов и всё такое.

Особенно это напрягает, когда проект только-только стартует и нет ещё всех базовых компонентов для кнопок, чекбоксов, инпутов.

В один момент задумался, как бы всё это дело оптимизировать.

Хочу чтобы я вводил название компонента, а он мне делал заготовку для всех файлов с уже расставленными импортами.

👀 Так я нашёл либу plop. Она работает с языком шаблонов handlebars.

В принципе, язык достаточно простой. Но нам не нужно тратить время на его изучение.

Важно лишь понимать, что названия нужно вставлять между фигурными скобками.

Остаётся лишь создать шаблоны для всех нужных файликов. Например, так выглядит шаблон для тестов:

import {{pascalCase name}} from './{{pascalCase name}}'; import { mount } from '@vue/test-utils'

describe('{{pascalCase name}}.ts', () => { … });

В либе много встроенных функций, чтобы приводить названия к camelCase, kebab-case и другим.

Есть ещё одна библиотека для генерации — hygen. Более современная реализация plop.

Из плюсов, это то что можно встраивать строчку в уже созданные файлы. Например, удобно добавлять экспорт компонента в общий файл реэкспорта index.ts.

———

🧑 • ютуб • задать вопрос