Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

⭐️ Чеклист: CI для фронтенда

CI — ваш честный ревьюер. Он проверит, не забыли ли вы запустить тесты, форматировать код и не сломал ли билд.

1️⃣ Автоматическая сборка проекта

— Убедитесь, что build проходит на каждом коммите

— Добавьте проверку на размер бандла (webpack-bundle-analyzer, size-limit)

— Сравнивайте метрики между коммитами (например, с CI compare или Bundlewatch)

➡️ npm run build, vite build, next build

2️⃣ Линтинг и форматирование

— Настройте ESLint (с правилами под ваш стек: React, TS и т.д.)

— Подключите Prettier с автоформатированием

— Проверяйте линт перед пушем через lint-staged и husky

➡️ eslint ., prettier --check .

3️⃣ Юнит- и интеграционные тесты

— Запускайте тесты на каждый PR

— Покрывайте бизнес-логику, хуки, компоненты

— Минимум: jest + @testing-library/react

➡️ jest --coverage, vitest, c8

4️⃣ Проверка типов

— Включите строгую проверку TypeScript

— Ошибки типов — повод не пускать PR в main

— Не забудьте проверить .d.ts и внешние типы

➡️ tsc --noEmit, tsc -p tsconfig.json

5️⃣ Проверка production-конфига

— Убедитесь, что .env.production загружается правильно

— Добавьте в CI проверку на наличие всех нужных переменных

— Прогоните Lighthouse/Pa11y, если хочется extra-модуль

➡️ dotenv-linter, dotenv-cli, pa11y-ci

6️⃣ Визуальные/регрессионные тесты (опционально)

— Снимайте скриншоты UI (Storybook + Chromatic, Percy)

— Ловите баги до ревью

— Можно запускать раз в день/неделю в cron-режиме

7️⃣ Бейджики и отчёты

— Добавтеь бейджи покрытия, билда и линта в README

— Публикуйте отчёты в MR/PR

— Настройте уведомления в Telegram/Slack

➡️ Codecov, Coveralls, GitHub Actions Summary

🐸 Библиотека фронтендера

#буст

Please open Telegram to view this post

VIEW IN TELEGRAM

👍11🔥4

www.tg-me.com/us/Библиотека фронтендера | Frontend JS JavaScript React js Angular js Vue js/com.frontendproglib/6327

1.79K viewsJul 3 at 07:01

⭐️ Чеклист: CI для фронтенда

CI — ваш честный ревьюер. Он проверит, не забыли ли вы запустить тесты, форматировать код и не сломал ли билд.

1️⃣ Автоматическая сборка проекта

— Убедитесь, что build проходит на каждом коммите

— Добавьте проверку на размер бандла (webpack-bundle-analyzer, size-limit)

— Сравнивайте метрики между коммитами (например, с CI compare или Bundlewatch)

➡️ npm run build, vite build, next build

2️⃣ Линтинг и форматирование

— Настройте ESLint (с правилами под ваш стек: React, TS и т.д.)

— Подключите Prettier с автоформатированием

— Проверяйте линт перед пушем через lint-staged и husky

➡️ eslint ., prettier --check .

3️⃣ Юнит- и интеграционные тесты

— Запускайте тесты на каждый PR

— Покрывайте бизнес-логику, хуки, компоненты

— Минимум: jest + @testing-library/react

➡️ jest --coverage, vitest, c8

4️⃣ Проверка типов

— Включите строгую проверку TypeScript

— Ошибки типов — повод не пускать PR в main

— Не забудьте проверить .d.ts и внешние типы

➡️ tsc --noEmit, tsc -p tsconfig.json

5️⃣ Проверка production-конфига

— Убедитесь, что .env.production загружается правильно

— Добавьте в CI проверку на наличие всех нужных переменных

— Прогоните Lighthouse/Pa11y, если хочется extra-модуль

➡️ dotenv-linter, dotenv-cli, pa11y-ci

6️⃣ Визуальные/регрессионные тесты (опционально)

— Снимайте скриншоты UI (Storybook + Chromatic, Percy)

— Ловите баги до ревью

— Можно запускать раз в день/неделю в cron-режиме

7️⃣ Бейджики и отчёты

— Добавтеь бейджи покрытия, билда и линта в README

— Публикуйте отчёты в MR/PR

— Настройте уведомления в Telegram/Slack

➡️ Codecov, Coveralls, GitHub Actions Summary

🐸 Библиотека фронтендера

#буст