Add Code Formatting with Prettier to Next.js Project
1 min readSep 1, 2023
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.
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"
}
}