Sonarqube 对接使用

Sonarqube 对接使用

Sonarqube 是什么?

SonarQube 可以检查代码是否符合指定的代码规范,查找出潜在的代码问题,如漏写分号,未定义变量等简单问题。

Sonarqube 能干什么?

  1. 代码检查
  2. 重复代码检测
  3. 代码覆盖率
  4. 技术债务管理
  5. 漏洞检测
  6. 代码规范检查
  7. 报告生成

所以,SonarQube 是一个功能异常强大的代码质量管理与分析平台,主要用于:

  1. 自动化代码检查,发现代码问题
  2. 管理技术债务,优化代码质量
  3. 分析测试覆盖率,发现未覆盖代码
  4. 检测安全漏洞,减少软件风险
  5. 制定代码规范,统一代码风格
  6. 生成各类质量报告,数据驱动技术决策

任何需要管理及提高代码质量的团队和公司,SonarQube 都是一个非常高效和有价值的工具。它可以统一代码标准,减少对人工review的依赖,最大限度地发现代码问题并进行可视化管理。 SonarQube是一个技术异常强大而又实用的代码质量管理工具,如果能够在项目开发过程中广泛应用,必将产生非常显著的效果。

有了Eslint还需要Sonarqube 干什么?

首先我们说一下eslint与sonar的区别。

eslint基于静态代码分析,在配置好校验规则后无需前端项目运行起来即可校验代码的风格,比如定义常量后重新赋值、调用未定义的函数等不规范的代码。通过eslint,开发者在项目开发阶段就可以提前发现有问题的代码,不至于等到项目部署到生产环境并执行那一段有bug的代码才知道问题。

而sonarqube是一个代码质量管理平台。sonar不仅根据定义的扫描规则来进行质量检查,并且可以对扫描出的问题进行管理,比如关闭/评论问题、把问题指派给开发者去解决等。

此外,sonarqube官网说明可支持27 种编程语言的代码质量检查。包括JavaScript,Typescript、Java、Python等。而eslint工具仅对 ECMAScript/JavaScript 代码进行检查,当然通过一些plugins使得eslint也支持vue、react等前端语法的代码校验。

由于开发者可以在本地关闭项目中eslint校验,但是管理者却希望看到每一个项目的代码校验统计情况。这种情况还是比较推荐接入sonarQube,况且sonarQube还支持问题管理的功能。

Sonarqube 如何对接?

链接:sonarqube-eeo-test-k8s.eeo-inc.com/projects?so...

第一步:进入系统,选择【项目】

第二步:选择接入平台,这里选择【GitLab】

第三步:选择配置哪个 GitLab 项目?

第四步:选择配置哪个 GitLab 项目,添加环境变量

点击"继续"

第五步:在根目录下创建sonar-project.properties 文件,如:LMS组件库

ini 复制代码
sonar.projectKey=classin-fe_answer-sheet_web-components_AYjSNkNJz5sDhVts2EYq
sonar.qualitygate.wait=true

第六步:使用以下内容创建或更新你的 .gitlab-ci.yml 文件。

yaml 复制代码
sonarqube-check:
	state: sonarqube-check
  image: 
    name: sonarsource/sonar-scanner-cli:latest
    entrypoint: [""]
  variables:
    SONAR_USER_HOME: "${CI_PROJECT_DIR}/.sonar"  # Defines the location of the analysis task cache
    GIT_DEPTH: "0"  # Tells git to fetch all the branches of the project, required by the analysis task
  cache:
    key: "${CI_JOB_NAME}"
    paths:
      - .sonar/cache
  script: 
    - sonar-scanner
  allow_failure: true
	tags:
		- 项目的部署机器
  rules:
    - if: $CI_COMMIT_BRANCH == 'im_release'

注意:这里上面代码中tags 中需要使用自己项目所拥有的 runner 机器

扫描效果如下:

相关推荐
打呵欠的猫3 分钟前
我把 20 个页面的权限控制从"硬编码"改成"配置驱动",AI 帮我生成了 80% 的迁移代码
前端·ai编程
志尊宝15 分钟前
Vue3 零基础每日笔记(005):ref 响应式基础——为什么 script 里要 .value
前端·javascript·vue.js·笔记
海鸥两三21 分钟前
Mac电脑使用 Tabby 部署前端项目到阿里云服务器完整教程
前端·macos·阿里云
console.log('npc')28 分钟前
2026 实测:Grok 4.5 与 Grok 4.6 怎么选?前端开发、教程写作、Figma 还原选型指南
前端·大模型·ai编程·figma·grok
yyt36304584143 分钟前
一次鼠标交互触发两次 Vue flushJobs:把高频交互从 VDOM 里拆出来
前端·vue.js·计算机外设
YUJIANYUE1 小时前
查立得万用查分安卓版(web环境+查询系统免安装单文件一键运行包)
android·前端
慧都小项1 小时前
从 Figma 到 Qt:Qtitan 能减少哪些界面还原工作?
前端·qt·嵌入式·figma·图形界面·工业界面·qtitan
YWL1 小时前
OpenLayers导出功能:地图截图+GeoJSON导出完整方案,从Canvas合并到PDF生成
前端·vue·openlayers
苦瓜小生2 小时前
【前端】【力扣与手撕】十天带你刷完前端算法与手撕,全是最简单好记的最优解法!day4
前端·数据结构·算法·leetcode·面试
mayaairi2 小时前
Vue2 实战进阶:表单数据收集、指令系统与自定义指令全解析
前端·javascript·vue.js