首页 > web前端 > js教程 > 正文

来自 Bitbucket 管道的 Eslint 代码洞察

聖光之護
发布: 2024-09-22 08:21:09
转载
401人浏览过

来自 bitbucket 管道的 eslint 代码洞察

本指南解释了如何使用 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。

  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 有错误),后续脚本将不会被调用。

以上就是来自 Bitbucket 管道的 Eslint 代码洞察的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
相关标签:
来源:dev.to网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号