Skip to main content
Mapagam

Implementing Code Quality Checks

1. Using Code Quality Template

Example: Include code quality template in a GitLab CI job

include:
  - template: Code-Quality.gitlab-ci.yml

job_name:
  script:
    - echo "Running code quality checks"
Property Description Default Value
include.template Specifies the GitLab CI template to use for code quality checks Code-Quality.gitlab-ci.yml
variables.CODE_QUALITY_DIR Directory to run code quality checks in ./
variables.CODE_QUALITY_REPORTS_DIR Directory where code quality reports are stored ./code-quality-reports
Note: The code quality template is part of GitLab's built-in CI templates and includes tools like eslint, rubocop, and sonarqube-scanner.
Warning: Ensure that the project's dependencies are installed before running code quality checks to avoid failures.

Summary of Code Quality Template Components

  • Supports multiple languages (JavaScript, Ruby, Python, etc.)
  • Integrates with SonarQube for advanced code analysis
  • Can be customized via environment variables and job overrides

2. Running Linting Jobs

Job Name Configuration Description
lint 
lint:
  stage: test
  script:
    - npm run lint
  artifacts:
    reports:
      eslint: gl-code-quality-report.json
 Runs ESLint on JavaScript/TypeScript files
stylelint 
stylelint:
  stage: test
  script:
    - npm run stylelint
  artifacts:
    reports:
      stylelint: gl-code-quality-report.json
 Checks CSS and SCSS files for style issues

Example: ESLint Configuration

{
  "extends": ["eslint:recommended", "plugin:vue/vue3-essential"],
  "plugins": ["vue"],
  "rules": {
    "vue/multi-word-component-names": "off"
  }
}
Note: Ensure eslint and stylelint are installed as dev dependencies.
Warning: Artifacts must be reported in gl-code-quality-report.json format to display in GitLab UI.

3. Running Static Analysis

Example: Using ESLint in a GitLab CI Job

lint:
  stage: test
  script:
    - npm install
    - npm run lint
  artifacts:
    reports:
      eslint: gl-container-reports/eslint.json
Property Description Values Notes
script Command to run static analysis npm run lint Can be any command that outputs results in a standard format
artifacts.reports.eslint Path to ESLint report file gl-container-reports/eslint.json Used by GitLab to display results in UI
Note: GitLab CI supports various static analysis tools like ESLint, SonarQube, and others. The artifacts.reports section is required to display results in the GitLab UI.

4. Configuring Code Quality Thresholds

Threshold Type Configuration Description
coverage 80% Minimum code coverage percentage required for a job to pass
complexity 10 Maximum cyclomatic complexity allowed per function
lines 100 Maximum number of lines in a single function
maintainability 0.8 Minimum maintainability index (0 to 1)

Example: Setting Code Quality Thresholds in .gitlab-ci.yml

code_quality:
  image: registry.gitlab.com/gitlab-org/security-products/analyzers/code-quality:latest
  script:
    - /usr/local/bin/code-quality-analyzer --threshold=80 --complexity=10
  artifacts:
    reports:
      codequality: gl-code-quality-report.json
Note: Code quality thresholds can be adjusted per project or group in GitLab settings.

5. Using Code Climate Integration

Feature Description Configuration Notes
codeclimate Static code analysis tool for GitLab CI/CD codeclimate Integrates with GitLab's code quality reports
engine CodeClimate engine to run javascript, python, ruby Supports multiple languages
config_file Path to CodeClimate config file .codeclimate.yml Optional, defaults to root config

Example: Code Climate Configuration in .gitlab-ci.yml

stages:
  - test
  - quality

quality:
  stage: quality
  image: codeclimate/codeclimate:latest
  script:
    - codeclimate analyze
  artifacts:
    reports:
      codequality: gl-code-quality-report.json
Note: CodeClimate requires a valid .codeclimate.yml file in the project root to define rules and engines.
Warning: Ensure the CodeClimate image is compatible with your GitLab runner environment.

6. Generating Code Coverage Reports

Option Values Description
coverage none, lines, branches, functions, statements Specifies the type of coverage to generate. Default is none.
coverage_format lcov, cobertura Format of the coverage report. Default is lcov.
coverage_path string Path to the coverage report file(s). Supports glob patterns.

Example: Configuring Code Coverage in GitLab CI

coverage:
  format: lcov
  path: coverage/lcov.info

test:
  script:
    - npm run test
    - npm run coverage
  artifacts:
    reports:
      coverage: coverage/lcov.info
Note: Code coverage reports are generated during the job execution and can be used to enforce minimum coverage thresholds in later stages.

7. Using Coverage Visualization

Example: Setting up Code Coverage in GitLab CI

coverage:
  script:
    - npm install
    - npm run test:coverage
  artifacts:
    paths:
      - coverage/
    expire_in: 1 week
Setting Description Value
coverage.artifacts.paths Directory containing coverage reports coverage/
coverage.artifacts.expire_in Time after which artifacts expire 1 week
Note: Coverage reports must be in a format supported by GitLab (e.g., Cobertura, JaCoCo).

Supported Coverage Report Formats

  • Cobertura: XML format, widely supported
  • JaCoCo: XML format, Java-based projects
  • LCov: Text-based, used by Node.js tools like Istanbul

Steps to Visualize Coverage

  1. Run tests with coverage enabled
  2. Store coverage reports as artifacts
  3. Use GitLab's built-in coverage visualization

8. Implementing Quality Gates

Gate Type Description Configuration Example Status
Code Coverage Ensures a minimum percentage of code is covered by tests coverage: 80% NEW
Security Scan Checks for vulnerabilities in dependencies and code 
security:
  enabled: true
  scan:
    severity: high
 NEW
Linting Enforces code style and syntax rules 
lint:
  enabled: true
  rules:
    - eslint
 DEPRECATED

Example: Code Coverage Gate

quality_gate:
  stage: quality
  script:
    - npm run test:coverage
  artifacts:
    reports:
      coverage: coverage/lcov.info
  only:
    - main
Note: Code coverage thresholds can be configured in .gitlab-ci.yml or via project settings.
Warning: Quality gates are evaluated after each job completes. If a gate fails, the pipeline stops.
Metric Description Tool/Integration Reporting
Code Coverage Percentage of code lines executed during tests coverage tools (e.g., Istanbul, JaCoCo) GitLab CI/CD reports, coverage artifacts
Code Complexity Measures cyclomatic complexity of functions/methods sonarqube, eslint GitLab Code Quality reports, codeclimate
Technical Debt Estimated time to fix issues (e.g., code smells, bugs) sonarqube, codeclimate GitLab Code Quality dashboard, sonarqube UI
Code Duplication Percentage of duplicated code blocks sonarqube, simian GitLab Code Quality reports, sonarqube analysis

Example: Code Coverage Report Configuration

coverage:
  script:
    - npm run test -- --coverage
  artifacts:
    reports:
      coverage: coverage/lcov.info
Note: GitLab CI/CD supports lcov and cobertura formats for coverage reports.
  1. Run code quality checks in each CI job using tools like sonarqube
  2. Upload reports to GitLab using gitlab-ci.yml artifacts or API
  3. View trends in the Code Quality section of the GitLab project
  4. Analyze metrics over time using GitLab Metrics or external dashboards

10. Customizing Code Quality Tools

Tool Configuration File Customization Options Notes
ESLint .eslintrc.yml Rules, plugins, environments Supports custom rule sets and extends configurations
Prettier .prettierrc Formatting rules, overrides Can be integrated with ESLint for consistent formatting
SonarQube sonar-project.properties Analysis rules, exclusions, quality gates Supports custom quality profiles and rule sets
CodeClimate .codeclimate.yml Engines, configurations, exclusions Allows custom engine settings and rule overrides

Example: Customizing ESLint Rules

{
  "extends": ["eslint:recommended"],
  "rules": {
    "no-console": "warn",
    "eqeqeq": ["error", "always"]
  }
}

Example: Configuring Prettier

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5"
}
Note: Custom configurations should be version-controlled and shared across the team to ensure consistency.

Was this article helpful?

Related Cheat Sheets