This guide explains how to integrate ESLint results into your Bitbucket Pull Requests using Bitbucket Pipelines and creating a Report with Annotations.
Generate ESLint Report as JSON
First, you'll need to run ESLint and output the results in JSON format. This file will later be used to create a report and annotations.
Add -f and -o args to your eslint command. E.g:
eslint . --ext .ts -f json -o eslint-report.json
Post ESLint Report and Annotations to Bitbucket
To display ESLint findings directly in your Pull Requests, you'll use Bitbucket's Report API and Annotations API.
- Read the ESLint JSON report.
- Generate a report with the total number of errors and warnings.
- Post inline annotations based on ESLint messages.
const fs = require('fs')
const path = require('path')
const util = require('util')
// Must be unique per report on a commit
const REPORT_ID = 'com.yorcompany.reports.eslint'
const BB_USER = 'YOUR_USER'
const BB_REPO = 'YOUR_REPO'
const BB_URL = 'https://api.bitbucket.org/2.0'
// This is available by default in the pipeline.
const COMMIT = process.env.BITBUCKET_COMMIT
// For this to be availble you need to create an access token with read access to the repo
// and set it an environment variable in the pipeline.
const TOKEN = process.env.BITBUCKET_TOKEN
// Map ESLint severities to Bitbucket report severities
const severities = {
0: 'LOW',
1: 'MEDIUM',
2: 'HIGH'
}
if (!fs.existsSync(path.join(process.cwd(), 'eslint-report.json'))) {
console.log('eslint-report.json file does not exist.');
process.exit();
}
doIt().catch(e => {
console.error('Error posting insights:', e.response ? e.response.data : e.message)
})
async function doIt() {
const data = await util.promisify(fs.readFile)(path.join(process.cwd(), 'eslint-report.json'), 'utf8')
.catch(err => {
console.error('Error reading eslint-report.json:', err)
throw err
})
const eslintOutput = JSON.parse(data)
let totalErrorCount = 0
let totalWarningCount = 0
const annotations = []
let i = 1
eslintOutput.forEach(file => {
totalErrorCount += file.errorCount
totalWarningCount += file.warningCount
const relativePath = path.relative(process.cwd(), file.filePath)
file.messages.forEach(message => {
annotations.push({
external_id: `${REPORT_ID}.${COMMIT}.${i++}`,
path: relativePath,
annotation_type: 'CODE_SMELL',
summary: message.message,
line: message.line,
severity: severities[message.severity]
})
})
})
const report = {
title: 'ESLint report',
details: 'ESLint report',
report_type: 'TEST',
logoUrl: 'https://eslint.org/img/logo.svg',
data: [
{
title: 'Error Count',
type: 'NUMBER',
value: totalErrorCount
},
{
title: 'Warning Count',
type: 'NUMBER',
value: totalWarningCount
}
]
}
await postReport(report)
await postAnnotations(annotations)
}
async function postReport(report) {
// https://developer.atlassian.com/cloud/bitbucket/rest/api-group-reports/#api-repositories-workspace-repo-slug-commit-commit-reports-reportid-put
const reportUrl = `${BB_URL}/repositories/${BB_USER}/${BB_REPO}/commit/${COMMIT}/reports/${REPORT_ID}`
const response = await fetch(reportUrl, {
method: 'PUT',
body: JSON.stringify(report),
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'Authorization': `Bearer ${TOKEN}`
}
})
if (!response.ok) {
console.error(await response.text())
throw new Error(`Error posting report: ${response.statusText}`)
}
console.log('Report posted successfully!')
console.log(await response.json())
}
async function postAnnotations(annotations) {
if (annotations.length > 0) {
// https://developer.atlassian.com/cloud/bitbucket/rest/api-group-reports/#api-repositories-workspace-repo-slug-commit-commit-reports-reportid-annotations-post
const annotationsUrl = `${BB_URL}/repositories/${BB_USER}/${BB_REPO}/commit/${COMMIT}/reports/${REPORT_ID}/annotations`
const response = await fetch(annotationsUrl, {
method: 'POST',
body: JSON.stringify(annotations),
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'Authorization': `Bearer ${TOKEN}`
}
})
if (!response.ok) {
console.error(await response.text())
throw new Error(`Error posting annotations: ${response.statusText}`)
}
console.log('Annotations posted successfully!')
console.log(await response.json())
}
}
Configure Bitbucket Pipeline
To automate this process as part of your CI/CD workflow, you can set up a Bitbucket pipeline to run ESLint, generate the JSON report, and post the results. Below is a sample bitbucket-pipelines.yml file to get you started:
image: node:18.13.0
pipelines:
default:
- step:
name: ESLint
caches:
- node
script:
- npm install
- npx eslint . --ext .ts -f json -o eslint-report.json # Run ESLint and save the report
after-script:
- node post-eslint-results.js # Post results to Bitbucket
artifacts:
- eslint-report.json
Note
Report is posted to Bitbucket in after-script because subsequent scripts will not be called if eslint returns non 0 exit code (if ESLint has errors).
Top comments (0)