Code review чеклисты

Code review — неотъемлемая часть процесса разработки, особенно при работе с современными фронтенд-фреймворками, такими как Quasar Framework. Эффективный процесс рецензирования кода повышает качество приложения, уменьшает количество багов и обеспечивает соответствие кода архитектурным стандартам проекта. В контексте Quasar особое внимание уделяется структурированию компонентов, управлению состоянием, маршрутизации и интеграции с UI-компонентами библиотеки.

Структура чеклиста для компонентов

1. Структура и читаемость кода

  • Каждый компонент должен иметь логичное разделение на шаблон (template), скрипт (script) и стили (style).
  • Использование script setup предпочтительно для упрощения синтаксиса и уменьшения количества boilerplate.
  • Имена компонентов должны быть осмысленными и отражать их функциональность.

2. Согласованность с архитектурой Quasar

  • Использование Quasar CLI и структуры проекта (src/components, src/pages, src/layouts).
  • Корректная интеграция с Quasar plugins и boot files.
  • Соответствие стилю Vue 3 Composition API и Vue Router 4 для маршрутизации.

3. UI и взаимодействие с пользователем

  • Проверка корректного использования компонентов Quasar (q-btn, q-input, q-dialog).
  • Адаптивность интерфейса и проверка работы на разных размерах экрана с использованием q-layout и q-page.
  • Соответствие стандартам UX: читаемые подписи, правильные цвета и отступы.

4. Логика и состояние

  • Проверка правильного использования reactive, ref и computed.
  • Корректная работа с Vuex или Pinia для глобального состояния.
  • Минимизация побочных эффектов и чистота методов.

Интеграция с API и внешними сервисами

  • Проверка корректного использования axios или fetch для запросов.
  • Обработка ошибок через try-catch и уведомления через Quasar Notify ($q.notify).
  • Валидация данных перед их отображением в компонентах.

Стандарты качества и производительности

  • Минимизация лишних рендеров компонентов через v-if и v-show там, где это необходимо.
  • Использование QSpinner и QSkeleton для отображения загрузки.
  • Логирование событий через console или специализированные плагины должно быть удалено перед слиянием в основную ветку.

Тестирование и документация

  • Наличие unit-тестов на критические компоненты с использованием Vue Test Utils или Vitest.
  • Проверка интеграционных тестов для страниц и маршрутов.
  • Комментарии и JSDoc для сложных методов и функций.

Чеклист рецензии Pull Request

  1. Назначение и описание

    • Четкое описание изменений и целей.
    • Привязка к задачам трекера (например, Jira или GitHub Issues).

  2. Изменения в коде

    • Проверка только релевантных файлов.
    • Минимизация изменений, не связанных с функционалом задачи.

  3. Стили и форматирование

    • Соблюдение стандартов ESLint и Prettier.
    • Проверка правильного использования scss или css в компонентах.

  4. Безопасность и обработка ошибок

    • Отсутствие утечек данных и XSS-уязвимостей.
    • Корректная обработка ошибок API и исключений.

  5. Документация и комментарии

    • Проверка, что новые функции и компоненты снабжены комментариями.
    • Актуальность README, если добавлены новые утилиты или плагины.

Дополнительные рекомендации

  • Использовать ветки фич вместо прямых коммитов в main или master.
  • Минимизировать использование any в TypeScript, если проект типизирован.
  • Согласование имен переменных и методов с общепринятой схемой проекта.
  • Регулярно синхронизировать ветку с основной для предотвращения конфликтов.

Этот систематизированный подход к code review позволяет поддерживать высокое качество проектов на Quasar Framework, снижает технический долг и облегчает командное взаимодействие при масштабировании приложений.

Оглавление