`

使用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=<groupId>:<artifactId>
sonar.projectName=<project name>
sonar.projectVersion=<project version>
sonar.sources=src
sonar.language=ts
sonar.sourceEncoding=UTF-8
sonar.host.url=http://localhost:9000
sonar.login=<user name> or <your token which was generated in Sonar>
sonar.password=<如果用的token, 这里的值留空>

#设定unit test的code coverage的报告的路径
sonar.ts.coverage.lcovReportPath=<lcov.info文件的路径>

 

#JS的code coverage report的属性

#sonar.javascript.lcov.reportPath=<lcov.info文件的路径>


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文件的内容。

 

分享到:
评论

相关推荐

    sonar-Web_JavaScript检查规则指南.docx

    SonarQube 提供了许多内置规则,旨在检测JavaScript 代码中的错误、漏洞和坏味道。以下是 SonarQube 的 JavaScript 代码规则指南,涵盖了多个方面的知识点。 1. delete 运算符的使用 在 JavaScript 中,delete ...

    Sonarlint中文使用手册

    此外,手册中也提及了使用SonarLint时的一些注意事项和工作原理,这些内容对于理解SonarLint如何辅助代码质量管理至关重要。随着手册的不断完善,建议用户也关注手册的更新,以获取最新的使用信息和最佳实践。

    sonar使用教程

    sonar使用教程涵盖了在Linux环境下搭建SonarQube环境的详细步骤。SonarQube是一个开源平台,用于持续检测代码质量,支持多种编程语言。在本教程中,主要讲述了如何在具有CentOS 7.0操作系统的Linux环境下进行...

    sonar检查规则指南

    Sonar是一种广泛使用的代码质量管理工具,它可以帮助开发人员发现代码中的各种问题,包括但不限于bug、漏洞和代码异味等。本篇文章将根据提供的部分Sonar规则指南内容,深入解析这些规则背后的原理及推荐的最佳实践...

    SonarLint idea代码检查工具 离线安装包

    sonarLint 插件 供离线安装 ,用于检查代码 ,sonarLint 插件 ,用于检查代码 ,sonarLint 插件 ,用于检查代码 ,sonarLint 插件 ,用于检查代码

    Sonar的配置与安装

    Sonar 的配置和安装是使用 Sonar 的前提,下面将详细介绍 Sonar 的安装和配置过程。 Sonar 简介 Sonar 是一个开源的代码质量管理平台,能够对代码进行静态分析,检测代码中存在的缺陷和问题。Sonar 通过对代码的...

    SonarLint IDEA代码检查工具最新

    4. **与SonarQube集成**:如果项目已经使用了SonarQube服务器,SonarLint可以与之无缝对接,获取项目特有的代码质量管理规则,确保本地检查与服务器分析的一致性。 5. **错误优先级**:SonarLint不仅标记问题,还会...

    sonar-Kotlin检查规则指南.docx

    例如, Sonar-Kotlin 中有一条规则,检查代码中是否使用了 “=+” 而不是 “+=”,因为 “=+” 可能会导致代码执行错误。 Sonar-Kotlin 中的漏洞类型规则是指检查代码中的安全漏洞。这些规则检查代码中是否存在硬...

    代码检测插件(SonarLint插件)安装使用说明.docx

    【SonarLint插件安装】 ...通过使用SonarLint,开发者可以实时地提升代码质量和安全性,确保代码符合公司制定的规范,从而提高团队的开发效率和代码质量。结合SonarQube,还能实现代码质量管理的标准化和持续改进。

    Sonar的安装和使用

    ### Sonar的安装和使用详解 #### 第一章:Sonar简介 SonarQube(简称Sonar)是一个全面的代码质量管理平台,旨在帮助开发者、项目经理及组织维护和提高源代码质量。它不仅是一个报告工具,更是一个集成了多种功能...

    在SonarQube上使用java自定义JavaScript检测规则

    SonarQube 提供了一个强大的平台,允许开发者使用 Java 语言开发检测规则来检测 JavaScript 代码中的错误和问题。本文将详细介绍如何使用 Java 开发 SonarQube JavaScript 检测规则,包括规则定义、插件开发和规则...

    使用jenkins+sonar进行代码扫描,并发送自定义邮件.docx

    【使用Jenkins+Sonar进行代码扫描并发送自定义邮件】是软件开发中自动化质量管理和持续集成的一个重要实践。这个过程通常包括以下步骤: 1. **Jenkins架构**: - **Master节点**:主要负责任务调度,不直接执行...

    sonar汉化包等插件

    5. **sonar-javascript-plugin-2.11.jar**:JavaScript开发者会对此感兴趣,这个插件负责JavaScript代码的分析,检查语法错误、代码异味和安全漏洞,帮助提升JavaScript代码质量。 6. **sonar-l10n-zh-plugin-1.11....

    SonarLint for Visual Studio 2019、2022

    像拼写检查器一样,SonarLint 会显示缺陷并提供实时反馈和清晰的修复指导,以便从一开始就提供干净的代码。使用方法:下载完成后解压文件,里边有“SonarLint.VSIX-5.3.0.41207-2019.vsix”、“SonarLint.VSIX-6.9.0...

    sonar安装及使用说明

    ### sonar安装及使用说明 #### 一、环境要求 为了确保SonarQube能够正常运行,必须满足一定的系统环境要求。具体来说: - **Java版本**:SonarQube推荐使用JDK 1.8及以上版本。这是因为较新的Java版本能够提供更...

    sonar-all-package.tar

    可以使用的sonar-all_package.tar已经部署安装测试使用 代码检查工具可以使用的sonar-all_package.tar已经部署安装测试使用 代码检查工具可以使用的sonar-all_package.tar已经部署安装测试使用 代码检查工具可以使用...

    源代码检查工具SONAR使用经验

    ### 源代码检查工具SONAR使用经验 #### Sonar概述 Sonar作为一个代码质量管理的开放平台,通过灵活的插件机制集成了多种测试工具、代码分析工具以及持续集成工具。与传统持续集成工具(如Hudson/Jenkins)相比,...

    sonarlint 4 最新,所有版本的idea都可以使用。免费下载

    4. **与SonarQube集成**:如果您的团队使用SonarQube作为中央代码质量管理平台,SonarLint可以连接到它,获取项目特定的规则和历史数据,确保本地检查与服务器端扫描的一致性。 5. **插件系统**:SonarLint作为...

    SonarLint代码质量检查工具

    此外,SonarLint的规则集可以根据项目需求进行定制,允许团队根据自己的编码风格和安全需求调整检查标准。通过与SonarQube的联动,SonarLint可以实现更全面、更一致的代码质量管理,是现代敏捷开发中不可或缺的工具...

Global site tag (gtag.js) - Google Analytics