Статический анализ помогает разработчикам писать более чистый и безопасный код. Он может вылавливать ошибки, исправлять уязвимости, анализировать качество вашего кода и проверять безопасность. Как руководитель группы в First Line Outsourcing я отвечаю за качество, стабильность и безопасность кода.

В этой статье мы рассмотрим один из инструментов для выполнения статического анализа кода - SonarQube и то, как настроить его для приложений JavaScript.

Требования

В качестве примера я буду использовать простое приложение TypeScript Node.js, но вы можете использовать любое из ваших существующих приложений JavaScript: Angular, React, Vue и т. Д.

Введение

SonarQube - это инструмент автоматического статического анализа кода, который обнаруживает ошибки, уязвимости и запахи кода. Он поддерживает 27 языков, включая JavaScript и TypeScript. Этот инструмент можно легко интегрировать в существующий рабочий процесс, чтобы обеспечить непрерывную проверку кода во всех ветвях проекта и запросах на вытягивание. В руководстве показано, как запустить статический анализ локально, чтобы исправить проблемы перед проверкой или тестированием кода.

Установка

Вы можете скачать бесплатную версию SonarQube от сообщества на свой компьютер или использовать контейнер Docker.

docker-compose.yml

version: '3'
services:
  sonarqube:
    image: sonarqube:latest
    ports:
      - '9000:9000'
      - '9092:9092'

Используйте эти команды для запуска или остановки контейнера:

docker-compose -f docker-compose.yml up -d
docker-compose -f docker-compose.yml down

После запуска вы можете открыть WEB-приложение на http: // localhost: 9000. Используйте учетные данные admin / admin для входа в систему.

Настроить проект

Прежде всего, вы должны создать файл конфигурации в корневом каталоге вашего проекта.

sonar-project.properties

sonar.projectKey=name-of-the-project
sonar.projectName=name-of-the-project
sonar.projectVersion=1.0
sonar.language=ts
sonar.sources=src
sonar.sourceEncoding=UTF-8
sonar.exclusions=src/**/*.test.ts sonar.test.inclusions=src/**/*.test.ts sonar.coverage.exclusions=src/**/*.test.ts,src/**/*.mock.ts,node_modules/*,coverage/lcov-report/* sonar.javascript.lcov.reportPaths=coverage/lcov.info sonar.testExecutionReportPaths=coverage/test-reporter.xml

Вы можете использовать js как sonar.language и расширение * .js для всех файлов .

Установите sonarqube-scanner, чтобы иметь возможность начать анализ.

npm install --save-dev sonarqube-scanner

Также добавьте сценарий в корневой каталог вашего проекта.

sonar-project.js

const sonarqubeScanner = require('sonarqube-scanner');
sonarqubeScanner(
  {
    serverUrl: process.env.SONAR_SERVER || 'http://localhost:9000',
    token: process.env.SONAR_TOKEN || '',
    options: {}
  },
  () => process.exit()
);

Итак, теперь вы можете начать анализ с помощью команды node sonar-project.js.

Этот скрипт запускает анализ асинхронно и не ждет результата. Это означает, что его нельзя использовать для ваших решений CI / CD. Но сценарий достаточно хорош для запуска локально.

Если вы собираетесь интегрировать SonarQube в рабочий процесс CI / CD, вы можете использовать sonarqube-verify.

npm install --save-dev sonarqube-verify

package.json

{
  ...
  "scripts": {
    ...
    "sonarqube-verify": "sonarqube-verify"
  }
}

Эта библиотека ожидает результата и ПРОЙДЕН или НЕ ПРОЙДЕН задание. Кроме того, он может отправлять отчет на удаленный сервер с установленным SonarQube, если вы хотите интегрировать его в свои решения CI / CD.

Примеры

Приступим к анализу пустого проекта и посмотрим, как он выглядит в WEB-приложении.

Поскольку в нем нет никаких проблем, SonarQube помечает его как ПРОШЕЛ. Давайте сымитируем некоторые задачи и посмотрим на результат.

В приведенной ниже функции используется метод Array.map (…), но не обрабатывается результат. Это означает, что Array.map (…) можно заменить на Array.forEach (…), и код не будет создавать бесполезный массив и использовать дополнительное пространство для хранения.

export function example1() {
  const array = [1, 2, 3];
array.map(console.log);
  return array;
}

После перезапуска анализа мы видим, что наш проект помечен как FAILED.

SonarQube рассчитывает статус в соответствии с количеством проблем и размером проекта. Из-за небольшого размера нашего проекта эта простая проблема приводит к статусу FAILED.

Моя любимая часть этого инструмента статического анализа - это то, как он показывает ваши проблемы и объясняет, почему вы их видите, например:

Теперь давайте имитируем пример запаха кода. В приведенной ниже функции дважды используется одно и то же имя. Это плохой стиль кода.

export function example2() {
  const number = [1, 2, 3];
number.forEach(number => console.log(number));
}

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

Советы

  • Статический анализ кода может помочь вам сохранить ваш код чистым и безопасным
  • Инструменты статического анализа кода, такие как SonarQube, легко интегрировать в свои проекты.
  • Его можно интегрировать в ваши решения CI / CD.
  • Отчеты SonarQube могут отображать покрытие тестами, вам просто нужно запустить тесты перед анализом и включить флаг покрытия

Вывод

Теперь вы узнали о статическом анализе кода и о том, как настроить один из инструментов, обеспечивающих эту функциональность - SonarQube. Здесь вы можете найти пример из статьи. Мы в First Line Outsourcing используем его как инструмент, который помогает нам поддерживать качество нашего кода на высоком уровне.

Не стесняйтесь обращаться ко мне через электронную почту, Instagram, LinkedIn или Facebook.

Анастасия Живаева

Ведущий разработчик Full Stack JavaScript в
First Line Outsourcing

Двигайте свой бизнес вперед
Разработка веб-сайтов и мобильных устройств, помогающая компаниям достигать своих целей.

Instagram
LinkedIn