Adopt Prettier for JavaScript code formatting

[simonw]

https://prettier.io/ - I'm going to go with 2 spaces.

[simonw]

I want a CI check that confirms that files conform to prettier - but only datasette/static/*.js files that are not already minified.

This seems to do the job:

npx prettier --check 'datasette/static/*[!.min].js'

[simonw]

This action looks good - tag 3.2 is equivalent to this commit hash: https://github.com/creyD/prettier_action/tree/bb361e2979cff283ca7684908deac8f95400e779

[simonw]

Maybe not that action actually - I wanted to use a pre-built action to avoid installing Prettier every time, but that's what it seems to do: https://github.com/creyD/prettier_action/blob/bb361e2979cff283ca7684908deac8f95400e779/entrypoint.sh#L28-L37

[simonw]

I think this should work:

- uses: actions/cache@v2
  with:
    path: ~/.npm
    key: ${{ runner.os }}-node-${{ hashFiles('**/prettier.yml' }}

I'll use the prettier.yml workflow that I'm about to create as the cache key for the NPM cache.

[simonw]

Tests passed in https://github.com/simonw/datasette/runs/1631677726?check_suite_focus=true

I'm going to try submitting a pull request with badly formatted JavaScript to see if it gets caught.

[simonw]

Oops, committed that bad formatting test to main instead of a branch!

[simonw]

https://github.com/simonw/datasette/runs/1631682372?check_suite_focus=true failed!

[simonw]

Wrote a TIL about this: https://til.simonwillison.net/github-actions/prettier-github-actions

[simonw]

I should configure the action to only run if changes have been made within the datasette/static directory.

[thorn0]

Hi! I don't think Prettier supports this syntax for globs: datasette/static/*[!.min].js Are you sure that works?
Prettier uses https://github.com/mrmlnc/fast-glob, which in turn uses https://github.com/micromatch/micromatch, and the docs for these packages don't mention this syntax. As per the docs, square brackets should work as in regexes (foo-[1-5].js).

Tested it. Apparently, it works as a negated character class in regexes (like [^.min]). I wonder where this syntax comes from. Micromatch doesn't support that:

micromatch(['static/table.js', 'static/n.js'], ['static/*[!.min].js']);
// result: ["static/n.js"] -- brackets are treated like [!.min] in regexes, without negation