Prettier and ESLint Setup
Add Prettier for automatic formatting and ESLint for catching errors, configure both tools, and integrate them into a save-on-format workflow.
Why Automate Code Style?
Manual code formatting debates waste team time. Prettier auto-formats code to a consistent style. ESLint catches bugs and enforces best practices. Together they eliminate whole categories of code review comments.
Installing Prettier
Install Prettier as a dev dependency, create a config file, and add a format script to package.json. Prettier needs no config to work — defaults are sensible — but you can customise them.
npm install --save-dev prettier
# .prettierrc (optional config)
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 80
}