Быстрый старт

Инструкции для быстрого старта вашего проекта.

Требования

• Git
• Node.js (v20+) или Deno (v2+) или Bun (v1.2+)

Разворачивание проекта

1. Открыть терминал, перейти в папку проектов, клонировать репозиторий

   git clone https://github.com/motosasha/quick-builder.git my-new-project

2. Перейти в папку нового проекта (в этом примере — cd my-new-project).
3. Удалить историю разработки сборщика: rm -rf .git.
4. Установить зависимости проекта
   npm

   npm install

   deno

   deno install

   bun

   bun install

Настройка IDE

WebStorm/PhpStorm

Помощь в программировании для Node

Интеллектуальное автодополнение кода, информация о параметрах и навигация по исходному коду для Node.js:

1. Открыть склонированный проект.
2. Открыть настройки WebStorm:
   • macOS: WebStorm/PhpStorm => Settings... или Command + ,;
   • Windows/Linux: ☰ => File => Settings... или Ctrl + Alt + S.
3. В настройках перейти в Languages & Frameworks => Node.js и проставить чекбокс Coding assistance for Node.js

Настройка линтингов

ESLint

1. Открыть настройки WebStorm:
   • macOS: WebStorm/PhpStorm => Settings... или Command + ,;
   • Windows/Linux: ☰ => File => Settings... или Ctrl + Alt + S.
2. В настройках перейти в Languages & Frameworks => JavaScript => Code Quallity Tools => ESLint и переключить радио-баттон в значение Automatic ESLint configuration.
3. [Опционально]: Проставить чекбокс Run eslint --fix on save.

Prettier

1. Открыть настройки WebStorm:
   • macOS: WebStorm/PhpStorm => Settings... или Command + ,;
   • Windows/Linux: ☰ => File => Settings... или Ctrl + Alt + S.
2. В настройках перейти в Languages & Frameworks => JavaScript => Prettier и переключить радио-баттон в значение Automatic Prettier configuration.
3. [Опционально]: Проставить чекбокс Run on save.

Stylelint

1. Открыть настройки WebStorm:
   • macOS: WebStorm/PhpStorm => Settings... или Command + ,;
   • Windows/Linux: ☰ => File => Settings... или Ctrl + Alt + S.
2. В настройках перейти в Languages & Frameworks => JavaScript => Stylelint и проставить чекбокс Enable.
3. Добавить в поле Run for files — scss.
4. [Опционально]: Проставить чекбокс Run stylelint --fix on save.

Pug-lint

Pug-lint не нужно настраивать, обнаруженные ошибки будут выводиться в терминал.

Возможные проблемы с Vite

В некоторых случаях WebStorm/PhpStorm может не подхватить конфигурацию Vite и, например, пути указанные через альясы могут выдавать ошибку. Решение:

1. Открыть настройки WebStorm:
   • macOS: WebStorm/PhpStorm => Settings... или Command + ,;
   • Windows/Linux: ☰ => File => Settings... или Ctrl + Alt + S.
2. В настройках перейти в Languages & Frameworks => JavaScript => Vite переключить радио-баттон в значение Manually и указать путь до файла конфигурации Vite ./vite.config.js.

Visual Studio Code

Настройка линтингов

1. Установить расширения:
   • EditorConfig for VS Code;
   • ESLint;
   • Prettier - Code formatter;
   • Stylelint;
   • puglint.
2. Перезагрузить окно редактора:
   • macOS: Command + Shift + P => Developer: Reload Window;
   • Windows/Linux: Ctrl + Shift + P => Developer: Reload Window.
3. Конфигурационные файлы лежат в .vscode/extensions.json и .vscode/settings.json

Pre-commit хук обязательно!

⚠️ Внимание!

После настройки IDE нужно обязательно запустить команду prepare для подготовки husky, без этого pre-commit хук не будет работать.

npm

npm run prepare

deno

deno run prepare

bun

bun run prepare

Предварительная подготовка

Перед началом работы удалите демонстрационные файлы из сборщика.

Шрифты

При использовании локальных шрифтов, отличных от Inter, или шрифтов Google Fonts, необходимо:

1. Удалить файлы *.woff2 в директории ./public/assets/fonts/.
2. Удалить или обновить адреса шрифтов в секции isFontsPreload в head файла ./src/layouts/layout__default-head.pug.
3. Удалить или заменить имя шрифта в файле примеси ./src/styles/base/fonts.scss.
4. Удалить или заменить имя шрифта в секции fonts файла переменных ./src/styles/base/variables.scss.

💡 Оптимизация шрифтов

Как подготовить локальный шрифт для сайта читайте тут.

Favicon

Вы можете заменить или удалить существующие в проекте файлы favicon и webmanifest в директории ./public/assets/img/favicon. Их подключение происходит в секции favicon в файле ./src/layouts/layout__default-head.pug.

💡 Генерация favicon

Для работы с favicon рекомендую ознакомиться со статьёй, её перевод.

Генератор лежит здесь.

Компоненты

В базовой поставке сборщика есть четыре подготовленных компонента:

• Уровень atoms: container и page;
• Уровень edging: header и footer.

Если эти компоненты не требуются, их можно удалить.

⚠️ Компонент page

Компонент page содержит базовые стили и фиксированный подвал. При его удалении потребуется самостоятельно реализовать эти стили и убрать упоминание компонента из основного шаблона ./src/layouts/layout__default.pug.

⚠️ Компоненты header и footer

Если вы решаете удалить компоненты header и footer, необходимо также удалить их упоминания из основного шаблона ./src/layouts/layout__default.pug.

Передача данных в разметку

Существует несколько способов передачи данных для использования в разметке:

1. JSON-файлы в директории ./src/data/;
2. JSON-файлы в директории ./src/pages/, имена которых совпадают с названиями страниц (пример: index.pug для index.pug.json);
3. Конфигурационные файлы проекта (обычно ./project.config.json.

Если вы не используете внешние JSON-данные, можете удалить все файлы .json из директорий ./src/data/ и ./src/pages/.

Отключение проектной навигации

Если ваш проект представляет собой лендинг или использует перелинковку страниц, вы можете отключить стандартную навигацию:

1. Установить значение false для свойства includeProjectNav в файле ./project.config.js.
2. Удалить файлы ./src/data/project-navigation.json и ./src/layouts/layout__project-nav.pug.
3. [Опционально]: Удалить все упоминания isProjectNav из шаблона ./src/layouts/layout__default.pug.

Иконки

Удалите демонстрационную иконку ./src/icons/icon__example.svg.

Скрипты и стили

Удалите или отключите ненужные вам скрипты (./src/scripts/helpers) и стили (./src/styles/base) в соответствии с требованиями вашего проекта.

⚠️ Напоминание

Не забудьте также удалить соответствующие записи из свойств addScripts и style в конфигурационном файле ./project.config.js.