来自 Bitbucket 管道的 Eslint 代码洞察

百变鹏仔 3天前 #JavaScript

文章标签管道

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

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

const fs = require('fs')const path = require('path')const util = require('util')// external id must be unique per report on a commitconst 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 severitiesconst severities = {    0: 'low',    1: 'medium',    2: 'high'}// read the eslint json reportconst data = await util.promisify(fs.readfile)(path.join(process.cwd(), 'eslint-report.json'), 'utf8')    .catch(err =&gt; {        console.error('error reading eslint-report.json:', err)        throw err    })const eslintoutput = json.parse(data)let totalerrorcount = 0let totalwarningcount = 0const annotations = []let i = 1eslintoutput.foreach(file =&gt; {    totalerrorcount += file.errorcount    totalwarningcount += file.warningcount    const relativepath = path.relative(process.cwd(), file.filepath)    file.messages.foreach(message =&gt; {        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 reportconst 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 &gt; 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.0pipelines:  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 代码洞察

生成 json 格式的 eslint 报告

将 eslint 报告和注释发布到 bitbucket

配置 bitbucket 管道

笔记

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？