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

Существует много библиотек, которые мы можем использовать в зависимости от приложения, которое мы создаем, но сегодня я сосредоточусь на инструментах, более подходящих для сканирования внешних приложений, таких как ESLint и SonarQube. .

ESLint – это утилита для анализа Javascript с открытым исходным кодом, которая анализирует наш код и находит в нем проблемные шаблоны. Это позволяет вам применять набор стандартов стиля, форматирования и кодирования в вашей кодовой базе. Чтобы настроить его в своем приложении, вам необходимо установить его, используя:

npm install -g eslint

После этого вам нужно настроить некоторые конфигурации для работы. Вы можете посмотреть на https://eslint.org/docs/user-guide/getting-started.

SonarQube – это инструмент для проверки кода, который выявляет ошибки, уязвимости и неточности кода в вашем приложении. Вы можете довольно легко интегрировать его в свой рабочий процесс, и это очень удобный инструмент, потому что он дает нам визуальное отображение проблем в нашем коде. Чтобы использовать его в своем приложении, следуйте инструкциям в https://docs.sonarqube.org/latest/setup/get-started-2-minutes/.

Почему нам нужно использовать обе библиотеки?

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

С другой стороны, SonarQube предоставляет полный обзор общего состояния нашего кода, постоянно проверяет качество кода и отслеживает его сложность. Оба они имеют интеграцию с IDE, например ESLint и SonarLint, для ESLint и SonarQube соответственно.

Поскольку у них обоих разные правила, было бы неплохо найти способ импортировать задачи ESLint в SonarQube, и на самом деле мы можем это сделать.

Методические рекомендации

Если вы правильно установили и следовали инструкциям, вы можете запустить ESLint для своего внешнего приложения с помощью следующей команды в командной строке:

eslint . --ext .js,.ts

Запустится линт и через пару секунд результаты анализа отобразятся в командной строке. Таким же образом, если вы все правильно настроили для SonarQube, вы сможете сканировать свой код с помощью следующей команды:

sonar-scanner -Dsonar.projectKey=myproject

Через пару секунд вы увидите результат анализа в командной строке. Теперь вы можете открыть URL-адрес хоста анализа SonarQube, который вы настроили ранее, и вы увидите обзор общего качества вашего кода.

Теперь, чтобы импортировать проблемы ESLint в сканер SonarQube, сначала вам нужно запустить lint и записать результат в файл. Файл должен быть в формате JSON, чтобы SonarQube мог его принять.

eslint . --ext .ts,.js -f json -o eslint_report.json

После этого в файле sonar-project.properties, файле с конфигурациями SonarQube, вы должны добавить новую конфигурацию с путем для вашего json-файла отчета ESLint.

sonar.eslint.reportPaths = path_to_file/eslint_report.json

Если вы снова запустите сканер, вы заметите, что он импортирует проблемы из вашего отчета ESLint. Однако эти проблемы не будут отображаться на панели обзора SonarQube, поскольку эта библиотека имеет некоторые ограничения в отношении импорта внешних задач. Вы можете более подробно ознакомиться с https://docs.sonarqube.org/latest/analysis/generic-issue/.

Итак, в основном, что нам нужно сделать, это преобразовать задачи ESLint в объект задачи, который SonarQube сможет интерпретировать.

К счастью, ESLint позволяет нам создавать и распространять собственный модуль форматирования для изменения формата отчета ESLint. Принимая это во внимание, нам просто нужно создать средство форматирования, и для этого мы будем использовать следующий скрипт.

Что касается форматировщиков, дополнительную информацию можно найти в https://eslint.org/docs/developer-guide/working-with-custom-formatters#working-with-custom-formatters.

После этого вам нужно снова запустить команду linting и передать только что созданный пользовательский модуль форматирования.

eslint . --ext .ts,.js -f ./sonarqube_formatter.js -o eslint_report.json

Последнее, что нам нужно сделать перед повторным запуском сканера сонара, — это добавить новую конфигурацию в файл sonar-project.properties.

sonar.externalIssuesReportPaths = path_to_file/eslint_report.json

После этого вы можете снова запустить сканер сонара, и на панели обзора SonarQube проблемы ESLint будут отмечены тегом ESLINT.

Заключение

Мне показалось интересным, что мы можем объединить лучшее из двух миров, имея настраиваемые правила ESLint и возможность анализировать их более эффективным способом с помощью SonarQube :)