ESLint

Code Norman

Writing Custom Rules

About Me

• Senior Software Engineer at Iteris
• twitter: @bchirgwin
• linkedin: linkedin.com/in/bchirgwin
• Organizer of CODE Norman

Code Norman Meetups

• April 16 Meeting
  • Writing Github.io pages
  • Update codenorman.org (github.io pages)
  • 1 other short talk?
• May - No meeting
• June 25? Meeting
  • Topics ideas
• Thursday Night - Hastings

ESLint

• Linting Tool [JSLint, JSHint]
  • Potential Errors
    • if (a = 1)
  • Best Practices
    • require === conditions
  • Style Guidelines
    • comma location

ESLint Installation

• npm install -g eslint
• eslint --init
  • answer questions

Warnings or Errors

• Rules can be set as warning while code is changed
• Set rule to error once all code refactored & CI system can fail on error.
  • 0 - ignore
  • 1 - warning
  • 2 - error

Demo

• http://eslint.org/demo/

Style Guideline Rules

• "max-statements": [2, 2, {"ignoreTopLevelFunctions": true}]

• "max-depth: [2, {"maximum": 2} ]

• "max-len": [2, {"code": 80, "tabWidth": 4, "ignoreUrls": true}]

• "max-params": [2, {"maximum": 2}]

• "complexity": [2, { "maximum": 2 }]

• "max-nested-callbacks": [2, {"maximum": 3}]

Custom Rules

• Write rules to enforce team style guide.
• Optional Fix routine to automatically follow rule.

AST

• Abstract Syntax Tree -wikipedia
  • a tree representation of the abstract syntactic structure of source code
  • http://astexplorer.net/

var add = function (a, b) {
    return a + b;
}

var addition = function (p1, p2) {
    return p1 + p2;
}

Resources

• eslint.org 

• astexplorer.net

• http://jointjs.com/demos/javascript-ast

• Harnessing The Power of Abstract Syntax Trees by Jamund Ferguson

• Scaling Best Practices with Syntax Trees - Will Klein - Midwest.io 2015