loading...

Automate updates of prettier, standard and other JavaScript linting tools using GitHub Actions

gr2m profile image Gregor Martynus ・2 min read

Automating npm dependencies using a service such as Greenkeeper is great! I would not be able maintain as many projects without that kind of automation.

However, linters such as Prettier or Standard are different. Every fix or new feature version introduces new formatting rules and might break your tests. If that happens, you end up waking up to notifications such as this:

List of broken prettier updates

In this blog post I will automate the updates of Prettier by creating pull requests which include the updated code. It won't prevent the issues from being created, but once merged the issues will get closed automatically.

Setup

  1. Install prettier in a repository if you haven't yet.
npm install --save-dev prettier
  1. Add two scripts to your package.json file: one to lint, and one to fix linting errors when possible:
{
  ...
  "scripts": {
    ...,
    "lint": "prettier --check '{src,test}/**/*' README.md package.json",
    "lint:fix": "prettier --write '{src,test}/**/*' README.md package.json"
  }
}

Adapt the passed file patterns '{src,test}/**/*' README.md package.json as needed to match your files.

  1. Install the Greenkeeper GitHub App. It's free for Open Source! You will receive an initial pull request that will update all your dependencies to their respective latest versions. Merge that pull request to finish the Greenkeeper setup.
  2. Create the file .github/workflows/update-prettier.yml
name: Update Prettier
on:
  push:
    branches:
      - greenkeeper/prettier-*
jobs:
  update_prettier:
    runs-on: ubuntu-latest
    steps:
      # make your repository's code available to the action
      - uses: actions/checkout@v1
      # setup Node 12. Change the version number to your preference
      - uses: actions/setup-node@v1
        with:
          version: 12
      # Install your package dependencies
      - run: npm ci
      # Fix linting errors with the new prettier version
      - run: npm run lint:fix
      # Create a pull request if there are any changes
      - uses: gr2m/create-or-update-pull-request-action@v1.x
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          title: "Prettier updated"
          body: "An update to prettier required updates to your code."
          branch: ${{ github.ref }}
          commit-message: "style: prettier"

This GitHub Action will run on the push event, but only if the branch starts with greenkeeper/prettier-. These are branches created as part of Greenkeeper's real-time monitoring. They get deleted again if your tests pass, otherwise Greenkeeper creates an issue like the ones shown in the screenshot above.

That's it. Next time a new Prettier version is released, you should see the new "Update Prettier" action doing it's thing:

Screenshot of Update Prettier action

You will see it in action with the next release of Prettier. I hope that will lower your maintenance overhead a little bit! Happy updating!

Posted on by:

gr2m profile

Gregor Martynus

@gr2m

Father of triplets Nico, Ada & Kian. Web developer with 20+ yrs experience. JavaScript Octokit Maintainer for GitHub. He/him

Discussion

markdown guide