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. 🚀

XenoXSarthak Sharma

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

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
};

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

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']
};

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

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'
  }
};

📍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

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

GitHubsarthology

sarthology/next-js-eslint-pro

Pro Boilerplate Setup of Next.js, ESLint and Prettier - sarthology/next-js-eslint-pro

GitHubsarthology

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