Automate updates of prettier, standard and other JavaScript linting tools using GitHub Actions
Tags: javascript, github, npm, devops
Published: 2019-11-23 00:17:58

Automating npm dependencies using a service such as [Greenkeeper](https://greenkeeper.io/) is great! I would not be able maintain as many projects without that kind of automation.

However, linters such as [Prettier](https://prettier.io/) or [Standard](https://standardjs.com/) 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](https://thepracticaldev.s3.amazonaws.com/i/z6p9gkf1qz1hbqf01fxm.png)

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.  

```shell
npm install --save-dev prettier
```

2. Add two scripts to your `package.json` file: one to lint, and one to fix linting errors when possible:

```json
{
  ...
  "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.
3. Install the [Greenkeeper](https://github.com/marketplace/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.
4. Create the file `.github/workflows/update-prettier.yml`

```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](https://developer.github.com/v3/activity/events/types/#pushevent), but only if the branch starts with `greenkeeper/prettier-`. These are branches created as part of [Greenkeeper's real-time monitoring](https://greenkeeper.io/faq.html#branch-deletions). 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](https://thepracticaldev.s3.amazonaws.com/i/lafchhd1ityh5l5t6qm9.png)

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!