Docs: Expand description of how to use Code Quality ESLint component

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

  • Start this issue's title with Docs: or Docs feedback:.

Problem to solve

The instructions for using the GitLab-created CI/CD component for ESLine are unclear. Anyone unfamiliar with GitLab CI/CD components may find it difficult to create a working configuration.

Further details

I created this issue because I am having difficulty creating an example ESLint configuration. I want to do that to resolve #432800 (closed), which requested a current screenshot of code quality results in an MR. That issue is about 1.5 years old but it's still relevant.

To get an updated screenshot I thought I could copy Jannik's example JavaScript file, add ESLint, and get the updated screenshot quite quickly. However, it's proven to be a challenge because I'm not familiar with GitLab CI/CD components, ESLint, nor JavaScript. Regardless, I thought I could follow the instructions provided at https://docs.gitlab.com/ci/testing/code_quality/#eslint. I've been unable to get a working configuration and realize I need help from an SME.

Note

Screenshots are to be included in product documentation only if necessary. I'm still unsure if the screenshot referenced in the linked issue should be updated but at a minimum I'd like to get the ESLint example working.

Proposal

Provide more detailed instructions on how to integrate ESLint results in the merge request widget.

Who can address the issue

Only someone with sufficient knowledge of GitLab CI/CD components, ESLint, and GitLab CI/CD.

Other links/references

Edited by 🤖 GitLab Bot 🤖