本指南解释了如何使用 bitbucket pipelines 将 eslint 结果集成到 bitbucket pull 请求中。您将学习如何生成 json 格式的 eslint 报告，使用 bitbucket 报告和注释 api 将这些报告作为内联注释发布，以及配置 bitbucket 管道以自动运行 eslint。

生成 json 格式的 eslint 报告

首先，您需要运行 eslint 并以 json 格式输出结果。该文件稍后将用于创建报告和注释。

将 -f 和 -o 参数添加到 eslint 命令中。例如：

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

将 eslint 报告和注释发布到 bitbucket

要直接在拉取请求中显示 eslint 结果，您将使用 bitbucket 的报告 api 和注释 api。

Web Accessibility (WCAG 2 AA))

将 WCAG 2 AA 无障碍标准应用于设计系统、UI 组件和网页——通过可运行的验证器进行对比度计算，采用设计 token 模式使颜色天生可访问，设定排版和焦点状态规则，并提供语义检查清单。适用于构建或审查 UI。

下载

1. 阅读 eslint json 报告。
2. 生成包含错误和警告总数的报告。
3. 基于 eslint 消息发布内联注释。

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

配置 bitbucket 管道

要将此过程自动化为 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 有错误），后续脚本将不会被调用。