Configure Prettier and lint-staged in a existing NextJS app

Learn to clean and format your code automatically

1. Install and configure prettier

Install eslint prettier dependency

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

Install typescript eslint

Checkout the the official documentation

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin 

Configure your existing ESLint config file

Add Prettier in the extends section of the .eslintrc.json file.

Also add typescript eslint in the extends, parser and plugins sections.

Finally, add some rules: no-unused-vars and @typescript-eslint/no-unused-vars are the same so in order to only have one error message we are going to turn off eslint and relay only on tslint for this rule.

{
  "extends": ["next/core-web-vitals", "prettier", "plugin:@typescript-eslint/recommended"],
  "rules": {
    "react/no-unescaped-entities": 0,
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": ["error"]
  },
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"]
}

Add .eslintignore file if you want to configure files or folders to ignore. For example:

node_modules
dist
coverage
src/gql

Configure your Prettier configuration

Add a file called .prettierrc

{
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": false,
  "printWidth": 120,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

Add .prettierignore file

Add folders that you want to exclude from being formatted. For example:

/cache
data
.next
coverage
.yarn
.next
dist
node_modules
src/gql
.github

Add .editorconfig file

This step is optional but this helps to keep the same style among developers

# EditorConfig is awesome: http://EditorConfig.org
# top-most EditorConfig file
root = true
[*]
# Unix-style newlines with a newline ending every file
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
# 2 spaces for indentation
indent_size = 2
indent_style = space
# 120 characters max per line
max_line_length = 120

2. Format existing code

Before configuring VS Code prettier plugin and Husky to automatically run prettier on each commit we will format the all the code first.

Run the command:

npx prettier --write .

3. Configure lint-staged to automatically clean and format code

Install lint-staged

npm install --save-dev lint-staged 

Configure lint-staged. Create the file .lintstagedrc.js

const path = require("path"); const buildEslintCommand = filenames => `next lint --fix --file ${filenames.map(f => path.relative(process.cwd(), f)).join(" --file ")}`; module.exports = { "*.{js,jsx,ts,tsx}": [buildEslintCommand, "prettier --write"] };

Install Husky

npm install husky --save-dev

Enable Git hooks

npx husky install

Add prepare script to your package.json

"prepare":"husky install"

Create a hook

npx husky add .husky/pre-commit "npx lint-staged"

4. Test

Modify a file, then git commit it.

Results: It should be automatically lint fixed and formatted