Autoformat Code With Prettier

Code formatting is one of those tasks that can take up a lot of time and mental energy. Luckily, Prettier exists to handle it for us automatically. It’s an opinionated code formatter that supports many languages and integrates with most editors.

Prerequisites

Before diving in, make sure you have:

• Node.js installed
• A code editor (VS Code recommended)
• Basic familiarity with the command line
• A project initialized with npm init

Cheat Sheet

Here’s a quick reference for the most important Prettier commands and configurations:

1. Install Prettier: npm install --save-dev prettier
2. Format a file: npx prettier --write .
3. Check formatting: npx prettier --check .
4. Create config file: .prettierrc
5. Create ignore file: .prettierignore

Installation

Getting started with Prettier is straightforward. Install it as a dev dependency:

npm install --save-dev prettier

Create a .prettierrc configuration file in your project root:

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
}

Create a .prettierignore file to exclude files you don’t want to format:

node_modules
build
dist
coverage

Now you can format all files in your project:

npx prettier --write .

Or check if files are already formatted:

npx prettier --check .

VS Code Integration

For the best experience, install the Prettier - Code formatter extension in VS Code. Then add these settings to your .vscode/settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

This will automatically format your files every time you save.

Integrations

ESLint

Prettier and ESLint can work together, but they may conflict on some rules. To solve this, use eslint-config-prettier to disable ESLint rules that conflict with Prettier:

npm install --save-dev eslint-config-prettier

Then add "prettier" to the extends array in your ESLint config:

{
  "extends": [
    "eslint:recommended",
    "prettier"
  ]
}

This way ESLint handles code quality rules while Prettier handles formatting.

Husky

To make sure all committed code is properly formatted, you can use Husky with lint-staged to run Prettier as a pre-commit hook:

npm install --save-dev husky lint-staged
npx husky install
npx husky add .husky/pre-commit "npx lint-staged"

Add lint-staged configuration to your package.json:

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,css,md,json}": "prettier --write"
  }
}

Now every time you commit, Prettier will automatically format the staged files. This ensures consistent formatting across your entire team.

Resources

• Prettier Documentation
• Prettier Playground
• ESLint Config Prettier
• Husky Documentation
• lint-staged Documentation

Closing Notes

Prettier is one of those tools that you set up once and it saves you countless hours. No more debates about code formatting in code reviews - just let Prettier handle it.

Final Thoughts

1. Start by installing Prettier and configuring it for your project
2. Set up your editor to format on save
3. Integrate with ESLint to avoid conflicts
4. Add Husky pre-commit hooks for team consistency
5. Focus on writing code, not formatting it