This guide explains how to integrate ESLint results into your Bitbucket Pull Requests using Bitbucket Pipelines. You'll learn how to generate ESLint reports in JSON format, post these as inline annotations using the Bitbucket Reports and Annotations API, and configure a Bitbucket pipeline to run ESLint automatically.
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')
// External ID must be unique per report on a commit
const EXTERNAL_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'
}
// Read the ESLint JSON report
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: `${EXTERNAL_ID}.${COMMIT}.${i++}`,
path: relativePath,
annotation_type: 'CODE_SMELL',
summary: message.message,
line: message.line,
severity: severities[message.severity]
})
})
})
// Prepare the report
const report = {
title: 'ESLint Report',
details: 'Results from ESLint analysis',
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
}
]
}
try {
// Post the report to Bitbucket
const reportUrl = `${BB_URL}/repositories/${BB_USER}/${BB_REPO}/commit/${COMMIT}/reports/${EXTERNAL_ID}`
let 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())
// Post annotations if any
if (annotations.length > 0) {
const annotationsUrl = `${BB_URL}/repositories/${BB_USER}/${BB_REPO}/commit/${COMMIT}/reports/${EXTERNAL_ID}/annotations`
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())
}
} catch (error) {
console.error('Error posting insights:', error.response ? error.response.data : error.message)
}
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 script
s will not be called if eslint returns non 0 exit code (if ESLint has errors).
Top comments (0)