Add Code Formatting with Prettier to Next.js Project

Code quality tools are a must when you want code-styling consistency in your team. Eslint, Prettier with Husky and lint-staged are perfect match for Next.js apps.

Photo by Kelly Sikkema on Unsplash

However, configuring them in existing Next.js codebase without breaking default eslint rules sometimes become confusing. But gather around it’s a simple job with this tutorial.

First lets install dependencies.

$ npm install -D prettier eslint-plugin-prettier eslint-config-prettier prettier-plugin-tailwindcss

Add prettier config file: .prettierrc.json

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true,
  "bracketSpacing": true,
  "tabWidth": 2,
  "printWidth": 100,
  "plugins": [
    "prettier-plugin-tailwindcss"
  ]
}

Update .eslintrc.json file as following:

{
  "extends": [
    "next/core-web-vitals",
    "plugin:prettier/recommended"
  ]
}

And you are done!

Bonus: Auto linting while committing

Run following to install Husky, lint-staged which adds a git hook to run linting while committing.

$ npx mrm lint-staged

Bonus: VSCode integration

Add following workspace settings .vscode/settings.json to enable format on save:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}