Using Azure DevOps for linting on GitHub.

Yasser Shaikh
Jul 27 · 3 min read

Recently I have been playing around with a React App which uses Typescript, with an intent to learn and stay updated on the front end world. I am using GitHub to host this repository and I wanted to ensure that every time a pull request is created on this repository

  1. The project is buildable — Meaning no errors.
  2. All lint rules that I have set pass.
  3. All tests pass

While trying to check GitHub apps for this, I found many related apps, but this particular app caught my eye — “Azure Pipeline”. Being a Microsoft fanboy, I decided to try it out ;)

Setup

Once you install this app on your GitHub repository, you will be redirected to Azure DevOps website, where you need to create an account and then setup your organization/project-name.

Setting up Azure DevOps.
Setting up Azure DevOps.

Once logged in, you need to setup build pipeline for your project. Its a fairly straight forward process —

  1. Select “GitHub” option.

2. Search and select the repository for which you want to set this up.

3. Select the type of project, Azure DevOps provides an extensive list of different type of applications. Here we select “Node.js with React” option.

Next, it should generate a “” with a bunch of configuration. On saving this file, it will create a commit in the same repository and save this file at the root of the application.

There are 2 part of configuration in my setup.

  1. The commands below will make sure all dependencies are downloaded correctly and project is building without errors. Here you could optionally run your tests using npm run test.
Npm install & build.- script: |
npm install
npm run build
displayName: ‘npm install and build’

2. Running Tslint and making sure all rules pass. For this first make sure you install tslint in your project as a dev dependency, and then run tslint command using this script -

- task: TSLINT step
inputs:
script: |
npm install tslint typescript -g
tslint — project ./tsconfig.json
failOnStderr: true

And that’s it! Now whenever you create/update a pull request, you will get a status from Azure Pipeline for the build/lint/tests as pending/success/error and a link to get to the build log for more details.

Above is a sample PR, where I added some errors in code so that it builds fails with error. Azure Pipeline has reported an error status on the PR, you can also step it up in a way that this status must always pass before the branch can be merged into master. Below is how to do it…

The only downside I have so far is that unlike some of the other apps that comment inline in the pull request, here I have to go to the build log to see the details of why the linting failed.

Here is the sample build log from one of the PR where tslint failed with errors.

Cheers!

Yasser Shaikh's blog

It's supposed to be automatic, but actually you have to push this button.

Yasser Shaikh

Written by

Yasser Shaikh's blog

It's supposed to be automatic, but actually you have to push this button.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade