Фон

Мы начали наше путешествие по TypeScript где-то в прошлом году, где все началось (как и большинство проектов) с JavaScript в качестве основного языка для всех наших новых проектов. Позже я расскажу о миграции с PHP на NodeJS в отдельном посте. Имея хороший контроль над JavaScript, пришло время сделать следующий шаг, то есть TypeScript, и именно это мы сделали с совершенно новым проектом. Это стал первым проектом SAFE, полностью написанным на TypeScript (фронтенд тоже был React with Typescript!)

Перенесемся в 2020 год, все наши проекты теперь представляют собой чистый Typescript, и мы выбрали TypeScript в качестве стандартного языка для каждого проекта в Lucideus. С более чем 15+ микросервисами, обеспечивающими некоторые интенсивные операции в нашем продукте. Теперь, будучи стартапом, неотложными требованиями, гибкими поставками, бережливая разработка является частью нашей повседневной работы, и нам много раз приходилось немного жертвовать качеством кода, чтобы обеспечить ценность. Также было почти такое же количество раз, когда инженеры отклоняли требования, чтобы спроектировать его хорошо и не влекли за собой значительную часть «Технического долга».

Представляем ESLint

Изучая лучшие отраслевые практики для Javascript и Typescript, я обнаружил, что концепция линтинга является стандартной практикой для обеспечения качества кода, что привело меня к ESLint.

Мы начали тестировать его в нескольких проектах, и он дал отличные результаты, некоторые из них были фактическими логическими недостатками, которые были обнаружены при анализе потока кода и структуры. Как только мы освоились с правилами, мы захотели создать общую конфигурацию, которую любой разработчик в команде может использовать так же, как библиотеку plug-n-play, и именно так был представлен eslint-config-lucideus

eslint-config-lucideus

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

Включенные плагины:

  • Typescript-eslint: поскольку мы являемся стандартной командой Typescript, это было обязательным условием, чтобы убедиться, что исходные правила eslint применимы в мире Typescript.
  • Eslint-plugin-import: довольно популярный метод для принудительного применения некоторых стилей импорта модуля (order - хорошее самоуверенное руководство по стилю, которое мы хотели принять)
  • Eslint-plugin-функционал: это один из моих личных фаворитов. Мы пытаемся принять современную парадигму функционального программирования и отойти от традиционной объектно-ориентированной методологии, и это обеспечивает соблюдение некоторых хороших правил и практик функционального программирования для наших разработчиков (я уверен, что многие из наших разработчиков, читающие это, уже могут быть в ярости. здесь: P), но всем нам пришлось потратить много времени на освоение этих методологий, и этот плагин очень помог
  • Eslint-plugin-no-param-reassign-allow-reduce: в основном это делается для того, чтобы найти баланс между no-param-reassign eslint и тем, что он не поддерживает использование метода reduce(). С помощью этого небольшого плагина мы смогли добиться лучшего из обоих миров.
  • Eslint-plugin-no-secrets: Излишне говорить, что, будучи компанией, занимающейся безопасностью, это было несложно, чтобы наши разработчики не могли (непреднамеренно) хранить секреты и учетные данные в коде.
  • Eslint-plugin-react: наши интерфейсные приложения представляют собой чистые SPA на React, и для обеспечения качества на уровне представления это было идеальным дополнением к нашему пакету линтинга.
  • Eslint-plugin-react-redux: Redux был нашим драйвером управления состоянием для нашего кода React, и этот плагин гарантирует, что мы следуем стандартам (хотя мы выявили несколько ложных результатов, мы все еще находимся в процесс оценки этого)
  • Eslint-plugin-security: еще одна необходимая вещь для такой команды, как наша, поскольку она обеспечивает аккуратную безопасную практику кодирования в экосистеме JS.
  • Eslint-plugin-sonarjs: Я лично отношусь к этому плагину как к вишенке на торте, последнему уровню проверки соответствия отраслевым стандартным правилам SonarQube.

Защита от ворса

Мы в значительной степени полагаемся на VS Code как на нашу единственную IDE для всей нашей разработки, и, чтобы постоянно получать своевременную обратную связь в процессе кодирования, мы потребовали использовать ESLint VS Code Extension

Мы хотели включить это применение в наши рекомендации по запросам на извлечение (реализованные с использованием Jenkins) и хотели убедиться, что мы не вносим никаких ошибок линтинга. Однако проблема заключалась в том, что мы знали, что не будем чистыми в первый день знакомства, и именно это и произошло. Линтинг сообщил о большом количестве проблем как «ошибках», которые мы не могли исправить сразу. Единственный вариант, который у нас был, - это снизить их до «предупреждений» и следить за количеством предупреждений и их прогрессом. У всех команд были строгие инструкции следить за предупреждениями и не должно сильно увеличиваться. Это было достигнуто путем простого переопределения правил в .eslintrc.json файле службы (пример ниже).

Прогресс

Прошло около 4 месяцев с тех пор, как я ввел линтинг, и нам еще предстоит пройти долгий путь, расти как разработчики и улучшать качество нашего кода.

Объединив все наши микросервисы (около 15+ проектов), мы получили в общей сложности около 46 тысяч предупреждений, что стало для нас огромным открытием. Во время начальных спринтов мы сократили очень незначительно. Главное падение, которое вы видите, - это то, что мы обновили наши правила, особенно удалили правило без магических чисел из нашего списка, так как оно было слишком шумным и не дало много результатов. Благодаря постоянному обучению наших инженеров и внутренних сессий, мы теперь наблюдаем постепенное снижение количества предупреждений и значительное повышение качества нашего кода, что делает его единообразным, стандартизированным во всем.

Было бы здорово, если бы вы захотели опробовать нашу конфигурацию линтинга для любого из ваших проектов TS. Пожалуйста, не стесняйтесь вносить свой вклад и поднимать любые запросы на eslint-config-lucideus