1. Linting

• Enforce Consistency
  • Curly brace position
  • confirm / alert
  • Trailing commas
  • Globals
  • eval
• Avoid Mistakes
  • Extra parenthesis
  • Overwriting function
  • Assignment in conditional
  • Missing default case in switch
  • debugger / console.log

1.1. ESLint

1.1.1. Warnings vs Errors

• Warning
  • Can continue development
  • Can be ignored
  • Team must agree: Fix warnings
• Error
  • Breaks the build
  • Cannot be ignored
  • Team is forced to comply

1.1.2. Plugins

eslint-plugin-react, eslint-plugin-angular, eslint-plugin-node

1.1.3. preset

from scratch recommended presets: airbnb

1.1.4. Issue

ESLint doesn't watch files

• eslint-loader if using webpack
  • Re-lints all files upon save.
• eslint-watch is a npm package (better solution)
  • ESLint wrapper that adds file watch
  • Not tied to webpack
  • Better warning/error formatting
  • Displays clean message
  • Easily lint tests and build scripts too

ESLint doesn't support many experimental JavaScript features

• Run ESLint directly
  • Supports ES6 and ES7 natively
  • Also supports object spread
• use Babel-eslint
  • Also lints stage 0 - 4 features

1.2. Why Lint via an Automated Build Process

1. One place to check
2. Universal configuration
3. Part of continuous integration

1.2.1. Usage

npm scripts:

"lint": "esw webpack.config.* src buildScripts --color",  // tell which files or folders to lint
"lint:watch": "npm run lint -- --watch"

dependencies:

"eslint": "4.6.1",
"eslint-watch": "3.1.2",

.eslintrc.json

{
  "root": true,
  "extends": [
    "eslint:recommended"
    // "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "node": true,
    "mocha": true
  },
  "rules": {
    "no-console": 1
  }
}

disable linting for individual file:

/* eslint-disable no-console */
console.log('111');

disable linting for a specific line

console.log('111'); // eslint-disable-line no-console