Setting up ESLint and Prettier for NextJs

Setting up ESLint for NextJs.md

ESLint requires a few additional configurations to be set up optimally for use with Next JS.

To start off with, install eslint, eslint-plugin-react,

npm i --save-dev eslint eslint-plugin-react

Next, create a .eslintrc file using the following:

eslint --init

Use the arrow keys to select: Use a popular style guide -> Standard -> JSON. Install any additional dependencies required.

An eslintrc.json file will be created.

Add the following to your .eslintrc.json file:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "react/prop-types": 0
  },
  "globals": {
    "React": "writable"
  }
}

Note the “react/react-in-jsx-scope”: “off” under rules, and “React” under “globals”. Without these, you will get errors since NextJs does not require you to import React into each component.

Hope this helps!

Note: If you’re using Visual Studio Code and ESLint is still not working, try updating your Visual Studio Code.

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

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