Eslint-Code-Einblicke aus Bitbucket-Pipelines

Diese Anleitung erklärt, wie Sie ESLint-Ergebnisse mithilfe von Bitbucket-Pipelines in Ihre Bitbucket-Pull-Anfragen integrieren. Sie erfahren, wie Sie ESLint-Berichte im JSON-Format generieren, diese als Inline-Anmerkungen mithilfe der Bitbucket Reports and Annotations API veröffentlichen und eine Bitbucket-Pipeline für die automatische Ausführung von ESLint konfigurieren.

Generieren Sie einen ESLint-Bericht als JSON

Zuerst müssen Sie ESLint ausführen und die Ergebnisse im JSON-Format ausgeben. Diese Datei wird später zum Erstellen eines Berichts und von Anmerkungen verwendet.

Fügen Sie die Argumente -f und -o zu Ihrem eslint-Befehl hinzu. Z.B:

eslint . --ext .ts -f json -o eslint-report.json

Veröffentlichen Sie den ESLint-Bericht und die Anmerkungen auf Bitbucket

Um ESLint-Ergebnisse direkt in Ihren Pull Requests anzuzeigen, verwenden Sie die Report API und Annotations API von Bitbucket.

1. Lesen Sie den ESLint JSON-Bericht.
2. Erstellen Sie einen Bericht mit der Gesamtzahl der Fehler und Warnungen.
3. Posten Sie Inline-Anmerkungen basierend auf ESLint-Nachrichten.

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)
}

Konfigurieren Sie die Bitbucket-Pipeline

Um diesen Prozess als Teil Ihres CI/CD-Workflows zu automatisieren, können Sie eine Bitbucket-Pipeline einrichten, um ESLint auszuführen, den JSON-Bericht zu generieren und die Ergebnisse zu veröffentlichen. Unten finden Sie eine Beispieldatei bitbucket-pipelines.yml, um Ihnen den Einstieg zu erleichtern:

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

Notiz

Der Bericht wird im Nachskript an Bitbucket gesendet, da nachfolgende Skripte nicht aufgerufen werden, wenn eslint einen Exit-Code ungleich 0 zurückgibt (wenn ESLint Fehler aufweist).

Das obige ist der detaillierte Inhalt vonEslint-Code-Einblicke aus Bitbucket-Pipelines. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!