Prettier

Created: 2018-08-06 15:35:43 -0700 Modified: 2020-10-01 17:40:27 -0700

Background (reference)

Prettier autoformats JavaScript code.

Troubleshooting

Markdown dollar signs get escaped () (reference)

Note that this is only a problem when you don’t want to use math blocks, otherwise escaping the dollar sign is very important.

To fix this, you can make a .prettierignore with _.md and _.mdx in it.

If you have a prettierignore and it’s still not working, then perhaps you don’t have the file open through your workspace, so it’s using the default Prettier that VSCode has built-in.

JSON won’t prettify

I get an error message saying that it expects a semicolon where it is definitely supposed to be a colon:

[error] packagesclientcreateassetmapassetmap.json: SyntaxError: Unexpected token, expected ";" (2:18)
[error] 1 | {
[error] > 2 | "blockly_media": "https://d3dby02bhz36nw.cloudfront.net/assets/blockly_media_1",

First, you should verify that your JSON file actually is correct by using this site (although make sure to set Options → —parser → json).

If that works, then verify that this command works:

.node_modules\binprettier.cmd —parser json <path to file>

If that works, then you may just need to specify the parser for JSON files. I was running prettier through NPM scripts, so here’s what I had (bad parts bolded):

{
  "scripts": {
    "precommit": "lint-staged",
    "prettier": "prettier --write \packages/**/*.{js,json}\"
  },
  "lint-staged": {
    "*.{js,json,md}": [
      "prettier --write",
      "git add"
    ]
  },
}

…and here’s what I ended up with:

{
  "scripts": {
    "precommit": "lint-staged",
    "prettier": "prettier --write \packages/**/*.js\ && prettier --parser json --write \packages/**/*.json\"
  },
  "lint-staged": {
    "*.{js,md}": [
      "prettier --write",
      "git add"
    ],
    "*.json": [
      "prettier --parser json --write",
      "git add"
    ]
  },
}

As you can see, I had to split JS and JSON so that I could specify the right parser.