代码质量工具链

🛠️ 代码质量工具链：打造高质量代码的全流程解决方案

📊 代码静态分析

1. ESLint 配置与使用

// .eslintrc.js
module.exports = {"env": {"browser": true,"es2021": true,"node": true},"extends": ["eslint:recommended","plugin:@typescript-eslint/recommended"],"parser": "@typescript-eslint/parser","parserOptions": {"ecmaVersion": "latest","sourceType": "module"},"plugins": ["@typescript-eslint"],"rules": {"no-unused-vars": "warn","no-console": ["warn", { allow: ["warn", "error"] }],"complexity": ["warn", 10],"max-depth": ["warn", 4]}
}

2. SonarQube 代码质量检测

配置示例：

# sonar-project.properties
sonar.projectKey=my-project
sonar.sources=src
sonar.tests=tests
sonar.typescript.lcov.reportPaths=coverage/lcov.info
sonar.javascript.lcov.reportPaths=coverage/lcov.info# 质量阈
sonar.qualitygate.wait=true
sonar.qualitygate.threshold.coverage=80
sonar.qualitygate.threshold.duplicated_lines=3

3. TypeScript 类型检查

// tsconfig.json
{"compilerOptions": {"strict": true,"noImplicitAny": true,"strictNullChecks": true,"noUnusedLocals": true,"noUnusedParameters": true,"noImplicitReturns": true,"noFallthroughCasesInSwitch": true}
}

🎨 代码风格检查

1. Prettier 配置指南

// .prettierrc.js
module.exports = {printWidth: 100,tabWidth: 2,useTabs: false,semi: true,singleQuote: true,quoteProps: 'as-needed',trailingComma: 'es5',bracketSpacing: true,arrowParens: 'always',endOfLine: 'lf',overrides: [{files: '*.md',options: {proseWrap: 'always'}}]
};

2. StyleLint 样式规范

// .stylelintrc.js
module.exports = {extends: ['stylelint-config-standard','stylelint-config-prettier'],rules: {'color-hex-case': 'lower','color-hex-length': 'short','max-empty-lines': 1,'unit-allowed-list': ['px', 'em', 'rem', '%', 'vh', 'vw', 's']},ignoreFiles: ['dist/**/*.css']
};

3. EditorConfig 统一编辑器配置

# .editorconfig
root = true[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true[*.md]
trim_trailing_whitespace = false

🔄 自动化代码审查

1. GitHub Actions 工作流配置

# .github/workflows/code-review.yml
name: Code Reviewon:pull_request:branches: [ main, develop ]push:branches: [ main, develop ]paths-ignore:- '**.md'- 'docs/**'jobs:code-review:runs-on: ubuntu-lateststrategy:matrix:node-version: [16.x, 18.x]steps:- uses: actions/checkout@v3with:fetch-depth: 0- name: Setup Node.js ${{ matrix.node-version }}uses: actions/setup-node@v3with:node-version: ${{ matrix.node-version }}cache: 'npm'- name: Install dependenciesrun: npm ci- name: Run lintingrun: npm run lint- name: Run tests with coveragerun: npm run test:coverage- name: Run type checkrun: npm run type-check- name: Cache SonarCloud packagesuses: actions/cache@v3with:path: ~/.sonar/cachekey: ${{ runner.os }}-sonarrestore-keys: ${{ runner.os }}-sonar- name: SonarCloud Analysisuses: SonarSource/sonarcloud-github-action@masterenv:GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}- name: Upload coverage reportsuses: codecov/codecov-action@v3with:token: ${{ secrets.CODECOV_TOKEN }}flags: unittestsfail_ci_if_error: true- name: Check bundle sizeuses: andresz1/size-limit-action@v1with:github_token: ${{ secrets.GITHUB_TOKEN }}build_script: build

2. 高级 Husky 配置

// .huskyrc.js
const tasks = arr => arr.join(' && ');module.exports = {'hooks': {'pre-commit': tasks(['lint-staged','npm run test:affected','npm run type-check']),'commit-msg': tasks(['commitlint -E HUSKY_GIT_PARAMS','npm run verify-commit-msg']),'pre-push': tasks(['npm run test:coverage','npm run build'])}
};// lint-staged.config.js
module.exports = {'*.{js,jsx,ts,tsx}': ['eslint --fix','prettier --write','jest --bail --findRelatedTests'],'*.{css,scss,less}': ['stylelint --fix','prettier --write'],'*.{json,md,yml}': ['prettier --write'],'*.{png,jpeg,jpg,gif,svg}': ['imagemin-lint-staged']
};

3. 全面的代码审查清单

功能性检查

业务逻辑完整性
边界条件处理
错误处理机制
参数验证
异步操作处理
状态管理
用户体验考虑

技术实现检查

代码可读性

// Bad
const fn = x => x.split('').reverse().join('');// Good
const reverseString = (input) => {const characters = input.split('');const reversedCharacters = characters.reverse();return reversedCharacters.join('');
};

性能优化

// Bad
const items = Array.from({ length: 1000 }).map(() => {return heavyOperation();
});// Good
const items = Array.from({ length: 1000 }, heavyOperation);

内存管理

// Bad
class EventManager {constructor() {this.listeners = [];}addListener(listener) {this.listeners.push(listener);}
}// Good
class EventManager {constructor() {this.listeners = new WeakSet();}addListener(listener) {this.listeners.add(listener);}removeListener(listener) {this.listeners.delete(listener);}
}

安全性检查

// Bad
app.get('/api/user', (req, res) => {const data = JSON.parse(req.body.data);db.query(`SELECT * FROM users WHERE id = ${data.id}`);
});// Good
app.get('/api/user', (req, res) => {const schema = Joi.object({id: Joi.number().integer().required()});const { error, value } = schema.validate(req.body.data);if (error) {return res.status(400).json({ error: error.details });}db.query('SELECT * FROM users WHERE id = ?', [value.id]);
});

📈 高级 CI/CD 配置

1. Jenkins 声明式流水线

pipeline {agent {docker {image 'node:18-alpine'args '-p 3000:3000'}}environment {NODE_ENV = 'ci'npm_config_cache = 'npm-cache'}options {timeout(time: 1, unit: 'HOURS')disableConcurrentBuilds()buildDiscarder(logRotator(numToKeepStr: '10'))}stages {stage('Preparation') {steps {sh 'npm ci'sh 'npm audit'}}stage('Quality Gates') {parallel {stage('Linting') {steps {sh 'npm run lint'}}stage('Type Check') {steps {sh 'npm run type-check'}}stage('Unit Tests') {steps {sh 'npm run test:coverage'}}}}stage('Security Scan') {steps {sh 'npm run snyk:test'sh 'npm run owasp-dependency-check'}}stage('Build & Bundle Analysis') {steps {sh 'npm run build'sh 'npm run analyze-bundle'}}stage('Deploy') {when {branch 'main'}steps {sh 'npm run deploy'}}}post {always {junit '**/test-results/*.xml'publishHTML([allowMissing: false,alwaysLinkToLastBuild: true,keepAll: true,reportDir: 'coverage',reportFiles: 'index.html',reportName: 'Coverage Report'])cleanWs()}success {slackSend(color: 'good',message: "Build Successful: ${env.JOB_NAME} #${env.BUILD_NUMBER}")}failure {slackSend(color: 'danger',message: "Build Failed: ${env.JOB_NAME} #${env.BUILD_NUMBER}")}}
}

💡 高级工具链最佳实践

1. 团队协作规范

代码审查流程
- 审查范围定义
- 时间限制（24小时内响应）
- 分工机制（交叉审查）
- 沟通规范

文档规范

/*** 用户认证服务* @class AuthService* @implements {IAuthService}* * @example* ```typescript* const authService = new AuthService(config);* const token = await authService.authenticate(credentials);* ```*/
class AuthService implements IAuthService {/*** 验证用户凭证* @param {Credentials} credentials - 用户凭证* @returns {Promise<string>} JWT token* @throws {AuthError} 认证失败时抛出*/async authenticate(credentials: Credentials): Promise<string> {// 实现}
}

2. 监控与度量

性能指标
- 构建时间
- 测试覆盖率趋势
- 代码质量分数
- 技术债务比率

自动化报告

// 示例：自定义报告生成器
class QualityReportGenerator {async generateReport() {const metrics = await this.collectMetrics();const report = this.formatReport(metrics);await this.distribute(report);}private async collectMetrics() {return {coverage: await this.getCoverageMetrics(),complexity: await this.getComplexityMetrics(),dependencies: await this.getDependencyMetrics(),security: await this.getSecurityMetrics()};}
}