Setting up Prettier in a Create React App project
Full stack dev who loves to experiment, learn new things, and write stupid simple code.
Search for a command to run...
Full stack dev who loves to experiment, learn new things, and write stupid simple code.
No comments yet. Be the first to comment.
When you run your application inside a Docker container, it will be assigned process identifier (PID) 1. This particular PID is special in the Unix world. PID 1 is assigned to the very first process that the kernel starts, therefore it takes a specia...
The classic test pyramid is made up of the unit, integration, and end-to-end tests. Unit tests are supposed to run fast after each change in your IDE and give immediate feedback. In contrast, integration and E2E tests are slow and are run on-demand. ...
Monorepos are all the rage right now. Modern projects are all using NX to set up a monorepo. But why would you introduce such a complex tool into your tech stack when something simple is often enough? Both Yarn and NPM include workspace management in...
I had a great weekend following the Learn Go with Tests online book. I spent about 15 hours going through the book and firing up a few practice projects. I know it’s not a lot to conclude, but I had enough experience with other languages to find the ...

# Yarn
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
# NPM
npm install -D prettier eslint-config-prettier eslint-plugin-prettier
By default your eslintConfig looks like this:
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
}
Let’s add Prettier and Prettier React to the extends array:
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest",
"plugin:prettier/recommended",
"prettier/react"
]
}
Your editor should pick up the eslint config change after saving package.json. Let’s add two scripts to our package.json, one for formatting and one for lining.
"format:js": "prettier --write src/**/*.{js,jsx,ts,tsx}",
"lint:js": "eslint src/**/*.{js,jsx,ts,tsx}"
(NOTE: I used js,jsx,ts,tsx in the patterns above. If you don’t have any files that match any of those patterns, then you will get an error. Feel free to remove extensions that you aren’t using)
If you are using TypeScript then you might want to add type checking to the lint script as well:
"lint:js": "tsc --noEmit && eslint src/**/*.{js,jsx,ts,tsx}"
git commitYou might want to automatically run the lint script before git commits. This can be achieved easily by using husky and lint-staged. Let’s start by installing them as dev dependencies:
# Yarn
yarn add -D husky lint-staged
# NPM
npm install -D husky lint-staged
```bash
Next you just need to add a few lines to your package.json:
```json
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx}": [
"yarn lint:js"
]
}