ESlint (check first comment)

.eslintignore

node_modules/**
dist/**
reports/**

.eslintrc

{
    env: {
        es6: true
    }
    
    "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"
}

crash course

http://eslint.org/docs/user-guide/configuring

LT - ESLint Best Practices By Ian VanSchooten
https://www.youtube.com/watch?v=L6vMey4FtQ0

Features (bla bla bla intro)
- Pluggable
  - Custom Rules
  - Custom output formatters
  - Custom parsers (babel-eslint : ESLint using Babel as the parser)
- Rules
  - Turned off by default
  - set to warn or error
  - "agenda free"

3 key configurations: env, globals, rules

- Environments
  - An environment defines global variables that are predefined. The available environments are: http://eslint.org/docs/developer-guide/development-environment
- Globals
  - Define your own global variables
  - eg for `/test/.eslintrc`. The flag false indicates the global is readonly
    ```
    {
    "globals": {
        "describe": false,
        "it": false,
        "before": false,
        "after": false,
        "beforeEach": false,
        "afterEach": false
      }
    }
    ```
    ```
    ---
      globals:
        var1: true
        var2: false
    ```
- Rules

  
- ESLint plugins are a set of rules/plugins/globals
  - eg: eslint-plugin-jquery exposing env called `jquery` with global var `$` which cannot be overwritten
  ```
  environments: {
      jquery: {
          globals: {
              $: false
          }
      }
  }
  ```
  - eg: another example is `eslint-plugin-react` which has react specific bindings and uses `babel-eslint` for some features

- to use the globals in ur linting add the plugin to your env
  ```
  env: {
    jquery: true
  }
  ```
- to use the rules in your linting there are two ways
  - 1. 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
  ```
  - 2. 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",
        "rules": {
            // Override any settings from the "parent" configuration
            "eqeqeq": 1
        }
      ```
    
    - or a config exported by a library
      eg: "recommended" config exported from eslint-plugin-react looks like
      ```
      configs: {
        recommended: {
          parserOptions: {
            ecmaFeatures: {
              jsx: true
            }
          },
          rules: {
            'react/display-name': 2,
            ...
          }
        }
      }
      ```
      and can be used as
      
      ```
      "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
    ```
    "extends": "eslint:recommended"
    ```
    - find included rules here : http://eslint.org/docs/user-guide/migrating-to-2.0.0.html#new-rules-in-eslintrecommended
  
- 2.0.0 recommendations: http://eslint.org/docs/user-guide/migrating-to-2.0.0#language-options
  - The ecmaFeatures property is now under a top-level parserOptions property. (eg: https://github.com/yannickcr/eslint-plugin-react/blob/1264c8eff2d1857047c34436e450f3099e575d1d/index.js#L47)
  - remove ecmaFeatures flags and use ecmaVersion: 6 for ES6 features mentioned in the language-options link above
  - for non-ES6 flags in ecmaFeatures, move it inside parserOptions
  - remove ecmaFeatures.modules and use sourceType=module

posting as comment for markup rendering

3 key configurations: env, globals, rules

Environments

• An environment defines global variables that are predefined. The available environments are: http://eslint.org/docs/developer-guide/development-environment

Globals

• Define your own global variables

• eg for /test/.eslintrc. The flag false indicates the global is readonly
  { "globals": { "describe": false, "it": false, "before": false, "after": false, "beforeEach": false, "afterEach": false } }
  `

  globals:
  var1: true
  var2: false
  `

  Rules

Configuring using Parsers, plugins, extend

Parsers

• defines a set of parsing rules
• (babel-eslint : ESLint using Babel as the parser to allow all babel valid syntax)

Plugins are a set of globals/rules

• a plugin may expose additional globals in environments or rules

plugin definition (how is it exposed by libs)

Environtments

• eg: eslint-plugin-jquery exposing env called jquery with global var $ which cannot be overwritten. the code inside the plugin looks like ...
  environments: { jquery: { globals: { $: false } } }
• eg: another example is eslint-plugin-react which has react specific bindings (uses babel-eslint for some features internally)

Configs

• eg: config of eslint-plugin-react is exposed as
  configs: { recommended: { parserOptions: { ecmaFeatures: { jsx: true } }, rules: { 'react/display-name': 2, ... } } }

plugin usage

• To use the globals in ur linting add the plugin to your 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",
        "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: {
          .....
        }
      }
      

      can be used as

    "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

    "extends": "eslint:recommended"
    

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

• 2.0.0 recommendations: http://eslint.org/docs/user-guide/migrating-to-2.0.0#language-options

  • The ecmaFeatures property is now under a top-level parserOptions property. (eg: https://github.com/yannickcr/eslint-plugin-react/blob/1264c8eff2d1857047c34436e450f3099e575d1d/index.js#L47)
  • remove ecmaFeatures flags and use ecmaVersion: 6 for ES6 features mentioned in the language-options link above
  • for non-ES6 flags in ecmaFeatures, move it inside parserOptions
  • remove ecmaFeatures.modules and use sourceType=module

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

• 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

http://eslint.org/docs/user-guide/configuring

LT - ESLint Best Practices By Ian VanSchooten
https://www.youtube.com/watch?v=L6vMey4FtQ0

Features (bla bla bla intro)

• Pluggable
  • Custom Rules
  • Custom output formatters
  • Custom parsers (babel-eslint : ESLint using Babel as the parser)
• Rules
  • Turned off by default
  • set to warn or error
  • "agenda free"