Почему я создал шаблон Create React App, в котором используются TypeScript и инструменты статического тестирования, такие как eslint, prettier, husky, lint-staged, а также руководство по стилю Airbnb.
Я сделал Создать шаблон приложения React с помощью TypeScript и конфигурации ESLint, используя руководство по стилю Airbnb. Я также включил другие инструменты и скрипты для статического тестирования.
В то время я не мог найти актуальный шаблон, который собирал бы все эти вещи одновременно. Мне не нравилось решать эту проблему каждый раз при запуске нового проекта. Итак, я решил опубликовать свой собственный шаблон, которым я делюсь в надежде, что он может быть полезен другим и улучшен.
Теперь вы можете использовать этот шаблон для начальной загрузки вашего следующего приложения React с помощью:
npx create-react-app my-app --template @jpreagan/typescript # or yarn create react-app my-app --template @jpreagan/typescript
Загляните в проектную документацию для дальнейших инструкций.
В 1995 году JavaScript был создан всего за десять дней. Мы видели, как он сильно изменился за последние несколько десятилетий. И хотя было много изменений, JavaScript также замечательно совместим с предыдущими версиями.
JavaScript был разработан, чтобы быть гибким и подходящим для начинающих. Типы приложений, которые мы пишем в настоящее время, вероятно, намного сложнее, чем, как я полагаю, имели в виду ранние архитекторы.
Эта свобода, которую имеет JavaScript при отсутствии типов, делает возможной быструю разработку, но за эту снисходительность приходится платить. По мере того, как наши приложения становятся надежными, потребность в проверке типов становится все более очевидной.
Открытый исходный код Microsoft в 2012 году, TypeScript решает эту проблему, привнося строго типизированную систему в JavaScript.
Несколько лет назад на JSConf штатный инженер-программист Бри Бунге выступила с докладом, в котором рассказала об этой проблеме в Airbnb. Она показала внутреннее исследование с удивительными результатами. В ходе исследования было установлено, что 38% ошибок, достигших рабочей версии, можно было бы предотвратить с помощью TypeScript.
Другое исследование показало, что статическая система типов, такая как TypeScript или Flow, могла обнаружить не менее 15% ошибок JavaScript в базах кода с открытым исходным кодом на GitHub.
Это было бы в нижней части оценки. Фактическая эффективность TypeScript усиливается великой силой: языковой службой. TypeScript документирует и улучшает поиск и завершение кода в редакторе.
Теперь мы можем перемещаться по нашей кодовой базе и собирать ценную самодокументирующуюся информацию так же, как это делали разработчики других строго типизированных языков, таких как Java, десятилетиями.
Кривая обучения не очень крутая, в зависимости от того, кого вы спросите, но требуется некоторое время, чтобы стать очень опытным в этом. Я только начал свое путешествие по TypeScript. Вы должны с чего-то начать. Зато какое удовольствие им пользоваться!
Есть много способов написать JavaScript, и Руководство по стилю Airbnb — один из них.
Инженеры Airbnb считают это в основном разумным. Другие находят его довольно строгим и даже немного агрессивным.
Я обнаружил, что, приняв его в последних проектах, я стал лучшим разработчиком. Это может сделать ваш код более читабельным и простым в обслуживании.
Кроме того, требуется немало усилий, чтобы придумать собственное руководство по стилю и пользовательскую конфигурацию ESLint. Давайте начнем с руководства по стилю Airbnb, прочной основы, а затем примем или откажемся от различных правил из этой базы, отражающих наши текущие потребности проекта.
Вы можете запустить ESLint из командной строки с помощью:
npm run lint
И вы также можете попытаться позволить ESLint исправить как можно больше с помощью:
npm run lint -- --fix
Кому-то нравятся точки с запятой, а кому-то нет. Тем не менее, я предлагаю вам выбрать один и поддерживать его согласованность в единой кодовой базе. Пробелы и точки с запятой — это решенная проблема с prettier, но нам нужно убедиться, что prettier хорошо работает с ESLint.
Вот почему я включил eslint-config-prettier, который в настоящее время является предпочтительным способом сделать это. Вы заметите, что в .eslintrc.json красивее идет последним, так что это хороший товарищ по игре с ESLint.
Мы не полагаемся на редактор кода для таких вещей, как форматирование и линтинг, потому что не все используют один и тот же редактор и, возможно, не настроили его одинаково.
Вы можете и должны установить как минимум расширения для своего редактора кода для ESLint, но нам нужен способ тестирования вещей вне редактора, чтобы мы все были на одной странице в совместных усилиях.
Вы можете отформатировать код из командной строки с помощью:
npm run format
Или, если вы просто хотите проверить форматирование без фактического написания:
npm run check-formatТочно так же мы можем проверить типы с помощью:
npm run check-typesЭто пригодится для следующей функции: использование Husky для создания git-хуков перед фиксацией.
Мы также можем запускать линтинг, форматирование, проверять типы и статус сборки параллельно с:
npm run validateНаконец, мы можем использовать Husky для создания перехватчиков git перед фиксацией. Проверьте ./.husky/pre-commit, и вы заметите, что он работает как check-types, так и lint-staged.
Это означает, что каждый раз, когда мы делаем коммит, он сначала проверяет типы. Затем он запустит довольно полезный инструмент, lint-staged для наших подготовленных файлов, который вызовет задачи в .lintstagedrc. Lint-staged проанализирует и отформатирует подготовленные файлы.
Если есть проблема с типами, линтингом или форматированием, коммит не будет выполнен. Эта система значительно затрудняет попадание сломанного кода в наш репозиторий.
В конце концов, это всего лишь инструменты, помогающие нам поддерживать лучшую кодовую базу. Анализ статического тестирования — это базовый уровень, на котором держится наша структура тестирования. Верхние уровни включают модульное, интеграционное и сквозное тестирование.
А теперь иди вперед и сделай что-нибудь сказочное!
Если у вас есть какие-либо отзывы или вопросы относительно того, как я могу улучшить это программное обеспечение, пожалуйста, дайте мне знать. Я здесь, чтобы учиться и помогать другим.
