Make sure all of your code is run through Prettier when you commit it to git. We achieve this by configuring prettier to run on git hooks using husky and lint-staged.
npm install --save-dev prettier @mediacurrent/prettier-config
Can be extended two ways:
Add the following to you package.json
"prettier": "@mediacurrent/prettier-config"
This method does not allow overrides. If overrides are needed, use the next method.
module.exports = {
...require("@mediacurrent/prettier-config"),
// Override here
semi: false,
};Unfortunately, Prettier does not have a way to extend a shared .prettierignore file so the one in this repo must be copied and pasted in to a new .prettierignore file at the root of your project.
To have prettier format all files before commit (to prevent unformatted files from being committed), follow these steps.
npm install --save-dev husky lint-staged
This will affect .js, .md, .mdx, .json, and .scss files. For this to work properly, eslint and stylelint need to have been configured properly.
Add the following husky and lint-staged commands to your package.json.
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,md,mdx,json}": "['prettier --write']",
"*.scss": "npm run lint:sass",
}
}The npm run lint:sass command is tied to the stylelint config and the jest test running suite.
A developer may or may not like having Prettier auto format when a file is saved. The pre-commit hook will always format the file, so that choice can be controlled the following way in VSCode:
Settings -> Text Editor -> Formatting -> Format on Save