React и React Native — отличные фреймворки для быстрой разработки! Но за это приходится платить: JavaScript.

JavaScript — отличный язык. Но тот факт, что он настолько вседозволен, дает вам возможность делать абсолютно все, что вы хотите, и так, как вы хотите.

Вы можете подумать, что быть свободным — это хорошо. Конечно, у этого есть некоторые преимущества, но оказывается, что вы можете захотеть наложить на себя некоторые ограничения, если вы не хотите полностью потерять контроль, когда ваша кодовая база разрастется.

Одним из величайших дополнений к JavaScript является TypeScript. Это заставляет вас самостоятельно документировать свой код и дает вам некоторые ограничения на плохие шаблоны.

Но эта статья не о TypeScript. Сегодня я покажу вам инструмент, который очень поможет вам автоматически находить антипаттерны в вашем коде.

СонарКьюб

SonarQube позволяет всем разработчикам писать более чистый и безопасный код.

Это их заголовок.

SonarQube — это платформа с открытым исходным кодом, разработанная SonarSource для непрерывной проверки качества кода для выполнения автоматических проверок со статическим анализом кода.

Но как это работает ? По сути, вы запускаете сервер SonarQube на своем компьютере или на удаленном сервере, и он будет сканировать ваш код, чтобы обнаруживать ошибки, запахи кода и уязвимости безопасности при каждом нажатии.

Когда я впервые запустил его, я был поражен тем, насколько он точен и как мало ложных срабатываний он сообщил. Его очень легко подключить к конвейеру CI, и он поддерживает до 30 языков программирования (включая TypeScript).

У них есть бесплатный уровень с открытым исходным кодом, и мы посмотрим, как настроить его на вашем компьютере.

Установка и настройка

Это касается только настройки macOS, но вы можете легко найти, как это сделать в Windows, следуя официальной документации наhttps://docs.sonarqube.org/

Условие:

  • Установка Docker на вашем компьютере
  • Установленный Homebrew: https://brew.sh/

Сначала вам нужно запустить сервер SonarQube с помощью docker. Вы можете сделать это с помощью следующей команды:

docker run -d —-name sonarqube -e SONAR_ES_BOOTSTRAP_CHECKS_DISABLE=true -p 9000:9000 sonarqube:latest

Это запустит сервер на порту 9000 вашей машины. Затем вы можете открыть браузер и посетить http://localhost:9000/. Вы попадете на эту страницу:

Просто нажмите «Войти» и введите следующие учетные данные:

имя пользователя: admin
пароль: admin

На панели инструментов создайте новый проект и назначьте ему Ключ проекта и Отображаемое имя (обычно оба названия вашего проекта).

Затем дайте имя вашему токену (вы можете использовать то же имя, что и раньше) и сгенерируйте новый токен. Оставьте это на потом и нажмите «Продолжить».

Теперь, когда наш проект настроен на SonarQube, мы настроим наш проект React.

Откройте проект в своем любимом редакторе кода и создайте в корне новый файл с именем sonar-project.properties.

Этот файл поможет эхолоту-сканеру узнать, что и как тестировать. В этот файл просто поместите следующий код, заполнив его своими значениями.

sonar.projectKey=my-project
sonar.sources=.
sonar.host.url=http://localhost:9000
sonar.login=<Your token>
sonar.exclusions=.github/**, .vscode/**, android/**, assets/**, build/**, ios/**, node_modules/**
sonar.projectName=deevent
sonar.projectVersion=1.2

Обратите внимание, что вы захотите исключить определенные папки из своего анализа, такие как node_modules или ios/android, если вы сканируете проект React Native. (сонар.исключения)

Вот и все ! Теперь нам нужно запустить сонар-сканер. Сначала установите его через доморощенный

brew install sonar-scanner

И когда это будет сделано, просто запустите команду sonar-scanner из корня вашего проекта. Это займет некоторое время, и когда это будет сделано, снова зайдите на панель инструментов, и вы увидите результаты теста.

Вы увидите несколько предложений по улучшению качества кода и удобства сопровождения. Наиболее интересными для меня были «запахи кода». Это части кода, которые технически не являются неправильными, но которые могут вызвать ошибки при рефакторинге или редактировании в будущем.