Eslint and Prettier, are the most used npm packages in all Modern JavaScript Applications.

However, I noticed they're not being utilized to their fullest potential. That's purely a personal preference, but as the project grows, so does the requirements to tweak configurations to improve the team's productivity and the overall performance of the app. You can check out my article on Eslint made easy breaking down Eslint for you.

For now, let's focus on quickly setting up Next.js.

Setting up ESLint the easy way
ESLint 101: The simplest and shortest guide to getting started with ESLint. πŸš€
Easy Guide to ESLint and Prettier πŸš€

For Next.js, I'm going to divide this article into two sections, based on complexities and the number of plugins we have to integrate into the project:

  1. The Basic Setup 🌱
  2. The Pro Setup πŸ’―

The Basic Setup 🌱

First install the ESLint and Prettier using following commands:

npm i -D eslint prettier
yarn add eslint prettier -D
Install Eslint and Prettier 

Following is the Prettier setting I use in my projects and this remains same for the Pro Setup as well. I encourage you to edit this file as per your preferences. Checkout this document for further details on more options available.

module.exports = {
  tabWidth: 2,
  printWidth: 80,
  endOfLine: 'auto',
  arrowParens: 'avoid',
  trailingComma: 'none',
  semi: true,
  useTabs: false,
  singleQuote: true,
  bracketSpacing: true
};
.prettierrc.js Prettier config file for Next.js

Let's add a few more of these popular plugins, and get you started with having Basic Linting in your project πŸ’– Β 

Run following command:

npm i -D eslint-plugin-prettier eslint-plugin-react eslint-config-airbnb eslint-config-prettier

yarn add eslint-plugin-prettier eslint-plugin-react eslint-config-airbnb eslint-config-prettier -D
More Eslint plugins 

Add the following config. to your .eslintrc.js , and you're good to go :

module.exports = {
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  settings: {
    react: {
      version: 'detect'
    }
  },
  extends: ['plugin:react/recommended', 'airbnb', 'prettier', 'prettier/react'],
  plugins: ['react', 'prettier']
};
.eslintrc.js ESLint config File for Next.js

The Pro Setup πŸ’―

πŸ“Adding More Plugins

The main difference setting Pro apart from The Basic setup, is that the Pro flaunts a few more plugins, more awesome and Β customizable ones πŸ‘©β€πŸŽ¨. Β 

This is the setup I personally use, in all my Next.js projects.

npm i -D eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-security eslint-plugin-simple-import-sort eslint-plugin-sonarjs eslint-plugin-unicorn

yarn add eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-security eslint-plugin-simple-import-sort eslint-plugin-sonarjs eslint-plugin-unicorn -D
Adding more Pro Plugins to the project

Now, add the following to your .eslintrc.js file, and you are good to go. I have explained most use cases for the following plugin, in this post.

module.exports = {
  parserOptions: {
    ecmaVersion: 2020, 
    sourceType: 'module', 
    ecmaFeatures: {
      jsx: true 
    }
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  plugins: ['simple-import-sort'],
  settings: {
    react: {
      version: 'detect'
    }
  },
  extends: [
    'eslint:recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:react/recommended', 
    'plugin:prettier/recommended',
    'plugin:sonarjs/recommended',
    'plugin:unicorn/recommended',
    'plugin:security/recommended',
    'plugin:react-hooks/recommended'
  ],
  rules: {
    'no-console': 'error',
    'react/react-in-jsx-scope': 'off',
    'react/prop-types': 'off',
    'simple-import-sort/sort': 'error',
    'unicorn/filename-case': 'off'
  }
};
.eslintrc.js ESLint config File for Next.js

πŸ“Setting Up Husky

Husky gives you the ability to add precommit hooks. It works as your third eye, protecting your project from that sneaky smelly code, from being pushed into, or committing to - forcing people to follow the guidelines added by you.

npm i -D husky lint-staged 
yarn add husky lint-staged -D
Add husky to your Next.js Project.

after that, add this to your Β package.json Β file:

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx}": [
      "eslint '*/**/*.{js,jsx}' --fix"
    ]
  },

That's it : and you are good to go. πŸš€

TlDr; πŸ’πŸ½β€β™€οΈ

You can simply copy them from here πŸ˜…

sarthology/next-js-eslint-basic
Basic Boilerplate Setup of Next.js, ESLint and Prettier - sarthology/next-js-eslint-basic
The Link to Basic Setup 🌱
sarthology/next-js-eslint-pro
Pro Boilerplate Setup of Next.js, ESLint and Prettier - sarthology/next-js-eslint-pro
The Link to Pro Setup πŸ’―

Conclusion

Hopefully, you have learned something new here. I will be posting few more articles in this Next Station series of Next.js, so subcribe to get notified. Also we have weekly discussion on dev.to every Wednesday and Saturday.

Thanks again, if you have any queris reach out to me @sarthology