How to visualize ESLint errors on Github!

Today I'm going to write about a very underrated technique that allows you to display ESLint errors more visually in Github! We are going to use a Github Action by Andrew Taylor which can inline-display the ESLint errors on pull requests.

Let's see how the Action is advertised:

This feature is possible by leveraging Github Actions "Annotations", a for now pretty underutilized feature of Github Actions! However, Github is pushing this feature a lot, as they have recently changed the UI that appears when you click on an Action run.

Instead of seeing the output of the workflow, I now see an empty page that says "No artifacts, no annotations". At first I was frustrated because I had to make one more click, but if you set up annotations correctly, this new UI is actually pretty nice!

So let's set up the Github Action.

In your ESLint command, you have to generate a JSON:

- eslint src
+ eslint --output-file eslint_report.json --format json src

and then add this as the last step to your workflow.yml file:

    - name: Annotate Code Linting Results
      uses: ataylorme/eslint-annotate-action@1.0.4
      if: always()
      with:
        repo-token: '${{ secrets.GITHUB_TOKEN }}'
        report-json: 'eslint_report.json'

That's it, now the ESLint errors will be annotations on your pull requests!

I have personally tweaked my configuration a bit more.

1. The original action only adds annotations for pull requests and but I would personally also like the annotations to appear for normal runs on master branch. It is trivial to fork Github Actions and change them to your liking! Instead of ataylorme/eslint-annotate-action@1.0.4, you can use JonnyBurger/eslint-annotate-action@1.0.8 if you would like the annotations to always appear.

2. If you add the --output parameter to the ESLint command, you will not see the errors in the command line and only get a JSON file. So I tweaked the ESLint command that it will only generate a JSON file while in a Github environment:
   

eslint $([ -z \"$GITHUB_WORKSPACE\" ] && echo \"\" || echo \"--output-file eslint_report.json --format json\") src

And this is how it looks in the end!