代码质量管理工具-SonarQube

Jinuss2026-05-13 11:50

SonarQube概述

SonarQube在代码质量检测领域的"江湖地位"，就相当于前端界的 Vue 或 React，依然是绝大多数中大型企业的"默认标配"。

配置步骤

docker安装两个镜像

sonarquebe
sonarsource/sonar-scanner-cli

前端项目

终端运行命令npm install -g sonar-scanner
前端根目录新增文件sonar-project.properties，如下

bash 复制代码

# ======================
# 项目基本信息
# ======================
sonar.projectKey=ts-r
sonar.projectName=ts-r
sonar.sourceEncoding=UTF-8

# ======================
# SonarQube 服务地址 & Token
# ======================
sonar.host.url=http://localhost:9000
sonar.login=sqp_855c49d8c7aab612ab1886b92d206b007ce713e9

# ======================
# 扫描目录
# ======================
sonar.sources=src

# ======================
# ✅ 明确指定要扫描的文件类型（关键）
# ======================
sonar.inclusions=**/*.js,**/*.jsx,**/*.ts,**/*.tsx,**/*.less,**/*.scss,**/*.css

# ======================
# ❌ 排除不需要扫描的目录
# ======================
sonar.exclusions=**/node_modules/**,**/dist/**,**/build/**,**/*.test.*,**/*.spec.*,**/*.es.js

# ======================
# ✅ 启用 JavaScript / TypeScript 分析
# ======================
sonar.javascript.file.suffixes=.js,.jsx
sonar.typescript.file.suffixes=.ts,.tsx

# ======================
# ✅ CSS / Less / Scss 支持
# ======================
sonar.css.file.suffixes=.css,.less,.scss

新增脚本文件scripts/sonar-scan.js，如下

javascript 复制代码

const { execSync } = require('child_process');

const hostUrl = 'http://host.docker.internal:9000'; //指向本机docker中 sonarqube的配置
const projectDir = process.cwd().replace(/\\/g, '/');

const cmd = [
  'docker run --rm',
  `-e SONAR_HOST_URL="${hostUrl}"`,
  `-v "${projectDir}:/usr/src"`,
  'sonarsource/sonar-scanner-cli'
].join(' ');

console.log('🚀 Running SonarScanner...\n');
console.log(cmd);

execSync(cmd, { stdio: 'inherit' });

修改package.json，如下

bash 复制代码

{
 "scripts":{
   "sonar-scan": "node scripts/sonar-scan.js",
   }
 }

代码扫描

终端运行yarn sonar-scan命令就是通过node运行脚本scripts/sonar-scan.js，本质上就是执行那个docker命令
浏览器访问localhost:9999，页面如下