参考链接:

官方文档

博客

1.安装ESLint

# 全局安装
npm install eslint -g

# cd source_code_dir

eslint --init # 选择你需要eslint扫描的代码类型，规则等

# init 之后会生成如下文件:
.eslintrc.js
node_modules
# 需要写入自动化流程中可以将这两个文件保存下来，执行前将其拷贝到源码编译所在目录，即可避免交互式页面

2.在源码目录添加sonarqube官方提供的用来格式化json文件的js文件

# cat > sonarqube_formatter.js <<EOF
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);
}

3.将eslint执行结果，格式化为可导入sonarqube的json格式

# export 
cd source_code_dir
eslint ./src -f ./sonarqube_formatter.js -o report.json

4.在sonarqube web端创建Project

- 注意: 自定义质量阀及质量配置是为了节省 sonarqube扫描时间，如果您不在意时间的话，可以忽略 5,6,7,8 四个章节

 5.创建一个空的质量阀

 6.创建 质量配置

- JS

同理创建其他三个质量配置

- HTML 

 - CSS

- JSON

7.为每个质量配置，添加规则并激活

8.为项目应用 刚刚创建的质量阀 及 质量配置

9.开始上传ESLINT 结果到 sonarqube

9.1 单独上传eslint结果到sonarqube中

# 1.开始将report.json 导入 sonarqube

sonar-scanner -Dsonar.projectKey=Eslint \
-Dsonar.host.url=http://xxxxxx:9000 \
-Dsonar.login=xxxxxx \
-Dsonar.externalIssuesReportPaths=report.json \
-Dsonar.projectVersion=1.0

## 之所以仅仅导入eslint数据是为了将sonarqube与eslint的问题区分开来

9.2 eslint结果与sonar扫描结果并存

sonarqube也支持同时展示 sonar与eslint的问题,因此这里我们就不需要单独创建质量阀与质量规则了

[[ -d report.json ]] && rm -f report.json
eslint ./src -f ./sonarqube_formatter.js -o report.json

sonar-scanner -Dsonar.projectKey=eslint_and_sonar \
-Dsonar.host.url=http://xxx:9000 \
-Dsonar.login=xxx \
-Dsonar.source=. \
-Dsonar.externalIssuesReportPaths=report.json \
-Dsonar.projectVersion=1.0

10.登录 Sonarqube 查看结果