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"
}

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