使用Sonar检查Typsscript和Javascript

阅读更多

本地有两个工程，一个Angular4的UI工程，使用Jest和Jasmine做单元测试，jest会出code coverage报告。一个后台Node工程，JS编写，用Jasmine做单元测试，istanbul出code coverage报告。

项目需要集成Sonar进行代码检查。

 

步骤：

1. 下载安装并启动SonarQube

https://docs.sonarqube.org/display/SONAR/Get+Started+in+Two+Minutes

如果运行遇到什么问题了，可以尝试完全删除再重新解压。正常的话，只需要按照说明解压运行就可以了。

SonarQube自带Javascript插件。Typescript检查需要安装SonarTS插件。

SonarTS插件的下载地址 https://github.com/Pablissimo/SonarTsPlugin/releases

 

2. 使用 sonarqube-scanner依赖执行Sonar检查

介绍 https://www.npmjs.com/package/sonarqube-scanner 

 

package.json里面加上“sonarqube-scanner”的依赖

 

"gulp-run": "^1.7.1",  // gulp-run是给后续gulp任务使用的
"sonarqube-scanner": "^2.1.0",
"jasmine": "^2.5.2",

 

3. 在工程根目录下面添加sonar-project.properties文件，内容配置如下

 

sonar.projectKey=:
sonar.projectName=
sonar.projectVersion=
sonar.sources=src
sonar.language=ts
sonar.sourceEncoding=UTF-8
sonar.host.url=http://localhost:9000
sonar.login= or
sonar.password=<如果用的token, 这里的值留空>

#设定unit test的code coverage的报告的路径
sonar.ts.coverage.lcovReportPath=

 

#JS的code coverage report的属性

#sonar.javascript.lcov.reportPath=

sonar.exclusions=**/*.spec.ts
sonar.showProfiling=true

 

4. 使用gulp执行Sonar检查

1） gulpfile.js

gulp.task('sonar', gulp.series('jest', 'runSonar'));
gulp.task('jest', gulp.series('jest'));

2）jest的gulp任务配置

const gulp = require('gulp');
const run = require('gulp-run');

gulp.task('jest', jestRun);

function jestRun() {
    return run('npm run jest', {verbosity: 3}).exec();
}

3）Sonar的gulp任务配置

可以在这里读取package.json中的版本信息，代替sonar-project.properties里面设置的version信息。

properties里面的其他配置也可以在这里设置。

const gulp = require('gulp');
const sonarqubeScanner = require('sonarqube-scanner');
const version = require('./../package.json').version;

gulp.task('runSonar', function(callback) {
  sonarqubeScanner({
    options : {
      "sonar.projectVersion": version
    }
  }, callback);
});

 

4）  package.json里面的scripts配置

"scripts": {
  "jest": "jest --coverage --no-cache",
  "sonar": "gulp sonar"
}

 

5） 执行npm run sonar命令，会先用jest跑unit test然后再执行Sonar检查。jest生成的code coverage报告会与Sonar检查的结果一起在SonarQube页面上显示。另外，第一次跑Sonar检查后，会自动在SonarQube上创建工程。

 

5. 后台JS工程的配置与这个类似，只是直接用Jasmine进行单元测试

0） package.json的依赖配置

 

"istanbul": "^0.4.5",
"jasmine": "^2.99.0",
"sonarqube-scanner": "^2.1.0",
"gulp-run": "^1.7.1"

 

1） package.json的scripts配置

"scripts": {
  "test:unit": "cross-env JASMINE_CONFIG_PATH=.jasmine.json istanbul 
                  cover ./node_modules/jasmine/bin/jasmine.js",
  "sonar": "gulp sonar"}

 

2） gulpfile.js的配置

gulp.task('test', gulp.series('test'));
gulp.task('sonar', gulp.series('runTest', 'runSonar'));

 

3） runTest.js这个gulp task的配置

'use strict';

const gulp = require('gulp');
const run = require('gulp-run');

gulp.task('test', runTest);

function runTest() {
    return run('npm run test:unit', {verbosity: 3}).exec();
}

 

4） sonar.js的gulp task的配置

'use strict';
const gulp = require('gulp');
const sonarqubeScanner = require('sonarqube-scanner');
const version = require('./../package.json').version;

gulp.task('runSonar', function(callback) {
    sonarqubeScanner({
        options : {
            "sonar.projectVersion": version
}
    }, callback);
});

 

5）使用npm run sonar执行单元测试并进行代码检查

 

6. Jenkins上的配置，只需要让Jankins build可以执行到npm run sonar命令就可以了。

 

7. 如果用angular cli的话，只需要在dependencies里面安装sonarqube-scanner， 然后在package.json里面配置

script: {

    "sonar": "sonar-scanner"

}

然后用"npm run sonar"执行。sonar scanner会自动读取工程跟目录下的sonar-project.properties文件的内容。