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.
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",
yarn correctly;concurrently:
"start:dev": "concurrently \"yarn:start\" \"yarn:prettier-watch\""
"start:dev": "concurrently \"yarn start\" \"yarn run prettier-watch\""