Introduction to ESLint

Gyandeep Singh

Linting

Linting is the process of checking the source code for Programmatic as well as Stylistic errors. This is most helpful in identifying some common and uncommon mistakes that are made during coding.

ESLint highlights

  • Everything is pluggable
    • Rules
    • Formatters
    • Configurations
  • Every rule is standalone
  • Agenda free
  • ES6, ES7 & JSX

Get Started

# Install

$ npm install -g eslint

Install

Setup config

# Setup Config

$ eslint --init

Run

# Start Linting

$ eslint test.js test2.js

Configuration

.eslintrc

{
    "parser": "espree",
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "env": {
        "browser": true,
        "node": true
    },
    "globals": {
        "var1": true,
        "var2": false
    },
    "plugins": [
        "plugin1",
        "eslint-plugin-plugin2"
    ],
    "extends": [
        "./node_modules/coding-standard/eslintDefaults.js",
        // Override eslintDefaults.js
        "./node_modules/coding-standard/.eslintrc-es6"
    ],
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"],
        "plugin1/rule1": "error"
    }
}

Parser and its options

{
    "parser": "espree",
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    }
}

Others parser: babel-eslint

Environments

{
    "env": {
        "browser": true,
        "node": true
    }
}

globals (npm) - https://www.npmjs.com/package/globals

Globals

{
    "globals": {
        "var1": true,
        "var2": false
    }
}

Plugins

{
    "plugins": [
        "plugin1",
        "eslint-plugin-plugin2"
    ]
}

Install the plugin from npm

npm install eslint-plugin-plugin1

Examples: eslint-plugin-react

Extends

{
    "extends": [
        "./node_modules/coding-standard/eslintDefaults.js",
        // Override eslintDefaults.js
        "./node_modules/coding-standard/.eslintrc-es6",
        // Override .eslintrc-es6
        "eslint-config-myconfig"
    ]
}

Install the config from npm

npm install eslint-config-myconfig

Examples: eslint-config-airbnb

Rules

{
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"],
        "plugin1/rule1": "error"
    }
}

Configuration Cascading and Hierarchy

your-project
├── .eslintrc
├── lib
│ └── source.js
└─┬ tests
  ├── .eslintrc
  └── test.js

Closest .eslintrc file to the file being linted has the highest priority

lib/source.js : .eslintrc

tests/test.js : .eslintrc + tests/.eslintrc

Execution

if (a == 1) {
    console.log("1");
}
else {
    console.log('not 1');
}

Code: 

{
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"]
    }
}

.eslintrc: 

$ eslint test.js

C:\Users\Gyandeep\WebstormProjects\test\test.js
  5:17  error  Strings must use doublequote  quotes

✖ 1 problem (1 error, 0 warnings)

Output: 

Auto Fix

if (a == 1) {
    console.log("1");
}
else {
    console.log('not 1');
}

Code: 

$ eslint test.js --fix

Output: 

if (a == 1) {
    console.log("1");
}
else {
    console.log("not 1");
}

Code: 

What can be fixed?

News and updates

  • JSCS merger
  • Joined jQuery foundation
  • Most downloaded JS linter (~2.4M)
  • 350+ contributors and growing
  • Low Issue response time (~1 day)

Questions?

Thanks for having me

@gyandeeps

Eslint

By Gyandeep Singh

Made with Slides.com

Eslint

  • 212

More from Gyandeep Singh