Using Prettier to check JavaScript code style in GitHub Actions#

I decided to adopt Prettier as the JavaScript code style for Datasette, based on my success with Black for Python code.

I added .prettierrc to the root of the repo with the following settings:

1
{
2
  "tabWidth": 2,
3
  "useTabs": false
4
}

Then I created the following .github/workflows/prettier.yml file:

1
name: Check JavaScript for conformance with Prettier
2

3
on:
4
  push:
5
  pull_request:
6

7
jobs:
8
  prettier:
9
    runs-on: ubuntu-latest
10
    steps:
11
    - name: Check out repo
12
      uses: actions/checkout@v2
13
    - uses: actions/cache@v2
14
      name: Configure npm caching
15
      with:
16
        path: ~/.npm
17
        key: ${{ runner.os }}-npm-${{ hashFiles('**/workflows/prettier.yml') }}
18
        restore-keys: |
19
          ${{ runner.os }}-npm-
20
    - name: Run prettier
21
      run: |-
22
        npx prettier --check 'datasette/static/*[!.min].js'

The npx prettier --check 'datasette/static/*[!.min].js' line ensures that prettier is run in “check” mode (which fails the tests if a matching file does not conform to the formatting rules) - it checks any .js file in the datasette/static folder but excludes any .min.js minified files.

I’m using npx to run Prettier which installs it if it is missing - as far as I can tell npx respects the .npm cache so I’m using that to avoid downloading a new copy of Prettier every time. UPDATE: Apparently it doesn’t, see #1169

I decided to use the hash of the prettier.yml file itself as the key for the cached data, so any time I change the workflow it should invalidate the cache.