Prettier: Solve Formatting Arguments Forever

Stop arguing about tabs vs spaces. Let Prettier decide and move on.

The Problem

Code formatting discussions:

• Tabs or spaces?
• Semicolons or not?
• Single or double quotes?

These arguments are endless and pointless. Time spent debating formatting is time not spent building.

The Solution

Prettier. It formats your code. You don't have to think about it.

Setup

npm install -D prettier

Config file (`.prettierrc`):

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100
}

Usage

# Check files
npx prettier --check "src/**/*.{js,jsx,ts,tsx}"

# Fix files
npx prettier --write "src/**/*.{js,jsx,ts,tsx}"

VS Code Integration

Install the Prettier extension, then in settings:

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

Now files format automatically when you save. No thinking required.

Ignore Files

`.prettierignore`:

node_modules
dist
build
coverage
*.min.js

With ESLint

Prettier handles formatting. ESLint handles code quality. Don't let them fight.

npm install -D eslint-config-prettier

In `.eslintrc`:

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

`eslint-config-prettier` disables ESLint rules that conflict with Prettier.

Pre-commit Hook

Don't let unformatted code get committed:

npm install -D husky lint-staged

`package.json`:

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix"]
  }
}

npx husky init
echo "npx lint-staged" > .husky/pre-commit

Now code is formatted automatically on commit.

My Config

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "avoid"
}

Is this the "right" config? Doesn't matter. What matters is consistency.

Pick something. Stop arguing. Ship code.

Back to Journal