Stylelint Gitlab Codequality Formatter

Formatter that transforms Stylelint reports into a format suitable for use with GitLab widgets.

The source code is hosted on GitLab. Although there is an automatic mirror of this repository on GitHub, all bug reports, feature requests, and merge requests should be submitted through GitLab.

Usage

Install stylelint and @gitlab-formatters/stylelint-formatter-gitlab using your package manager:

npm install --save-dev stylelint @gitlab-formatters/stylelint-formatter-gitlab

yarn add --dev stylelint @gitlab-formatters/stylelint-formatter-gitlab

To use in your project, simply run:

npx stylelint . --custom-formatter=@gitlab-formatters/stylelint-formatter-gitlab

For integration with GitLab CI, add the following to your .gitlab-ci.yml:

stylelint:
  image: node:20.14.0-alpine3.20
  stage: codequality
  script:
    - npm ci
    - npx stylelint . --custom-formatter=@gitlab-formatters/stylelint-formatter-gitlab --output-file=gl-codequality.json
  artifacts:
    reports:
      codequality: gl-codequality.json

Report Example

Below is a JSON example of how the formatter reports issues.

This particular example outputs a detailed report that goes beyond the minimal fields required by GitLab's code quality widgets.

While GitLab requires only a subset of fields according to the Gitlab Code Quality specification, this formatter implements the full set of fields as outlined in the Code Climate Issue Data Type specification.

This comprehensive implementation enhances the depth of information available and facilitates better issue tracking and resolution.

[
  {
    "type": "issue",
    "check_name": "unit-no-unknown",
    "description": "Unexpected unknown unit \"pp\" (unit-no-unknown)",
    "content": {
      "body": "Error found in unit-no-unknown. See https://stylelint.io/user-guide/rules/unit-no-unknown for more details."
    },
    "categories": [
      "Style"
    ],
    "location": {
      "path": "src/app.module.scss",
      "lines": {
        "begin": 2,
        "end": 2
      },
      "positions": {
        "begin": {
          "line": 2,
          "column": 14
        },
        "end": {
          "line": 2,
          "column": 16
        }
      }
    },
    "severity": "major",
    "fingerprint": "d87ffdeffd6374e748011a709a4d648a"
  }
]

You can see an example of the widget and how errors are displayed in Merge Request #1.

This merge request includes detailed examples and explanations of the widget's functionality, showcasing how it integrates with GitLab to display code quality issues reported by Stylelint.

Contributing

If you'd like to contribute to this project, please read through CONTRIBUTING.md file.

Changelog

Changelog is automatically generated based on semantic-release and conventional commits.

See the CHANGELOG.md file for detailed lists of changes for each version.

License

MIT License. See the License File for more information.

Contact

If you have any questions or suggestions, feel free to reach out by:

• Email: [email protected]
• X/Twitter: https://x.com/zavoloklom
• GitHub: https://github.com/zavoloklom