Getting Started With ESLint

What is Lint?

Google Says: Lint is soft cotton used for covering and protecting injuries.

What is Linting?

The Odin Project: Linters are tools that will scan your code with a set of style rules and will report any erros to yet they find.

What I Believe: Linting is an automation tool which find mistakes in code and help to become a rockstar developer such as enforcing unconditional use of React useEffect hook.

How Linting Can Help You?

• It makes your code readable and strucutre consistent.
• It saves your time by finding syntax errors.

• It forces you to follow code best practices and make code syntatically correct like your gym trainner, focus on form rather than weight.

  

Steps For Setting Up ESLint

1. First you will need to install eslint

  npm install eslint --save-dev
  or 
  yarn add eslint --dev

--save-dev flag save the package as dependancy for development usage only, because in production eslint will no longer be needed.

2. Installing Configuration FIle for your project

  npm init @eslint/config
  or
  yarn create @eslint/config

This will create an eslint configuration file that allows you to customize eslint to work according to your project and w.r.t your biases.

3. Few Questions About Your Project

Before you can access eslint configuration file you will be prompted with different questions about your project, choose according to your project and hardship:

  ? How would you like to use ESLint? … 
    To check syntax only
    To check syntax and find problems
    To check syntax, find problems, and enforce code style

  ? What type of modules does your project use? … 
    JavaScript modules (import/export)
    CommonJS (require/exports)
    None of these

  ? Which framework does your project use? … 
    React
    Vue.js
    None of these

  ? Does your project use TypeScript? ‣ No / Yes

  ? Where does your code run?
   Browser
   Node

  ▸ Use a popular style guide
    Answer questions about your style
    Airbnb: https://github.com/airbnb/javascript
    Standard: https://github.com/standard/standard
    Google: https://github.com/google/eslint-config-google
    XO: https://github.com/xojs/eslint-config-xo

  ? What format do you want your config file to be in? … 
    JavaScript
    YAML
    JSON

Now you can notice a file named .eslintsrc.json has been added to your project, and look similar to this(I have added for ReactJS):

  {
      "env": {
          "browser": true,
          "es2021": true
      },
      "extends": [
          "eslint:recommended",
          "plugin:react/recommended",
          "airbnb"
      ],
      "parserOptions": {
          "ecmaFeatures": {
              "jsx": true
          },
          "ecmaVersion": "latest",
          "sourceType": "module"
      },
      "plugins": [
          "react"
      ],
      "rules": {
      }
  }

4. Integrating The ESLint Into VS Code

To integrate eslint into VS Code, launch VS Code and press CTRL + P and paste the following command and hit enter.

  ext install dbaeumer.vscode-eslint

Once ESLint extension is installed you will notice warnings in your project files, if everything is nice 😊.

5. More About .eslintsrc

Your config will include this line, because of this line all the rules marked ✓ will be turned on.

     "extends": [ "eslint:recommended" ]

ESLint will not lint your code unless explicitly turn rules in your configuration file. To config a rule set rule ID equal to one of these values:

  "off" or 0 - turn the rule off
  "warn" or 1 - turn the rule on as a warning
  "error" or 2 - turn the rule on as an error

{
   "rules": { "quotes": ["error", "double"] }
}

6. More with ESLint

• Config eslint to automatically fix syntax and formating issues every time you save, open settings menu in VS Code and paste the following. After pasting ESLint will automatically correct errors and validate JavaScript on save.

  "editor.codeActionsOnSave": {
          "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript","javascriptreact"]
  

• If you use ReactJs, then add this eslint plugin to your config and then save yourself from mistakes such as not add required props and state to dependancy array or adding effects conditionally.

    "extends": [ "plugin:react-hooks/recommended" ]
  

• If you believe eslint, is wrong then you can use this power

     eslint-disable-next-line
  

  

Refferences

• theodinproject.com/lessons/node-path-javasc..
• mikecavaliere.com/javascript-linting-what-d..
• hackernoon.com/how-linting-and-eslint-impro..
• eslint.org/docs/user-guide/getting-started
• eslint.org/docs/rules
• marketplace.visualstudio.com/items?itemName..
• digitalocean.com/community/tutorials/lintin..
• github.com/airbnb/javascript