Вам больше не придется вручную создавать компоненты. Все что нужно сделать: написать весь нужный вам html в первом файле и весь css во втором. Программа сама определит структуру компонентов, создаст папки и нужные файлы с учетом вложенности дочерних тегов и сама поместит весь нужный код в необходимые файлы. Вам всего лишь необходимо дать ей два файла, имя класса с которого нужно начинать и путь папки в который все нужно положить.
Данный проект еще в разработке, однако его первая версия уже позволит вам сэкономить кучу времени.
- Создание структуры папок
- Генерация кода для каждого компонента
- Вставка этого кода в нужный файл
- Чтение css кода для каждого компонента
- Вставка css кода в нужный css файл
- Откройте папку вашего проекта в терминале
- Импортируйте туда данный репозиторий
git clone https://github.com/ImagineUnlimitedGroup/Easy-Components.git
- Введите команду
npm install
- Откройте файл settings.json в редакторе кода
- В поле "htmlPath" ведите путь к HTML файлу из которого будут генерироваться компоненты
- В поле "firstClassName" введите имя класса с которого нужно начать
- В поле "cssPath" введите путь к CSS файлу из которого будут импортироваться стили компонентов
- В поле "resultPath" введите путь к папке куда будут складываться все готовые компоненты
- Откройте терминал в папке Easy-Components
- Введите команду старта
node a
Главное отличие новой версии заключается в синтаксисе.
Теперь для создания компонентов нужно использовать символ $. Это позволит использовать теги: "Header", "Main", "Footer" и тд.
Вам не обязательно самим писать с заглавной буквы. Программа сама их напишет нужным образом.
Теперь можно давать компонентам несколько классов. Программа выберет именем компонента первый класс.
Исправлены ошибки с путями. Добавлен вывод информации о некоторых ошибках в консоль.
Если у вас возникли какие-либо неполадки — напишите нам на почту imagineunlimitedgroup@gmail.com
Она не нуждается в целостном html файле так как сама получает имя и код каждого класса и рекурсивно проходит по DOM дереву. Вы можете дать ей всего лишь текстовый файл с отрывком кода и она все сделает за вас.
Пример HTML документа:
<$div class="App">
<$header class="header">
Text
<div class="class-1">
content
</div>
</$header>
</$div>
При желании можно изменить струтуру файлов, для этого вам нужно добавить переменную типа "путь/имя_файла.расширение" и вызвать функцию createComponentFile() с этой переменной Генерация jsx и css происходит в самом начале функции createComponent()
├── App
├── App.jsx
├── App.css
├── Header
├── Header.jsx
├── Header.css
├── class-1
├── class-1.jsx
├── class-1.css
Программа сама анализирует код, генерирует красивую табуляцию и пишет все нужные импорты дочерних компонентов. Вы можете изменить шаблон по которому собирается JSX файл, для этого перейдите в функцию createJsxCode() и отредактируйте переменную "template"
import './App.css';
import Header from './Header'
function App() {
return (
<div class="App">
<Header/>
</div>
);
}
export default App;
Программа находит css код нужного компонента и записывает его в нужный файл
. App {
width: 1240px;
padding: Opx 15px;
color: #000;
font-weight: 400;
font-style: normal;
line-height: 130%;
}
@media (max-width: 998px) {
.App {
width: 998px;
padding: Opx 5px;
}
}
Если программа выдает какие-либо ошибки:
- Проверьте правильность данных в settings.json
- Проверьте наличие стартового класса
- Проверьте наличие стартовой папки
Если у вас возникли какие-либо неполадки или вопросы — напишите нам на почту imagineunlimitedgroup@gmail.com
Или свяжитесь с нами через Instagram
- NodeJs