Setup Next.js with ESLint and Prettier

Next.js ESLint Prettier, GO!


I'm going to leave out the preamble in this article and assume that if you're reading this, you already know all about Next.js, ESLint and Prettier, and you'd also know why you'd want to use them.

TL;DR

you can clone the starter repo here:
https://github.com/danownsthisspace/next-eslint-prettier
Or just add the following to your existing project

Packages

Add the following packages to your package.json file:

            
"devDependencies": {
    "babel-eslint": "^10.0.3",
    "eslint": "^6.5.1",
    "eslint-config-prettier": "^6.4.0",
    "eslint-loader": "^3.0.2",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-react": "^7.16.0",
    "prettier": "1.18.2",
    "webpack": "^4.41.1"
  }
            
          

Setup your formatting rules

Create .eslintrc.json in the root of your project and add the following:

            
{
	"env": {
		"node": 1,
		"browser": 1,
		"es6": true,
		"commonjs": true
	},
	"plugins": [
		"react",
		"prettier"
	],
	"extends": [
		"eslint:recommended",
		"plugin:react/recommended",
		"plugin:prettier/recommended"
	],
	"settings": {
		"react": {
			"version": "16.8.6"
		},
		"import/resolver": {
			"node": {
				"paths": [
					"./"
				]
			}
		}
	},
	"parser": "babel-eslint",
	"parserOptions": {
		"ecmaVersion": 6,
		"sourceType": "module",
		"ecmaFeatures": {
			"jsx": true,
			"experimentalObjectRestSpread": true,
			"modules": true
		}
	},
	"rules": {
		"prettier/prettier": "error",
		"react/prefer-stateless-function": 0,
		"linebreak-style": 0,
		"jsx-a11y/heading-has-content": 0,
		"jsx-a11y/href-no-hash": 0,
		"jsx-a11y/anchor-is-valid": 0,
		"no-underscore-dangle": 0,
		"react/no-find-dom-node": 0,
		"react/prop-types": 0,
		"no-nested-ternary": 0,
		"react/no-unescaped-entities": 0
	},
	"globals": {
		"grecaptcha": "readonly"
	}
}
            
          

Setup your Prettier config

Create .prettierrc in the root of your project and add the following:

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

Create a lint run process in package.json

            
"scripts": {
    "dev": "next dev",
    "lint": "eslint ./components/** ./pages/** -c .eslintrc.json --fix --ext js,jsx",
    "build": "next build",
    "start": "next start"
  }
            
          

Enable hot reloading

Add to or create a next.config.js file in the project root

Add this to the file:

            
const webpack = require('webpack')

module.exports = {
  webpack: (config, { dev }) => {
    if (dev) {
      config.module.rules.push({
        test: /\.js$/,
        loader: 'eslint-loader',
        exclude: ['/node_modules/', '/.next/', '/out/'],
        enforce: 'pre',
        options: {
          emitWarning: true,
          fix: true,
        },
      })
    }
    return config
  }
}
            
          

DONE!

That's it :) All you have to do now is try not mistakes! If you do, they will flood your terminal...