VSCode + Remote-Containers + Codeclimate

Image for post
Image for post

Каждый, кто пишет код, знает, что лучший код — это код, который не написан! Но как говорится, все не совершенны и нам приходится писать код. Но вот как помочь улучшить код, а затем следить за качеством кода, в вашем проекте? Этим вопросом постоянно задаются люди, которым не безразлично качество кода. Сейчас, на рынке много разных OSS решений для анализа качества кода, но в этом блог посте, я расскажу об интеграции бесплатного и очень удобного инструмента! Встречайте Code Climate!

Так как я пишу код в VSCode с использованием Remote-Containers, значит я расскажу о том, как связать эти отличные инструменты воедино и получить от этого пользу.

Немного предыстории, как я пришел к этому?

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

  • Насколько сложно понять код? Cognitive Complexity

Я начал искать в интернете текущие решения, но по старой памяти, вспомнил про codeclimate и решил его попробовать. Добавил свой OSS проект в codeclimate дашборду.

Image for post
Image for post
Тут уже баджик с “B” маркером, так как убрал душок из кода и немного уменьшил дублирование

Ну и результат не заставил ждать, и репо получил маркер “C” (он желтенький) так как у меня было 17 мест с дублированием кода и 2 места с кода с душком. Вообще имеются следующие маркеры, в порядке убывания качества кода - A, B, C, D, F.

Из каких шагов состоит билд процесс на codeclimate.com?

Image for post
Image for post
Стандартные шаги билд процесса
  1. Производится клонирование репо

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

Что удивило?

Очень удивило что по каждой найденной проблеме, ребята высчитывают время, необходимое для исправления. Это прям очень круто! И кстати букву качества они высчитывают именно исходя из суммарного времени на исправление проблем. Таким образом в проекте с большим количеством строк кода, эти цифры могут расти, а буква качества уменьшаться в сторону F. Так что чем раньше вы подключите этот сервис, тем быстрее начнете исправлять ситуацию, не доводя ее до абсурда, когда останется все выбросить и написать заново.

Как добавить значок codeclimate в ваш репо?

Image for post
Image for post
Вот так выглядит страница получения баджика

Для перехода на эту страницу, вам надо перейти по следующему URL https://codeclimate.com/github/название_организации_или_ваш_ник/название_репо/badges

Или же перейти на страницу вашего репозитория на codeclimate -> Repo Settings -> Badges.

Основные параметры качества, которыми руководствуется codeclimate

  • Churn — показатель качества, часто изменяемых файлов на протяжении времени.

Какие языки поддерживаются?

Следующие языки поддерживаются:

  • Ruby

Довольно внушительный список! Ребята молодцы! Все популярные языки тут представлены.

Сервис — это хорошо, но локальный анализ не помешает

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

Как известно такие проверки не просты и дороги по ресурсам и времени, они не могут запускаться также часто, как и линтер (фактически на лету). Так как для действительно хорошего анализа, нужно просмотреть не одну строку и не один файл, а весь проект.

И для этой цели есть возможность запустить codeclimate локально в докерах для вашего проекта.

Так как я разрабатываю в VSСode + Remote-Containers — это не составит труда.

Сервис codeclimate локально — это реально!

Далее, по шагам будет рассмотрен процесс запуска сервиса codeclimate локально в ансамбле с VSCode.

Подготовка

У codeclimate есть один недостаток — это образы инструментов structure и duplication.

Каждый из этих образов весит ~1.9 Гигабайта в сжатом виде и при распаковке занимают по 5 Гигов каждый. Сначала меня это испугало, но затем подумал, ведь это все переиспользуется и никаких моментов, кроме размера пугать не должно. Многие сетуют, что было бы круто разделить образа по языкам, но пока все инструменты анализа собраны воедино.

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

Для скачивания образов необходимо выполнить следующие команды, на вашей хост машине:

Команды для скачивания докер образов, которые нужно выполнять по одной за раз

И не переживайте! Самое главное выполнять эти команды по очереди! Так как после скачивания первого образа codeclimate-structure вы скачаете 1,9 Гб (вы знаете, что докер он слоистый), а значит, при скачивании codeclimate-duplication у вас будут скачаны недостающие слои, что в целом будет занимать ~100–200 Мб, что очень приятно. В реалии получается вы не качаете 4 гигабайта из интернете, в всего ~2 Гб. Далее скачиваете codeclimate образ и на этом первый этап подготовки заканчивается.

Настройка папки .devcontainer

Нам нужно затронуть Dockerfile, так как понадобится поставить докер клиент в докер, а также добавить настройки в runArgs файла devcontainer.json

Начнем с .devcontainer/Dockerfile и добавим установку докер клиента.

Шаг для установки docker-ce клиента в Dockerfile

Общий вид докер файла, после добавления шага для установки docker-ce, вы можете поглядеть тут.

Теперь нужно добавить доступ докер клиенту в нашем докере для разработки, к демону докера, что запущен на нашей хостовой машине. Делается это через проброс сокета в качестве volume из хост машины в докер VSCode, для разработки. Нужно добавить следующую настройку в runArgs - параметр файла .devcontainer/devcontainer.json.

Image for post
Image for post
Установка параметров запуска для создания образа VSCode для разработки через Remote-Containers

Так же можно сразу указать переменную окружения CONTAINER_TIMEOUT_SECONDS=1800, так как это нужно для увеличения времени, в течении которого может работать любой из инструментов codeclimate.

Далее нужно указать команду по установке и настройке враппера codeclimate, после создания нашего контейнера VSCode.

Image for post
Image for post
Задействуем postCreateCommand ключ для выполнения команд, на уже запущенном докере VsCode.

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

Полную версию .devcontainer/devcontainer.json, можно увидеть тут.

Установка codeclimate враппера внутрь контейнера

Для начала нужно написать команду, что поможет установить codeclimate враппер.

Я добавил папку scripts, в которой сложил все, что мне было необходимо.

В этой папке, присутствует скрипт для установки враппера:

Скрипт для установки враппера codeclimate

Но перед тем как выполнить этот скрипт, нужны проверки того, что в системе присутствуют образы codeclimate, иначе процесс установки будет затянут на N минут или часов, в зависимости от скорости интернета. Так как еще раз напоминаю, что образы не маленькие ~2 Гб в целом.

Для этих целей был написан файл чекера наличия образов в системе и я использовал JavaScript.

Вот так выглядит функция проверки наличия скачанных образов в хостовой системе

Так же в этом скрипте производится проверка на то, что команда выполняется внутри докера. Среди множества способов проверок, что есть в интернете, использовал проверку на наличие файла /.dockerenv и это отлично работает.

В итоге в package.json была добавлена следующая команда:

Image for post
Image for post
Команда для проверки требований и установки враппера.

Теперь можно использовать команду npm run codeclimate:install для установки враппера.

Ремарка: С самого начала, я хотел все сделать на JavaSсript, без использования sh файла, но проблема была с последней командой в setup.sh. Каким бы я способом ее не запускал, процесс просто зависал и никакого stdout не было. Использовал и exec и spawn, но ничего не получилось. В итоге сделал как проще.

Запуск анализа кода

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

Но для того, чтобы успешно запустить анализ кода внутри докер образа VSCode, нужно знать реальный путь к примонтированной в докер папки репозитория. Все дело в том, как построена работа codeclimate. А она держится на временных запусках образов с монтированием папок хост машины внутрь этих образов. Соответственно, пути внутри Docker образа VSCode не подойдут.

Для определения пути из системы, был написан следующий скрипт scripts/volumes/inspect.js:

Тут немного наименование переменных хромает, вместо volume тут containers должны быть

Данный скрипт, проходится по всем запущенным контейнерам, так как используется “docker ps” и получает все Mounts параметры запущенных контейнеров. Далее фильтрует вывод по включению строки mad-fake-slack и находит json с описанием монтирования папок в докер, где в Source поле — находится реальный путь. И если находится путь папки монтирования, с упоминанием mad-fake-slack, то этот путь возвращается в stdout, при помощи console.log(). Если не находится, то скрипт завершает процесс с кодом 1, что должно прервать цепочку команд.

В итоге для запуска анализа получается вот такая вот команда:

Команда запуска анализа кода посредством codeclimate

В результате выполнения такой команды, будет создан html отчет в папке reports, которую я специально создал для складирования отчетов.

Удобные команды

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

Список команд для запуска анализа с результатами в различных форматах

Теперь благодаря команде codeclimate:analyze, вы можете указать переменную окружения REPORT_FORMAT=html или REPORT_FORMAT=text или REPORT_FORMAT=json, перед командой и получить вывод отчета в указанном формате.

REPORT_FORMAT=html npm run codeclimate:analyze # запуск анализа и вывод отчета в html формате в папку reports с названием в виде текущей даты и времени

REPORT_FORMAT=json npm run codeclimate:analyze # запуск анализа и вывод отчета в json формате в папку reports с названием в виде текущей даты и времени

REPORT_FORMAT=text npm run codeclimate:analyze # запуск анализа и вывод отчета в text формате в папку reports с названием в виде текущей даты и времени

Отчет в html формате

Отчет выглядит следующим образом

Вот так выглядит отчет по моему репо в html.

В отчете есть ссылки на пояснения, по каждой найденной проблеме, так что даже неискушенный человек, сможет понять и при желании исправить найденные проблем. Одним словом, отчет очень информативен.

Заключение

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

Спасибо за прочтение данной статьи! Все, о чем было описано в данной статье, я активно использую в OSS проекте mad-fake-slack.

Mad Devs Blog — Custom Software Development Company

Engineering your growth. Mad Devs is the team behind large scalable projects, globally.

Alexander Vishnyakov

Written by

«Переписывание с нуля гарантирует лишь одно — ноль!» — Мартин Фаулер

Mad Devs Blog — Custom Software Development Company

Mad Devs is a Cambridge-headquartered IT company developing enterprise-level software solutions for finance, transportation & logistics, security, edtech, and advertising industries. For more information about us, please browse our website: https://maddevs.io/

Alexander Vishnyakov

Written by

«Переписывание с нуля гарантирует лишь одно — ноль!» — Мартин Фаулер

Mad Devs Blog — Custom Software Development Company

Mad Devs is a Cambridge-headquartered IT company developing enterprise-level software solutions for finance, transportation & logistics, security, edtech, and advertising industries. For more information about us, please browse our website: https://maddevs.io/

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store