Или список нескольких инструментов, которые я использую в каждом проекте

Свяжите свой код с Eslint

Eslint - самый популярный в настоящее время линтер javascript, он очень настраиваемый и настраиваемый. Почти каждый проект, над которым я работал последние пару лет, включал его. Линтинг может помочь вам найти ошибки при написании или следовать руководству по стилю. Существует множество предустановленных предустановок (настроек), которые можно просто подключить к вашему проекту. Мне больше всего нравится AirBnB, он очень строгий, когда вы к нему привыкнете, он действительно полезен.
Для настройки вам просто нужно установить пакет из NPM и создать файл .eslint в каталоге вашего проекта, в котором определите ваши правила и конфиги.

Мое предложение: настройте eslint как git pre-commit hook, чтобы никто не мог отправить непроверенный код в git. Также установите плагин для вашего текстового редактора / IDE, который помогает видеть и исправлять ошибки прямо в вашем редакторе во время его написания.

Тестирование с помощью Jest

Обычно тестирование - сложная и скучная задача, но Jest вроде как ее решает. Во-первых, Jest невероятно прост в настройке. Раньше я тратил дни, пытаясь настроить karma, jasmine, любую-тестовую библиотеку. С Jest у меня ушло около 15 минут, просто установите пакет NPM и создайте файл конфигурации. Jest запускает тесты параллельно, поэтому это довольно быстро, даже когда их много, в режиме просмотра сначала запускаются неудачные тесты и только те тесты, на которые влияет изменение кода.

Наверное, лучшая функция - это тестирование снимков. Jest делает снимок дерева компонентов React (или любые сериализуемые данные) и сохраняет его в файл, и каждый раз, когда компонент изменяется, Jest сравнивает сохраненный снимок с текущим снимком и дает вам обратную связь, если между ними есть разница. и что изменилось. Он также просит вас обновить снимок, если вы согласны с изменениями.

Мое предложение: всегда держите jest в режиме просмотра, чтобы вы могли сразу видеть ошибку, так же, как eslint, добавьте его в качестве хуков перед фиксацией и не разрешайте запускать в продакшн, если нет определенного процента покрытия.

Проверка типа Flow

Flow - это средство проверки статического типа, что означает, что он добавляет типы в JavaScript, аналогичные таким языкам, как Java или C. Что Flow делает, это пытается прочитать и понять ваш код на глубоком уровне и дает обратную связь на основе этого. Например, если вы попытаетесь использовать несуществующий метод / свойство класса, вы увидите ошибку. Наличие типов очень помогает при рефакторинге в больших приложениях, и когда ваш код на 100% покрыт типами, исключений времени выполнения не возникает. Также у вас есть актуальная документация из коробки.
Flow - это не компилятор, как TypeScript, это просто средство проверки, вы можете вводить его файл за файлом, добавляя комментарий «// @flow» в верхней части каждого файла, который нужно проверить.

Мое предложение: у Atom есть плагин потока, который показывает типы при наведении, дает предложения и показывает встроенные ошибки. Возможно, есть и плагин для вашего редактора.

Программа форматирования Prettier

Форматирование кода, возможно, не самое важное, но я видел, как оно создает проблемы в больших командах, когда у всех разные взгляды на это. Prettier очень самоуверен и делает все за вас. Он неплохо работает с ES2017, JSX и Flow.

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

Позволяет инструментам работать на вас

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