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