#JavaScript - How to set up #AirBnb #ESLint plugin?

Lint

Definition taken from Wikipedia:
A lint refers to tools that analyze source code to flag programming errors, bugs, stylistic errors, and suspicious constructs.

In other word, it is a tool that scans your project files and point out potential issues such as formatting issue, reference to a non-existent function, unused variables etc.

JavaScript Linting - ESLint

ESLint is a lint tool for JavaScript. Alternatives are JSLint and JSHint.

ESLint

You can check out this ESLint demo to get a feel of how ESLint works.

ESLint demo

JavaScript style guides

You can check out the following JavaScript style guides. There are other style guides besides these 3.
1) Airbnb JavaScript style eslint: https://github.com/airbnb/javascript
2) Google JavaScript style eslint: https://github.com/google/eslint-config-google
3) StandardJS eslint: https://github.com/standard/eslint-config-standard

Steps to install ESLint

1)

npm install —save-dev eslint 

yarn add -D eslint 

2) Install airbnb eslint plugin
If you use React

npm install —save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y

yarn add -D eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y 

If it is not a React project, you can exclude these 2 packages: eslint-plugin-react eslint-plugin-jsx-a11y and you install eslint-config-airbnb-base instead

npm install —save-dev eslint-config-airbnb-base eslint-plugin-import 

yarn add -D eslint-config-airbnb-base eslint-plugin-import 

3) Then, create an .eslintrc file for ESLint configuration and add the following:
airbnb-base is the set of rule excluding rules for react.

{

  "extends": "airbnb-base", // airbnb if you use react

  "parserOptions": {

    "ecmaVersion": 6

  },

  "env": {

    "node": true,

    "browser": true,

    "es6": true,

  }

}

Alternatively, you can go to ESLint demo page and opens up Rules Configuration at the bottom to configure ESLint. When you are ready, you can download the configuration file at the bottom

ESLint rules configuration

Download ESLint rules configuration

4)
You can refer to Configure ESLint document to further customize your ESLint rules and configuration.

For example,  to use Babel with ESLint, you can add "parser": "babel-eslint" .

{

  "extends": "airbnb-base",

  "parserOptions": {

    "ecmaVersion": 6

  },

  "env": {

    "node": true,

    "browser": true,

    "es6": true

  },

  "parser": "babel-eslint",

  "rules": {

    "no-unused-vars": [

      "error",

      {

        "vars": "local",

        "args": "none"

      }

    ]

  }

}

5)

You can find out more about the rules on ESLint rules document. 

For example: no-unused-vars rule gives warning or error if a variable is not used.

"rules": {

    "no-unused-vars": [

      "error",

      {

        "vars": "local",

        "args": "none"

      }

    ]

  }

Rules for React file extensions.

"rules": { 

    "react/jsx-filename-extension": [1, {"extensions": [".js", ".jsx"] }]

}

Thanks for reading!

Jun