Configuring ESLint

.eslintrc

{
  "env": {
    "browser": true,
    "node": true
  },
  "globals": {
    "angular": true
  },
  "rules": {
    "semi": 2,
    "camelcase": 2,
    "curly": 2,
    "brace-style": [2, "1tbs"],
    "quotes": [2, "single"],
    "semi": [2, "always"],
    "space-in-brackets": [2, "never"],
    "space-infix-ops": 2,
    "space-after-keywords": [2, "always"],
    "dot-notation": 2,
    "eqeqeq": [2, "smart"],
    "no-use-before-define": 2,
    "no-redeclare": 2,
    "no-inner-declarations": "both",
    "no-unused-vars": [2, {"vars": "all", "args": "after-used"}],
    "no-floating-decimal": 2,
    "no-spaced-func": 2,
    "no-extra-parens": 1,
    "no-underscore-dangle": 0,
    "valid-jsdoc": 1,
    "space-after-keywords": 2,
    "max-len": [2, 120],
    "no-use-before-define": [2, "nofunc"],
    "no-warning-comments": 0,
    "strict": 0,
    "eol-last": 0
  }
}

In file configuration

Disable everything

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

Cascading and Hirearchy

Project specific settings, and directory overrides.

Using ESLint

integrations and cli

Plugins available for...

• Sublime
• Vim
• Emacs
• TextMate2
• Atom.io
• WebStorm

Sublime

As you type ...

On save ...

Gulp

gulp-eslint

/**
 * JavaScript Linting Task
 */
gulp.task('lint', function() {
  return gulp.src('client/app/**/*.js')
    .pipe(reload({stream: true, once: true}))
    .pipe(eslint())
    .pipe(eslint.format());
});

CLI

What does it have rules for?

Stylistic issues

.... and more

That isn't enough?

Write your own

module.exports = function(context) {

  'use strict';

  function report(node) {
    context.report(node,
    'You should use the $timeout service instead of the default window.setTimeout method', 
    {});
  }

  return {

    'CallExpression': function(node) {
      if (node.callee.type === 'MemberExpression' && node.callee.object.name ===
        'window' && node.callee.property.name === 'setTimeout') {
        report(node);
      }
    }
  };

};

eslint-plugin-angular - ng_timeout_service

What is the downside?

Slower

2x-3x per file

Why is it slower?

It uses Espree to construct an AST,

THEN

evaluates your code

JSHint evaluates your code as it parses.

Should we use it?

.... I think so

• Performance impact is worth the trade offs
• Can lint for common errors
• Can style check
• Can create custom rules
• Can specify language options
• Enable ES6 features
• Using react? enable JSX features

Useful Rules

no-shadow

var a = 3;
function b() {
    var a = 10;
}

no-redeclare

var a = 3;
var a = 10;

no-inner-declarations

// Good
var foo = 42;

// Bad
while (test) {
    var bar;
}

can help prevent issues with hoisting

no-unreachable

function fn() {
    x = 1;
    return x;
    x = 3; // this will never execute
}

valid-jsdoc

/**
 * Adds two numbers together.
 * @param {int} num1 The first number.
 * @param {int} num2 The second number.
 * @returns {int} The sum of the two numbers.
 */
function sum(number1, num2) {
    return number1 + num2;
}

if your going to document, document it right.

block-scoped-var

function doSomething() {
    if (true) {
        var build = true;
    }
    console.log(build);
}

Code Complexity

• complexity
• max-depth
• max-len
• max-statements
• max-nested-callbacks
• max-params

Make our own rules

Potential rules from our guidelines

• Use one var per variable
• Avoid function declarations in blocks
• Name your "anonymous" functions
• Consider the else
• Throw good errors
• Use braces with blocks
• Set to null to delete
• Keep your hands off prototypes of built-in objects
• Capitalize names of AngularJS controller
• Do not use "Hungarian notation"
• Do not use Angular's prefixes. Use your own

... some of these are already available

Potential rules from our guidelines

• Avoid long promis chains
• Catch errors in promises
• Use .then(null, errorHandler)
• Avoid $q.defer

... some of these are already available