I see you.
I know you are beginning a new project and thinking, "Alright, I will be using ESLint and I hope it works."
But let's be honest, it's not that easy. And the reason is that you are just getting started. Unless you have used ESLint in a project before, it's hard to figure out the settings to employ.
In this article, I will help you solve that problem.

tldr

The steps to get started are as follows:

Discuss with your Team πŸ€“

Photo by You X Ventures / Unsplash

You must remember that setting ESLint config is the foundation. It's like writing the constitution of a country. You need to agree on the rules that are important for your project, and ignore the ones that are not. But if just one person is deciding the rules, others may raise concern. So, it is better to discuss this with your team before setting up the project. It will hog 15 mins of your time, but will save you hours later. Β 

If you are a lone wolf, you can skip this step.

Take inspiration (⌘+c ⌘+v) πŸ˜…

In the beginning, it's better to start with configs by well-known companies. One can always make changes to them when the project begins taking shape. Here's the list of some of the most popular ones to use:

  • Airbnb 🏑 : The one everyone ends up using.
  • ESLint πŸ› : The one used by ESLint team themselves.
  • Google πŸ•΅πŸΏβ€β™‚οΈ: Β This one's for google fanboys.

Now, some less popular but more pratical ones:

  • Problems 🐞: Config that does not regulate your code style and only catches actual problems with your code.
  • Hardcore πŸ’ͺ🏽: The most strict (but practical) ESLint config.
  • Canonical πŸ‘©πŸ½β€πŸŽ¨: This one's the most comprehensive code style guide with more than 800 rules.

So, these were the configs. You can use plugins too as your projects grows.

Next up is list of plugins to use.

Plug-in Awesomeness πŸ”Œ

Since plugins enhance every platform, then why exclude ESLint.

Here's list of some super cool plugins to install in your project:

To Improve Code Quality:

  • SonarJS 🐞: Free Plugin for Bug Detection πŸ› and Code Smell Detection. 🐷
  • Unicorn πŸ¦„: Β A variety of remarkable ESLint rules

For Better React:

  • JSX - a11y ✨ : Accessibility rules on JSX elements.
  • React & React Hooks βš›οΈ : Linting rules for React & React Hooks.

Mics:

  • Security πŸ”: ESLint rules for Node Security.
  • fp 🏎: ESLint rules for functional programming.
  • Simple import sort πŸ”ƒ : Easy autofixable import sorting.
  • Filenames πŸ—„: Ensures consistent filenames for your JavaScript files.

To Format Errors and Warnings:

  • MO πŸ‘©πŸ½β€πŸŽ¨ : Good-looking ESLint formatter.
  • Git Log πŸ™: ESLint Formatter featuring Git Author, Date, and Hash.

Automatting Workflow πŸ€–

After selecting the plugins most suitable for your project, we move to installing other packages to further improve the flow.

Setting up git Hooks

Pre commit hooks are cool as they remind developers that they are not done till the ESLint issues are fixed. The most popular plugin when it comes to hooks is Husky 🐢.

You can install this using:

npm install husky --save-dev
yarn add husky -d

And then, add this to your package.json:

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

--fix will auto-fix some problems and will save you loads of time.

Setting up Github Actions

Sometimes, by mistake or intentionally, developers may use --no-verify and force push to branch or generate PR. Here enters Lint Action ✨.

Just creat a file in .github/workflow branch, and name it anything but lint.yml.

name: Lint

on: push

jobs:
  run-linters:
    name: Run linters
    runs-on: ubuntu-latest

    steps:
      - name: Check out Git repository
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v1
        with:
          node-version: 12

      # ESLint and Prettier must be in `package.json`
      - name: Install Node.js dependencies
        run: npm install

      - name: Run linters
        uses: wearerequired/lint-action@v1
        with:
          github_token: ${{ secrets.github_token }}
          # Enable linters
          eslint: true
          prettier: true
          auto_fix: true

That's it, you will start seeing this in action.

The errors will start showing up like this:

It also auto-fixes the errors it can, and corrects it automatically.

Magic? Agreed. ✨

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

Here's my config file, if you just want to skip all the hustle and go by my word, because this config is excellent for any React project.

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': [
      'error',
      {
        cases: {
          camelCase: true
        }
      }
    ]
  }
};

Lastly, don't forget to install all those packages as well, or just copy this in your package.json and run yarn install.

  "devDependencies": {
    "eslint": "^7.5.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-formatter-git-log": "^0.5.3",
    "eslint-formatter-mo": "^1.0.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.3",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-security": "^1.4.0",
    "eslint-plugin-simple-import-sort": "^5.0.3",
    "eslint-plugin-sonarjs": "^0.5.0",
    "eslint-plugin-unicorn": "^23.0.0",
    "husky": "^4.2.5",
    "lint-staged": "^10.2.11",
    "prettier": "2.0.5",
  },

Conclusion

Well, this article is over, but the series is just starting.

In this is series, "DevOps by Dummy", we will learn how to implement DevOps to projects, or simply how to organise the workflow to be as productive as you can. We'll also upload a free video course soon.

Want to make sure you don't miss a thing?

Subscribe to the awesomeness now, and we got you! ☺️