vue项目前端代码扫描——eslint报告导入到sonarqube平台

一、项目根目录新建sonarqube_formatter.js

1、sonarqube_formatter.js将report.json转成sonarqube可识别的json

module.exports = function(results) {
  var summary = { issues: [] }
  results.forEach(function(result) {
    result.messages.forEach(function(msg) {
      var logMessage = {
        engineId: 'eslint',
        ruleId: msg.ruleId,
        primaryLocation: {
          message: msg.message,
          filePath: result.filePath,
          textRange: {
            startLine: msg.line,
            endLine: msg.endLine,
            endColumn: msg.endColumn
          }
        }
      }

      // The log message type and severity is up to you but you need to take in consideration SonarQube properties
      if (msg.severity === 1) {
        logMessage.type = 'CODE_SMELL'
        logMessage.severity = 'INFO'
      }
      if (msg.severity === 2) {
        logMessage.type = 'BUG'
        logMessage.severity = 'MAJOR'
      }
      summary.issues.push(logMessage)
    })
  })
  return JSON.stringify(summary)
}

二、生成sonarqube可识别的report.json

在本地项目根目录下执行npx eslint --ext .js,.vue,.css src -f ./sonarqube_formatter.js -o report.json，即可生成本地项目的eslint代码检测报告report.json

三、report.json导入到sonarqube平台

1、本地安装好sonar-sanner
2、在sonarqube平台创建项目，拿到token,在项目根目录执行以下sonar-scanner命令

sonar-scanner -Dsonar.projectKey=test-front-eslint -Dsonar.host.url=http://xxx.xxx.xxx.xxx:xxxx -Dsonar.login=tokenxxxx -Dsonar.externalIssuesReportPaths=report.json -Dsonar.projectVersion=1.0

3、执行成功后，会提示出结果展示页面的地址，访问即可查看report.json中的问题在sonarqube平台展示。