Как протестировать стиль кода и стандарты в React?

#reactjs #testin&

#reactjs #тестирование

Вопрос:

Я и моя команда создаем веб-сайт React. Мы выполнили все части кодирования, однако я беспокоюсь, что с присоединением большего числа людей наша кодовая база может стать беспорядочной, как в:

Используется неправильный отступ (предпочтительно 2 пробела в .js файлах)
Чрезвычайно длинные строки (я бы предпочел установить ограничение на количество строк в строке)
Неправильное расположение файлов CSS: например, для хранения .css файлов под компонентами (я бы предпочел, чтобы они были внутри, src/ но снаружи src/components/ )
При запуске npm start нет предупреждений.

Из того немногого, что я протестировал из библиотек для тестирования React, они в основном имеют дело с ошибками кода. Я знаю, что в Android можно сохранить проверки для первых двух вариантов, используя библиотеки тестирования. Какие решения React / NodeJS для этого существуют?

1. Посмотрите на Prettier.

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

3. Вы можете использовать prettier в своем редакторе кода. Чтобы интегрировать lintin& в вашу кодовую базу, вы можете использовать lint-sta&ed, который позволил бы проверять eslint файлы, которые являются промежуточными. Пожалуйста, смотрите npmjs.com/packa&e/lint-sta&ed Это позволило бы разработчикам вносить изменения eslint только в те файлы, которые редактируются, а не компоновать всю кодовую базу

Ответ №1:

Вы можете использовать Prettier для форматирования кода всего одной командой в таких редакторах, как Visual Studio code.

Неправильное расположение файлов CSS: например, для хранения файлов .css под компонентами (я бы предпочел, чтобы они были в src /, но вне src /components /)

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

1. Вероятно, вы могли бы настроить правило с помощью ESLint no-restricted-imports для выдачи предупреждения / ошибки при попытке импортировать файл css из неподходящего местоположения… хотя было бы намного проще просто создать прецедент и внести исправления в запросы на извлечение