Настройка React проекта с TypeScript и EPAM UUI

Сегодня я стартовала новый проект на работе и хочу зафиксировать некоторые полезные конфигурации и мелочи, которые помогут быстрее стартовать в следующий раз. Проект — веб-приложение на React с использованием TypeScript и библиотеки компонентов EPAM UUI.

Я пишу это в первую очередь как справочник для себя в будущем, но если у вас похожий стек, эти заметки могут оказаться полезными.

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

EPAM UUI предоставляет шаблон на основе Vite для быстрого старта проекта. Чтобы создать новый проект, выполните:

npx -- degit@latest https://github.com/epam/UUI/templates/uui-vite-template my-app

Моё любимое — конфигурации

Абсолютные пути импортов

Чтобы сделать импорты более чистыми и удобными в поддержке, настроим абсолютные пути импортов. Это позволит импортировать файлы из директории src без использования относительных путей.

Обновляем tsconfig.json:

{
    "compilerOptions": {
    "baseUrl": ".",
    "paths": {
        "*": ["./src/*"]
    // ... other options
    }
}

Устанавливаем плагин vite-tsconfig-paths

npm install vite-tsconfig-paths -D

Добавляем в vite.config.ts использование этого плагина

    import tsconfigPaths from 'vite-tsconfig-paths';

    export default {
    // other configurations
        plugins: [react(), tsconfigPaths(), ...other plugins ]
    }

Теперь вместо написания:

import { ROUTES } from '../../../shared/constants/urls';

Мы можем просто использовать:

import { ROUTES } from 'shared/constants/urls';

Сортировка импортов

Автоматически организуем наши импорты с помощью eslint-plugin-simple-import-sort.

Установите плагин:

npm install --save-dev eslint-plugin-simple-import-sort

Обновите конфигурацию .eslintrc:

    rules: {
    // другие правила
    'simple-import-sort/imports': [
    'warn',
{
    groups: [
    ['^react', '^@?\\w'],
    // Внутренние пакеты
    ['^(@epam)(/.*|$)'],
    // Импорты с side-effects
    ['^\\u0000'],
    // Импорты из наших модулей
    ['^(pages|shared|widgets)(/.*|$)'],
    // Импорты родительских директорий. Помещаем `..` в конец
    ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
    // Другие относительные импорты. Помещаем импорты той же директории и `.` в конец
    ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
    // Импорты стилей
    ['^.+\\.s?css$'],
    ],
},
    ],
    'simple-import-sort/exports': 'warn',
}

Измените groups как подходит для проекта.

Настройте VS Code для автоматической сортировки импортов при сохранении:

Откройте настройки VS Code (JSON), нажав Cmd+Shift+P (Mac) или Ctrl+Shift+P (Windows/Linux) и найдя “Preferences: Open User Settings (JSON)”

Добавьте следующую конфигурацию:
```
{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit",
    }
}
```

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

Git хуки с Husky и проверкой покрытия тестами

Настраиваем запуск связанных тестов и проверки покрытия новых файлов с помощью husky.

// TODO Добавить про настройку husky и добавление скриптов