sonarQube全流程实战：从VSCode开发到CI/CD质量门禁从代码渣到Clean Code大师，用自动化工具终结

——深度整合开发者工具链，打造「编码→扫描→部署」的自动化质量防线

一、VSCode开发阶段：实时检测与修复

1.1 安装必备插件

SonarLint（实时检测）
- 从VSCode扩展商店安装 SonarLint
- 绑定到团队SonarQube服务器（设置 → SonarLint → Connected Mode）

Json
   // settings.json 配置示例
   "sonarlint.connectedMode.connections.sonarqube": [
     {
       "serverUrl": "http://sonarqube.example.com",
       "token": "your_token_here"
     }
   ]

2. ESLint/TSLint（规则同步）

Bash
   # 安装依赖（确保与SonarQube规则一致）
   npm install eslint @sonarsource/eslint-plugin-sonarjs --save-dev

1.2 实时编码示例

当写出问题代码时，SonarLint立即提示：

JavaScript
// 触发SonarLint告警（悬空Promise未处理）
async function fetchData() {
  const res = await fetch('/api'); // ⚠️ 警告: "Promises must be properly handled"
}

快速修复：

按下 Ctrl+. → 选择 Add error handling → 自动生成：

JavaScript
  async function fetchData() {
    try {
      const res = await fetch('/api');
    } catch (err) {
      console.error(err);
    }
  }

二、Git提交前：本地质量拦截

2.1 配置Git Hook（husky + lint-staged）

Bash
# 安装工具
npm install husky lint-staged --save-dev

Json
// package.json 配置
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{js,ts,vue}": [
    "eslint --fix",
    "sonar-scanner -Dsonar.analysis.mode=preview -Dsonar.projectKey=my_project"
  ]
}

2.2 拦截效果演示

当尝试提交问题代码时：

Bash
git commit -m "update"  
# 输出：
# ❌ SonarQube analysis failed: 
#   Critical: 1 (XSS vulnerability in src/login.js)
# 提交被终止，请先修复问题！

三、CI/CD流水线：自动化质量门禁

3.1 GitHub Actions集成方案

Yaml
name: CI/CD Pipeline
on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Install Node
        uses: actions/setup-node@v3
        with: { node-version: 18 }

      - run: npm install
      - run: npm run build

      # SonarQube扫描（PR时仅分析，合并时强制执行质量门禁）
      - name: SonarQube Scan
        if: github.event_name == 'pull_request'
        run: |
          sonar-scanner \
            -Dsonar.login=${{ secrets.SONAR_TOKEN }} \
            -Dsonar.analysis.mode=preview

      - name: SonarQube Quality Gate
        if: github.event_name == 'push'
        run: |
          sonar-scanner \
            -Dsonar.login=${{ secrets.SONAR_TOKEN }} \
            -Dsonar.qualitygate.wait=true # 阻塞直到通过

      # 部署阶段（仅当质量门禁通过后执行）
      - name: Deploy to Production
        if: success()
        uses: actions/deploy@v2
        with: { target: 'prod' }

3.2 关键配置说明

参数	作用
`sonar.analysis.mode=preview`	PR扫描时不阻塞流程，仅生成报告
`sonar.qualitygate.wait=true`	合并时强制要求通过质量门禁
`if: success()`	部署阶段依赖SonarQube扫描结果

四、SonarQube服务端配置

4.1 质量门禁规则（示例）

进入 Quality Gates → Create
设置前端专属规则：
- 安全指标：0 Critical漏洞（如XSS、未加密敏感数据）
- 可靠性：单元测试覆盖率 ≥ 70%
- 可维护性：技术债 ≤ 5天

Java
   // 后端API示例：通过REST API获取质量门禁状态
   GET /api/qualitygates/project_status?projectKey=my_project
   // 返回结果：
   { "projectStatus": { "status": "OK" } }

4.2 分支策略（适用于Git Flow）

Properties
# sonar-project.properties 添加
sonar.branch.name=feature/login
sonar.branch.target=develop

五、全流程效果演示

5.1 开发者视角

5.2 架构价值

左移质量检查：问题在本地IDE阶段即暴露
减少80%代码评审时间：基础问题由自动化工具过滤
部署安全网：阻止不合格代码进入生产环境

六个人经验总结

审查完毕后，可下载相关插件，配置后可生成审查报告，关于如何修改项目中出现的问题，我总结了以下几点规律，仅供参考。

1.已废除属性要及时根据官方指南更新

例如：

var 声明	let/const
function 构造函数	箭头函数/class
arguments 对象	剩余参数 ...args
for...in (无过滤)	Object.keys()+for...of

2.代码逻辑层级要更加精简，避免冗余

多层for循环，或者多层if else，可采用以下方案：

① 识别重复片段 ② 创建utils公共模块 ③ 使用策略模式封装差异点

3.If else 标签闭合要严格

对应关系要对应好，✓ if/else/try/catch必须完整闭合 ✓ 使用Prettier统一缩进✓ 配置IDE自动格式化

4.校验规则要遵守最新语法规范

校验规则部分有点旧，或者不符合规范

5.注释内容不要涉及代码内容，如果存在，要及时删除

遵循es6的语法规则，ES6语法规范：

强制要求： ✓ 使用const/let替代var ✓ 箭头函数替代function回调 ✓ 模板字符串替代拼接

实施工具：配置ESLint的prefer-const规则

6.一个函数逻辑过深，可封装为公共组件，使其可以复用。

7.框架迁移的时候，无用代码及时删除。 ————————————————————————————————————————————

🚀🚀🚀结束寄语

通过这套流程，让每一行代码都经历「开发→提交→部署」的自动化质量验证！

sonarQube全流程实战：从VSCode开发到CI/CD质量门禁