How to configure Prettier in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Maintaining consistent code formatting across a team becomes challenging without automated tools, leading to messy diffs and style debates in code reviews. With over 12 years of React development experience since 2014 and as the creator of CoreUI, I’ve configured Prettier for countless production projects. Prettier is an opinionated code formatter that automatically formats JavaScript, JSX, CSS, and other files on save or commit. The setup involves installing Prettier, creating a configuration file, and optionally integrating it with ESLint to avoid rule conflicts.
Install Prettier and create a configuration file to enforce consistent code formatting.
npm install --save-dev prettier
Create .prettierrc in your project root:
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "none",
"printWidth": 80,
"arrowParens": "avoid",
"jsxSingleQuote": true
}
Create .prettierignore:
build
dist
node_modules
coverage
*.min.js
Add scripts to package.json:
"scripts": {
"format": "prettier --write \"src/**/*.{js,jsx,json,css,md}\"",
"format:check": "prettier --check \"src/**/*.{js,jsx,json,css,md}\""
}
Best Practice Note
Install eslint-config-prettier to disable ESLint formatting rules that conflict with Prettier: npm install --save-dev eslint-config-prettier and add "prettier" to your ESLint extends array. Most editors support format-on-save—in VS Code, install the Prettier extension and enable "editor.formatOnSave": true. For automatic formatting on commit, use husky and lint-staged. This is the exact Prettier configuration we use in CoreUI React projects to maintain clean, consistent code across thousands of components.
