ESLint Next.js Config

Initial Setup

1. Install the package:

yarn add -DW eslint husky lint-staged prettier @neuledge/eslint-config-next

2. Create a .eslintrc.json file with the following content:

{
  "extends": "@neuledge/next",

  "settings": {
    "next": {
      "rootDir": ["path/to/next/project"]
    }
  }
}

Make sure you update the path path/to/next/project to all the root project directories on Next.js.

3. Create a .prettierrc.json file with the following content:

{
  "singleQuote": true
}

4. Add the following scripts to your package.json:

{
  "scripts": {
    "prepare": "husky install || echo \"skip husky\"",
    "fix": "yarn lint:fix",
    "lint": "eslint . --ext \"js,jsx,ts,tsx,mjs,cjs\"",
    "lint:fix": "yarn lint --fix",
    "lint:strict": "yarn lint --max-warnings 0"
  }
}

5. Add lint-state to the end of your package.json file:

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,mjs,cjs}": "eslint"
  }
}

6. Install and configure husky:

yarn prepare
yarn husky add .husky/commit-msg 'NODE_OPTIONS="--max_old_space_size=4096" npx --no-save lint-staged'

Usage

Linting

yarn lint

Fixing Linting Errors

yarn fix

Strict Linting

(Best used in CI)

yarn lint:strict