本指南介紹如何使用 Bitbucket Pipelines 將 ESLint 結果整合到 Bitbucket Pull 請求中。您將學習如何產生 JSON 格式的 ESLint 報告，使用 Bitbucket 報告和註解 API 將這些報告作為內聯註解發布，以及設定 Bitbucket 管道以自動執行 ESLint。
首先，您需要執行 ESLint 並以 JSON 格式輸出結果。該文件稍後將用於建立報告和註釋。
將 -f 和 -o 參數加入 eslint 指令。例如：
eslint . --ext .ts -f json -o eslint-report.json
要直接在拉取請求中顯示 ESLint 結果，您將使用 Bitbucket 的報表 API 和註解 API。
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)
}
要將此流程自動化為 CI/CD 工作流程的一部分，您可以設定 Bitbucket 管道來執行 ESLint、產生 JSON 報告並發布結果。以下是一個範例 bitbucket-pipelines.yml 文件，可協助您入門：
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
報告在後腳本中發佈到 Bitbucket，因為如果 eslint 返回非 0 退出代碼（如果 ESLint 有錯誤），後續腳本將不會被呼叫。
以上是來自 Bitbucket 管道的 Eslint 程式碼洞察的詳細內容。更多資訊請關注PHP中文網其他相關文章！
