ES List description

.eslintrc

{
    env: {
        es6: true
    },
    parserOptions: {
        sourceType: 'module',
        ecmaVersion: 6,
        ecmaFeatures: {
           modules: true,
           experimentalObjectRestSpread: true
        }
    },
    
    globals: {
       jQuery: true,
       __: false
    }
    
    "rules": {
        "brace-style": [2, "1tbs"],
        "comma-style": [2, "last"],
        "indent": [2, 4, { "SwitchCase": 1 }],
        "no-constant-condition": 2,
        "semi": [2, "always"],
        "space-after-keywords": [2, "always"],
        "space-before-blocks": [2, "always"],
        "strict": [2, "never"],
        "quotes": [2, "single"],
        "react/self-closing-comp": 1,
        "react/no-did-mount-set-state": 1,
        "react/no-did-update-set-state": 1,
        "react/jsx-uses-react": 1,
        "react/jsx-uses-vars": 1,
        "react/react-in-jsx-scope": 1
    },
    
    "plugins": [
      "react"
    ],
    "extends": "plugin:react/recommended",
    "extends": "airbnb"
    "extends": "meteor"
}

Linting

• Static analysis to check and warn against against questionable coding practices.
• could be undefined vars, syntax, logical (no break in swtich case),

---

#### What does Eslint give you? - Rules - Stand alone - Turned off by default - set to warn or error - Pluggable Infrastructure - Custom Rules - Custom output formatters - Custom parsers (babel-eslint : ESLint using Babel as the parser)

---

#### 4 key configurations 1. **_env_** 2. **_globals_** 3. **_rules_** 4. additional **_parserOptions_** #### 4 ways to use external libs 1. lib/individual-rule(s) 2. **_plugins_** keyword 3. **_extends_** keyword 4. **_parser_**

---

#### ways to define linting - package.json - .eslintrc (with nesting) - top of file (/\* eslint-env node */)

How to get started?

npm install eslint --save-dev
eslint --init

4 key configurations

1. env
2. globals
3. rules
4. additional parserOptions

---

##### Basic expectation from a linter - complain about every variables/functions/modules undefined or unimported - `eslint .` - But we need to configure exceptions

for eg: you have this function call require(), or global variable called window or global

how to define these exceptions?

• meet globals
• define variables your script accesses during execution.

eg: use

{
     ....

    globals: {
        "describe": false,
        "it": false,
        "before": false,
        "after": false,
        "beforeEach": false,
        "afterEach": false,
        ...
      }

    ...
}

• but isnt it too much to define each and every globals? YES!

Much better to configure "set-of-globals-with-a-single-keyword"

• meet environments ( env).
• An environment defines set of global variables that are predefined.

eg env

 env: {
      browser: true,
       node: true,
       jasmine: true,
       serviceworker: true,
      webextensions: true
....
}

list of diff environments here

---

### Next expectation from a linter. Formatting! - meet **_rules_**

{
   rules: {
        "brace-style": [2, "1tbs"],
        "comma-style": [2, "last"],
        "indent": [2, 4, { "SwitchCase": 1 }],
        "no-constant-condition": 2,
        "semi": [2, "always"],
        "space-after-keywords": [2, "always"],
        "space-before-blocks": [2, "always"],
        "strict": [2, "never"],
        "quotes": [2, "single"],
   }
}

list of diff rules http://eslint.org/docs/rules/

---

### Next expectation from a linter. Syntax checking! - meet **_parsers_** #### parserOptions - configure default parser

{
  parserOptions: {
       ecmaVersion: 5, //set to 3, 5 (default), or 6 to specify the version of ECMAScript you want to use.
       sourceType: 'module', // set to "script" (default) or "module" if your code is in ECMAScript modules.
       ecmaFeatures: {
            jsx: true, //flag
             experimentalObjectRestSpread: true
        },
   }
}

Done

1. env
2. globals
3. rules
4. additional parserOptions

---

What do those multitude of eslint libraries do?
When i search in npm.. i see things like..

• eslint

• babel-eslint

• eslint-plugin-react

• eslint-loader

• eslint-config-eslint

  complicated and confusing..!!?

4 ways to use external libs

1. parser (custom syntax validations and rules) <<
2. extends keyword
3. plugins (custom environments and rules)
4. lib/individual-rule(s) from plugins

---

### Parsers - offer custom syntax validation. You can write your own parser. - also set of rules that the parser may define - two parsers compatible with eslint are - esprima by jQuery - `babel-eslint` A wrapper around the Babel parser that makes it compatible with ESLint.

eg: parsers.. esprima & babel-eslint

{
  "parser": "babel-eslint",
  "rules": {
    "strict": 0
  }
}

4 ways to use external libs

1. parser (custom syntax validations and rules)
2. extends keyword <<
3. plugins (custom environments and rules)
4. lib/individual-rule(s) from plugins

---

### Extends

With the extend keyword..

• you can extend another .eslintrc from which is within a library you installed
• allows extending another plugin defined "presets/configs/set-of-rules-with-a-single-name"

extending another .eslintrc file

  "extends": "./node_modules/coding-standard/.eslintrc",
  "rules": {
      // Override any settings from the "parent" configuration
      "my-monkey-rule": 1
  }

see plugin section to see how to extend "set-of-rules-with-a-single-name"

4 ways to use external libs

1. parser (custom syntax validations and rules)
2. extends keyword
3. plugins (custom environments and rules) <<
4. lib/individual-rule(s) from plugins

Plugins

• Plugins are a set of environments (globals) and rules and rulesset exposed for use.
• named as eslint-plugin-xxx
• eg: eslint-plugin-react

Lets look at

• how does the plugin defines it AND
• how do we use it in our .eslintrc file

---

#### plugin definition - **How does the plugin define it** and exposes..

Environtments

• eg: eslint-plugin-jquery exposes env called jquery with global var $ which cannot be overwritten.

  • the code inside the plugin defines it as ... environments: { jquery: { globals: { $: false } } }

  environments: {
      jquery: {
          globals: {
              $: false
          }
      }
  }
  

• eg: another example is eslint-plugin-react which has react specific bindings (usesbabel-eslint for some features internally) ...

Configs

• exposes set of configurations for use using the config keyword
  • eg: config of eslint-plugin-react is exposed as

    configs: {
        recommended: {
          parserOptions: {
            ecmaFeatures: {
              jsx: true
            }
          },
          rules: {
            'react/display-name': 2,
            ...
          }
        }
      }

---

#### plugin usage in .eslintrc - first declare you are going to use the plugin in your .eslintrc

"plugins": [
      "react"
 ],

• To use the plugin defined "set-of- globals " in ur linting, add the plugin defined env

  env: {
    jquery: true
  }

• To use the rules in your linting there are two ways

  • a. add individual rules into ur rules:{} set

  "react/self-closing-comp": 1,
  "react/no-did-mount-set-state": 1,
  "react/no-did-update-set-state": 1,
  "react/jsx-uses-react": 1,
  "react/jsx-uses-vars": 1,
  "react/react-in-jsx-scope": 1
  

  • b. extend a set of predefined ruleset called config

    • this config can be simple .eslintrc file from a lib and extended in your .eslintrc as

        "extends": "./node_modules/coding-standard/.eslintrc",
        "extends": "./node_modules/eslint-plugin-monkeyPlugin/.eslintrc",
        "rules": {
            // Override any settings from the "parent" configuration
            "eqeqeq": 1
        }
      

    • or extend a config exported by a library
      eg: "recommended" config exported from eslint-plugin-react looks like

      configs: {
        recommended: {
          .....
        }
      }
      

      and you can be use the set of configs inside your eslintrc using "extend"

    "plugins": [
      "react"
    ],
    "extends": "plugin:react/recommended"
    

    • another eg: from eslint-config-airbnb

    extends: airbnb
    

    lib code : https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb/index.js

    • another example from eslint itslef

    
    surprise... eslint rules are themselves exported in a plugin called "eslint-config-eslint"
    "extends": "eslint:recommended"
    

  • find included rules here : http://eslint.org/docs/user-guide/migrating-to-2.0.0.html#new-rules-in-eslintrecommended

---

Lastly, which we already cover..

using lib/individual-rule(s)

    "rules": {
        "react/self-closing-comp": 1,
        "react/no-did-mount-set-state": 1,
        "react/no-did-update-set-state": 1,
        "react/jsx-uses-react": 1,
        "react/jsx-uses-vars": 1,
        "react/react-in-jsx-scope": 1
    },

Lets start...

• get started with npm install eslint --save-dev && eslint --init

4 ways to define linting

• package.json

{
    "name": "mypackage",
    "version": "0.0.1",
    "eslintConfig": {
        "env": {
            "browser": true,
            "node": true
        }
    }
}

• .eslintrc

{
  ...
}

• command line --- globals: var1: true var2: false
• on the top of each file with comments /*eslint-env node, mocha */

eslint 2.x vs 1.x

You can nest .eslintrc files

check sample fragment

• if you use webpack, add eslint-loader in your wepack.dev.js as a preloader (preloader so that your colleage doesnt makes mistake to put babel-loader before the eslint-loader)

others bla bla

Read the manual
http://eslint.org/docs/user-guide/configuring

https://github.com/stylelint/stylelint
facebook flow