Faire des revues automatiques de code avec Pronto et CircleCI

William
La Fabrique
Published in
5 min readFeb 7, 2018

Motivations

Chez KissKissBankBank, nous faisons des revues de style manuelles, directement sur les Pull Requests GitHub (nous suivons des règles de style documentées sur notre repo GitHub Fashion Police).

Mais la nécessité d’être attentif aux fautes de style sur les Pull Requests est une charge mentale pour le relecteur, ce qui peut nuire aux reflexions à plus forte valeur ajoutée. Et comme notre équipe s’agrandit, il devient dur de faire passer à l’échelle une telle pratique.

Pourtant, il existe de très bons utilitaires automatiques (comme RuboCop, ou ESlint), qui aident directement les développeurs dans l’écriture de leur code. Mais chez nous, ils sont inutilisables directement :

Code legacy strikes back

Pour résoudre ce problème et automatiser les revues de style, nous utilisons Pronto. Cet outil nous permet d’exécuter RuboCop et ESLint uniquement sur le code modifié dans nos Pull Requests. Chaque offense génère un commentaire sur GitHub.

Vous êtes intéressé·e·s ? Passons à la pratique !

Implémentation en local sur une application Ruby on Rails

Pour pouvoir se connecter à GitHub, Pronto utilise une librairie C qui a besoin de cmake pour compiler. Pour l’installer sur MacOS X, lancez :

$ brew install cmake

Pronto-rubocop

Installez les gems suivantes dans votre Gemfile :

group :development, :test do
# Code review automation
gem 'pronto'
# Ruby code reviewer
gem 'rubocop'
# Rubocop Adapter for pronto
gem 'pronto-rubocop'
end

N. B. Vous êtes intrigués par les commentaires? Découvrez pourquoi c’est une bonne pratique de les mettre dans votre Gemfile.

Puis :

$ bundle install

pour installer le tout.

Pronto-eslint

Installez la dépendance npm ESLint :

$ npm install eslint --save-dev

Rajoutez les lignes suivantes dans votre Gemfile :

group :development, :test do
# Code review automation
gem 'pronto'
# ESLint Adapter for pronto
gem 'pronto-eslint'
end

Usage

Voilà ! Maintenant placez vous sur une branche différente de master. Vous pouvez lancer une relecture en local avec la commande suivante :

$ pronto run

Pronto va exécuter RuboCop et ESLint uniquement sur les commits relatifs à cette branche.

Ahh! That’s more like it! Les seules offenses que je récupère sont celles liées aux modifications que j’ai faites sur ma branche

Implémentation sur CircleCI : commenter automatiquement sur les Pull Requests ouvertes

L’étape suivante est d’implémenter cette relecture de code pour l’ensemble de votre équipe ! Nous allons configurer notre linter pour qu’il puisse écrire ses remarques directement dans des commentaires GitHub, sur l’ensemble des Pull Requests soumises.

Implémentation

Tout d’abord, créez un fichier bin/github-pr-review.

Puis, rendez le exécutable avec la commande suivante :

$ chmod +x bin/github-pr-review

Chez KisskissBankBank, nous faisons les Pull Request en tirant des branches directement depuis master. Nous avons donc configuré pronto pour faire la comparaison depuis master.

Si vous êtes dans le même cas, vous pouvez aller dans le fichier, et coller les lignes suivantes :

#!/bin/shset -eif [ "$CIRCLE_BRANCH" != "master" ]; then

# Get the reference of the active Pull Request
GH_TRACE="$(git ls-remote -q origin pull\*\head | grep $CIRCLE_SHA1)"
# Get the id of the active Pull Request
PULL_REQUEST_ID="$(echo $GH_TRACE | sed 's/.*refs\/pull\/\([0-
9]*\)\/head/\1/g')"
# fetch the last version of the repo
git fetch origin master:refs/remotes/origin/master --unshallow
# launch pronto
bundle exec pronto run -f github_pr_review -c origin/master
fi

Si vous avez une branche development adaptez le script ci dessous pour que la branche de référence soit development.

Il vous faut encore configurer CircleCI pour savoir quand il doit exécuter la commande. Rendez-vous sur votre circle.yml, et rajoutez les lignes suivantes :

dependencies: 
post:
- bin/github-pr-review

Dernière étape : configurer pronto, pour lui permettre de savoir à quel repo il doit se connecter. Créez un fichier pronto.yml, et collez la configuration suivante:

github:  
slug: YourOrganisationName/YourRepoName
github_pr_review:
format: "%{msg}"
max_warnings: 50
verbose: false

Votre repo GitHub est configuré pour faire tourner pronto sur chaque build CircleCI correspondant à une Pull Request. Il manque cependant une chose : CircleCI n’a pas encore les credentials pour poster des commentaires sur votre repo !

La récupération du token depuis Github 🐙

Github a prévu un usage pour permettre aux développeurs d’accéder à leur repos depuis des applications tierces comme CircleCI. Ce sont les personal access tokens.

Pour permettre à votre Circle de poster des commentaires en votre nom, allez sur la page suivante :

Settings > Developer Settings > Personal Access Tokens

Cliquez sur generate new token. Sélectionnez uniquement le scope repo :

Copiez précieusement ce token, car vous n’y aurez plus accès par la suite. Renseignez le dans les variables d’environnement sur CircleCI :

PRONTO_GITHUB_ACCESS_TOKEN=your_token_value

Chez Kisskissbankbank : KissBot

Meet the KissBot

Chez KissKissBankBank, nous avons décidé d’utiliser KissBot (le bot de la boîte) pour commenter le style de nos Pull Requests.

Cela évite que ce soit l’un des développeurs qui use de son rôle pour faire ses commentaires sur le style (qui ne sont pas les plus appréciables).

En vrai, le fait que ce soit Kissbot ça met plutôt la bonne ambiance

Et c’est même l’occasion de soulever des discussions plus sérieuses :

Premier retours d’expériences

Depuis quelques mois que Kissbot review nos Pull Requests :

  • Le style est appliqué efficacement
  • L’existant est amélioré au fur et à mesure que l’on repasse sur le vieux code, sans effort excessif.
  • Plutôt que d’être tacites, les désaccords sur la façon d’écrire le code sont soulevés et cela crée de la discussion. Ces discussions finissent par être tranchées et cela participe à la construction des règles de style d’équipe.

Références / liens complémentaires

De nombreuses autres personnes ont implémenté Pronto, et partagé leur implémentation. Pronto répertorie un nombre d’article intéressants.

Cet article a été présenté au meetup Paris.rb de décembre 2017.

--

--