Jenkins基础：使用NPM构建前端应用7：使用SonarQube检查前端代码质量

最新推荐文章于 2025-06-08 11:25:11 发布

原创

最新推荐文章于 2025-06-08 11:25:11 发布 · 2.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Jenkins #Jenkinsfile #SonarQube #SonarTS #代码扫描

本文介绍了如何使用Jenkins结合SonarQube进行前端应用的代码质量检查。首先，详细阐述了SonarQube环境的搭建过程，接着讲解了在Jenkinsfile中使用npm命令进行构建和质量扫描的方法。最后，展示了执行日志及在SonarQube上查看扫描结果的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前面的文章中我们介绍了如何通过使用Jenkins的NodeJS插件进行前端应用的构建和测试，在这篇文章中将继续介绍如何继续集成SonarQube来实现前端应用的代码质量状况的显示。

事前准备

SonarQube环境

构建SonarQube环境，可参看如下内容：

https://liumiaocn.blog.csdn.net/article/details/56673905
docker-compose.yml

liumiaocn:sonar liumiao$ cat docker-compose.yml 
version: '2'

services:
  # database service: mysql
  mysql:
    image: liumiaocn/mysql:5.7.16
    ports:
      - "3306:3306"
    volumes:
      - ./mysql/data/:/var/lib/mysql
      - ./mysql/conf.d/:/etc/mysql/conf.d
    environment:
      - MYSQL_ROOT_PASSWORD=hello123
      - MYSQL_DATABASE=sonarqube
    restart: "no"

    
  # Security service: sonarqube
  sonarqube:
    image: liumiaocn/sonarqube:6.7.1
    ports:
      - "9000:9000"
    volumes:
      - ./sonar/data/:/usr/share/sonarqube/data
      - ./sonar/extensions/:/usr/share/sonarqube/extensions
      - ./sonar/conf/:/usr/share/sonarqube/conf
    environment:
      - SONARQUBE_JDBC_USERNAME=root
      - SONARQUBE_JDBC_PASSWORD=hello123
      - SONARQUBE_JDBC_URL=jdbc:mysql://mysql:3306/sonarqube?useUnicode=true&characterEncoding=utf8&rewriteBatchedStatements=true&useConfigs=maxPerformance
    links:
      - mysql:mysql
    depends_on:
      - mysql
    restart: "no"
liumiaocn:sonar liumiao$

运行起来之后的服务状态

liumiaocn:sonar liumiao$ docker-compose ps
      Name                    Command             State           Ports         
--------------------------------------------------------------------------------
sonar_mysql_1       docker-entrypoint.sh mysqld   Up      0.0.0.0:3306->3306/tcp
sonar_sonarqube_1   ./bin/run.sh                  Up      0.0.0.0:9000->9000/tcp
liumiaocn:sonar liumiao$

SonarQube服务页面确认
在这里插入图片描述

基础知识

如果对于NodeJS的插件使用或者在Jenkins的Jenkinsfile中使用npm的基本方法不熟悉的开发者可以先行查看如下文章。

在Jenkins中安装和设定NodeJS插件：https://liumiaocn.blog.csdn.net/article/details/102618269
如何在Jenkinsfile中使用NodeJS：
https://liumiaocn.blog.csdn.net/article/details/102598