Javascript – How to get prettier errors in terminal when starting react app?

Problem:

Disclaimer, I am not using eslint-plugin-prettier, I do not want to run it as a linting task, I want linting and formatting to stay separated. Plus it affects the performance of these steps a little.

I am wondering, how to get prettier formatting warnings/errors as I get when using eslint. When eslint finds and issue, the build from create-react-app shows me the errors in my terminal. Prettier does not.

What I tried was:

"start:dev": "yarn start & yarn prettier-watch",
"prettier-watch": "onchange \"**/*\" -- prettier --check --config .prettierrc.json --ignore-unknown {{changed}}"

The prettier-watch script works if I run it manually, but it doesn’t work when I let the start script run it. What happens is that the output from prettier shows for a split second and then disappears when the build is done.

Reason why I am doing this: other collaborators might not do auto-formatting using their editor, and I don’t want to show errors everywhere in the IDE, just a kind reminder in the terminal that what they changed could/should be formatted with prettier. I am also adding this check as a step in the CI pipeline.

I wonder how eslint is configured to integrate with the build of create-react-app and output those errors, would be helpful.

Solution:

I wouldn’t use the single ampersand to run the two commands in parallel, as it requires UNIX-like environment (not specified in the question, but being Node.js not UNIX-specific I can assume there may be Windows-based collaborators). Also pay attention that NPM, Yarn and similar tools may try to mitigate the differences between shells by allowing only a subset of operators.

There are many npm packages that tackles this issue, e.g.:

• npm-run-all with the --parallel option (or shortly as run-p):

  "start:dev": "npm-run-all --parallel start prettier-watch",
  

  Note that, despite the name, it supports yarn correctly;

• concurrently:

  "start:dev": "concurrently \"yarn:start\" \"yarn:prettier-watch\""
  

  or with explicit command

  "start:dev": "concurrently \"yarn start\" \"yarn run prettier-watch\""
  

  Note that the double quotes (that needs to be escaped) are required.