Glob Pattern Not Working? Don't Forget the 'Quotes'

Our team uses prettier to keep the formatting of our javascript/typescript code consistent. Recently, I was adding a couple of NPM scripts for checking and fixing prettier formatting to one of our repos.

{
  "scripts": {
    "pretty": "prettier -l **/*.{js,ts}",
    "pretty:fix": "prettier --write **/*.{js,ts}"
  }
}

That glob pattern says "in any directory, look for any file ending in .js or .ts".

So I fixed up all formatting by running npm run pretty:fix and then I committed that change. I also added a CI job that runs npm run pretty just to make sure we catch formatting issues in PRs automatically. Then I made my PR and much to my surprise, the new CI job failed.

Turns out when I was running locally my glob pattern wasn't checking every file, but in the CI environment (which runs a different shell than my dev box) it was finding all files. A much-smarter-than-me coworker pointed out that I didn't put quotes around my glob pattern, which means the shell determines how to glob instead of passing the glob string to prettier. So I updated the package.json with:

{
  "scripts": {
    "pretty": "prettier -l '**/*.{js,ts}'",
    "pretty:fix": "prettier --write '**/*.{js,ts}'"
  }
}

Notice the single quote marks around the glob patterns. Note, I could have also used escaped double quotes: \"**/*.{js,ts}\".

And that's why you always put quotes around glob patterns.