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