eslint-config-punchcard

Punchcard CMS ESLint Config

The place to start for the Punchcard JavaScript Style Guide is the Airbnb JavaScript Style Guide. We follow the Airbnb Style Guide with the following modifications, presented below. Most modifications are clarifications of existing rules where Airbnb does not specify anything, or expanding the existing rules for additional usecases we have.

Best Practices

Curly Brace Conventions

Curly braces should never omitted, even when they are optional.

Rule	Settings	Type
curly	[2]	error

//////////////////////////////
// OK
//////////////////////////////
if (foo) {
  foo++;
}
 
while (bar) {
  baz();
}
 
if (foo) {
  baz();
} else {
  qux();
}
 
//////////////////////////////
// Not OK
//////////////////////////////
if (foo) foo++; /*error Expected { after 'if' condition.*/
 
while (bar)     /*error Expected { after 'while' condition.*/
  baz();
 
if (foo) {      /*error Expected { after 'else'.*/
  baz();
} else qux();

Enforce Newline Before and After Dot

New lines must come before dots for properties

Rule	Settings	Type
dot-location	[2, 'property']	error

//////////////////////////////
// OK
//////////////////////////////
var foo = object
.property;
var bar = object.property;
 
//////////////////////////////
// Not OK
//////////////////////////////
var foo = object. /*error Expected dot to be on same line as property.*/
property;

No Invalid This

No usage of this outside of classes or class-like objects

Rule	Settings	Type
no-invalid-this	[2]	error

//////////////////////////////
// OK
//////////////////////////////
function Foo() {
 
//this is in a legacy style constructor.
  this.a = 0;
  baz(() => this);
}
 
class Foo {
  constructor() {
 
// this is in a constructor.
    this.a = 0;
    baz(() => this);
  }
}
 
var obj = {
  foo: function foo() {
 
// this is in a method (this function is on object literal).
    this.a = 0;
  }
};
 
//////////////////////////////
// Not OK
//////////////////////////////
this.a = 0;            /*error Unexpected `this`.*/
baz(() => this);       /*error Unexpected `this`.*/
 
(function() {
  this.a = 0;        /*error Unexpected `this`.*/
  baz(() => this);   /*error Unexpected `this`.*/
})();
 
function foo() {
  this.a = 0;        /*error Unexpected `this`.*/
  baz(() => this);   /*error Unexpected `this`.*/
}

No Iterator

No usage of the __iterator__ property on item's prototype.

Rule	Settings	Type
no-iterator	[2]	error

//////////////////////////////
// OK
//////////////////////////////
var __iterator__ = foo; // Not using the `__iterator__` property.
 
//////////////////////////////
// Not OK
//////////////////////////////
Foo.prototype.__iterator__ = function() { /*error Reserved name '__iterator__'.*/
  return new FooIterator(this);
};
 
foo.__iterator__ = function () {};        /*error Reserved name '__iterator__'.*/
 
foo["__iterator__"] = function () {};     /*error Reserved name '__iterator__'.*/

Node

Return After Callback

Always return a callback() if it's called outside the main function body.

Rule	Settings	Type
callback-return	[2]	error

//////////////////////////////
// OK
//////////////////////////////
function foo() {
  if (err) {
    return callback(err);
  }
  callback();
}
 
//////////////////////////////
// Not OK
//////////////////////////////
function foo() {
  if (err) {
    callback(err); /*error Expected return with your callback function.*/
  }
  callback();
}

Global Require

All require() statements must be at the top-level module scope.

Rule	Settings	Type
global-require	[2]	error

//////////////////////////////
// OK
//////////////////////////////
// all these variations of require() are ok
require('x');
var y = require('y');
var z;
z = require('z').initialize();
 
// requiring a module and using it in a function is ok
var fs = require('fs');
function readFile(filename, callback) {
    fs.readFile(filename, callback)
}
 
//////////////////////////////
// Not OK
//////////////////////////////
// calling require() inside of a function is not allowed
function readFile(filename, callback) {
  var fs = require('fs');                                /*error Unexpected require().*/
  fs.readFile(filename, callback)
}
 
// conditional requires like this are also not allowed
if (DEBUG) { require('debug'); }                           /*error Unexpected require().*/
 
// a require() in a switch statement is also flagged
switch(x) { case '1': require('1'); break; }

Handle Callback Error

All errors must be handled in function callbacks and not allowed to fall through or "get eaten".

Rule	Settings	Type
handle-callback-err	[2]	error

//////////////////////////////
// OK
//////////////////////////////
function loadData (err, data) {
  if (err) {
    console.log(err.stack);
  }
  doSomething();
}
 
function generateError (err) {
  if (err) {}
}
 
//////////////////////////////
// Not OK
//////////////////////////////
function loadData (err, data) { /*error Expected error to be handled.*/
  doSomething();
}

No Mixed Requires

Do not mix require requires statements. Group core module requires separate from requires from file module requires, installed module requires, computed module requires, uninitialized declarations, and any other declarations.

Rule	Settings	Type
no-mixed-requires	[2, true]	error

//////////////////////////////
// OK
//////////////////////////////
// only non-require declarations
var foo = 42,
    bar = 'baz';
 
// always valid regardless of grouping because all declarations are of the same type
var foo = require('foo' + VERSION),
    bar = require(getBarModuleName()),
    baz = require();
 
//////////////////////////////
// Not OK
//////////////////////////////
// invalid because of mixed types "core" and "file"
var fs = require('fs'),                /*error Do not mix core, module, file and computed requires.*/
    async = require('async');
 
// invalid because of mixed types "file" and "unknown"
var foo = require('foo'),              /*error Do not mix core, module, file and computed requires.*/
    bar = require(getBarModuleName());

Disallow New Require

Disallow the use of new directly with a require() statement.

Rule	Settings	Type
no-new-require	[2]	error

//////////////////////////////
// OK
//////////////////////////////
var AppHeader = require('app-header');
 
//////////////////////////////
// Not OK
//////////////////////////////
var appHeader = new require('app-header'); /*error Unexpected use of new with require.*/

No Path Concat

Require the use of path.join() to create paths, disallowing simple string concatenation to do so, when using __dirname and __filename

Rule	Settings	Type
no-path-concat	[2]	error

//////////////////////////////
// OK
//////////////////////////////
var fullPath = dirname + '/foo.js';
 
var fullPath = path.resolve(__dirname, 'foo.js');
 
var fullPath = path.join(__filename, 'foo.js');
 
//////////////////////////////
// Not OK
//////////////////////////////
var fullPath = __dirname + '/foo.js';  /*error Use path.join() or path.resolve() instead of + to create paths.*/
 
var fullPath = __filename + '/foo.js'; /*error Use path.join() or path.resolve() instead of + to create paths.*/

No Process Exit

Disallow using process.exit().

Rule	Settings	Type
no-process-exit	[2]	error

//////////////////////////////
// OK
//////////////////////////////
Process.exit();
var exit = process.exit;
 
//////////////////////////////
// Not OK
//////////////////////////////
process.exit(1); /*error Don't use process.exit(); throw an error instead.*/
process.exit(0); /*error Don't use process.exit(); throw an error instead.*/

Style

Brace Style

Always use Stroustrup style bracing, and never allow a single single line blocks.

Rule	Settings	Type
brace-style	[2, 'stroustrup', {'allowSingleLine': true}]	error

//////////////////////////////
// OK
//////////////////////////////
function foo() {
  return true;
}
 
if (foo) {
  bar();
}
else {
  baz();
}
 
//////////////////////////////
// Not OK
//////////////////////////////
function foo()
{
  return true;
}
 
if (foo) {
  bar();
} else {
  baz();
}
 
if (foo) { bar(); }

Camelcase

Always require camelCase naming, even in property names

Rule	Settings	Type
camelcase	[2, {'properties': 'always'}]	error

//////////////////////////////
// OK
//////////////////////////////
var myFavoriteColor   = "#112C85";
var _myFavoriteColor  = "#112C85";
var myFavoriteColor_  = "#112C85";
var MY_FAVORITE_COLOR = "#112C85";
var foo = bar.baz_boom;
var foo = { qux: bar.baz_boom };
 
obj.do_something();
 
//////////////////////////////
// Not OK
//////////////////////////////
var my_favorite_color = "#112C85"; /*error Identifier 'my_favorite_color' is not in camel case.*/
 
function do_something() {          /*error Identifier 'do_something' is not in camel case.*/
    // ...
}
 
obj.do_something = function() {    /*error Identifier 'do_something' is not in camel case.*/
    // ...
};
 
var obj = {
    my_pref: 1                     /*error Identifier 'my_pref' is not in camel case.*/
};

Consistent This

If you need to track this for nested context, always use a variable named _this;

Rule	Settings	Type
consistent-this	[2, '_this']	error

//////////////////////////////
// OK
//////////////////////////////
var _this = this;
var self = 64;
var that = 42;
var that;
 
_this = this;
 
foo.bar = this;
 
//////////////////////////////
// Not OK
//////////////////////////////
var _this = 42;   /*error Designated alias '_this' is not assigned to 'this'.*/
 
var that = this; /*error Unexpected alias 'that' for 'this'.*/
 
_this = 42;       /*error Designated alias '_this' is not assigned to 'this'.*/
 
that = this;     /*error Unexpected alias 'that' for 'this'.*/

Function Style

Always declare functions as expressions, never as a declaration

Rule	Settings	Type
func-style	[2, 'expression']	error

//////////////////////////////
// OK
//////////////////////////////
var foo = function() {
    // ...
};
 
const bar = () => {};
 
//////////////////////////////
// Not OK
//////////////////////////////
function foo() {  /*error Expected a function expression.*/
    // ...
}

Indentation

Always indent with two spaces. When writing multiple declarations of var and let with one keyword, and switch statement keywords, indent twice.

Rule	Settings	Type
indent	[2, 2, {'VariableDeclarator': {'var': 2}, 'SwitchCase': 2}]	error

//////////////////////////////
// OK
//////////////////////////////
var foo,
    bar,
    baz;
 
//////////////////////////////
// Not OK
//////////////////////////////
var foo,
  bar,
  baz;

Linebreak Style

Always use unix linebreaks

Rule	Settings	Type
linebreak-style	[2, 'unix']	error

//////////////////////////////
// OK
//////////////////////////////
var a = 'a', // \n
    b = 'b'; // \n
// \n
function foo(params) {// \n
    // do stuff \n
}// \n
 
//////////////////////////////
// Not OK
//////////////////////////////
var a = 'a'; // \r\n /*error Expected linebreaks to be 'LF' but found 'CRLF'.*/
 
var a = 'a', // \r\n /*error Expected linebreaks to be 'LF' but found 'CRLF'.*/
    b = 'b'; // \n

Lines Around Comments

Always require a new line before a comment. Comments starting new blocks, objects, or arrays do not need a new line before them

Rule	Settings	Type
lines-around-comment	[2, {'beforeBlockComment': true, 'beforeLineComment': true, 'allowBlockStart': true, 'allowObjectStart': true, 'allowArrayStart': true}]	error

//////////////////////////////
// OK
//////////////////////////////
var foo = function () {
  // This comment is OK
  bar();
 
  /* This comment is OK too */
  baz();
 
  // This comment is awesome
  qux();
 
  const waldo = {
    /* This is cool */
    shirt: stripes
  };
 
  let garfield = [
    // As is this
    'fat',
    'cat'
  ];
}
 
//////////////////////////////
// Not OK
//////////////////////////////
var foo = function () {
  bar();
  /* This comment is Not OK */
  baz();
  // This comment is not awesome
  qux();
}

Max Depth

Be cautious of nesting expressions more than 4 levels deep

Rule	Settings	Type
max-depth	[1, 4]	warning

//////////////////////////////
// Okay
//////////////////////////////
var foo = function() {
  for (;;) { // Nested 1 deep.
    if (true) { // Nested 2 deep.
      if (true) { // Nested 3 deep.
        if (true) { // Nested 4 deep
 
        }
      }
    }
  }
}
 
//////////////////////////////
// Not OK
//////////////////////////////
var foo = function() {
  for (;;) {
    if (true) {
      if (true) {
        if (true) {
          if (true) {   /*error Blocks are nested too deeply (4).*/
 
          }
        }
      }
    }
  }
}

One Variable Declaration

Use only a single declaration when creating var and let variables. Always create individual const variables.

Rule	Settings	Type
one-var	[2, {'var': 'always', 'let': 'never', 'const': 'never'}]	error

//////////////////////////////
// OK
//////////////////////////////
var foo = function () {
  var bar,
      baz;
 
  let qux;
 
  const waldo;
}
 
//////////////////////////////
// Not OK
//////////////////////////////
var foo = function () {
  var bar;
  var baz;      /*error Combine this with the previous 'let' statement.*/
 
  let qux,      /*error Split 'let' declarations into multiple statements.*/
      quarx;
 
  const waldo;  /*error Split 'const' declarations into multiple statements.*/
}

Padded Blocks

Never pad your blocks with beginning or ending spaces

Rule	Settings	Type
padded-blocks	[2, 'never']	error

//////////////////////////////
// OK
//////////////////////////////
if (a) {
  b();
}
 
//////////////////////////////
// Not OK
//////////////////////////////
if (a) {  /*error Block must not be padded by blank lines.*/
 
  b();
}         /*error Block must not be padded by blank lines.*/
 
if (a) {  /*error Block must not be padded by blank lines.*/
 
  b();
 
}         /*error Block must not be padded by blank lines.*/
 
if (a) {  /*error Block must not be padded by blank lines.*/
  b();
 
}         /*error Block must not be padded by blank lines.*/

Quote Properties

Keep property quoting consistent within an object.

Rule	Settings	Type
quote-props	[2, 'consistent']	error

//////////////////////////////
// OK
//////////////////////////////
var object = {
  'foo': 'bar',
  'baz': 42,
  'qux': true
};
 
var object = {
  foo: 'bar',
  baz: 42,
  qux: true
};
 
// Need quotes for everything because `qux-lorem` requires quotes
var object = {
  'foo': 'bar',
  'baz': 42,
  'qux-lorem': true
};
 
//////////////////////////////
// Not OK
//////////////////////////////
var object = {
  foo: 'bar',
  baz: 42,
  'qux-lorem': true
};
 
var object = {
  foo: 'bar',
  baz: 42,
  'qux': true
};

Space Before Keywords

Always include a space before a keyword if it is not the first item in a line.

Rule	Settings	Type
space-before-keywords	[2, 'always']	error

//////////////////////////////
// OK
//////////////////////////////
if (foo) {
    // ...
} else {}
 
(function() {})()
 
<Foo onClick={function bar() {}} />
 
for (let foo of ['bar', 'baz', 'qux']) {}
 
//////////////////////////////
// Not OK
//////////////////////////////
if (foo) {
    // ...
}else {}                           /*error Missing space before keyword "else".*/
 
const foo = 'bar';let baz = 'qux'; /*error Missing space before keyword "let".*/
 
var foo =function bar () {}        /*error Missing space before keyword "function".*/
 
function bar() {
    if (foo) {return; }            /*error Missing space before keyword "return".*/
}

Spaces Before/After Unary Operations

Always include a space around unary word operators (such as new, delete, typeof, void, yield), but not around nonword operators (such as -, +, --, ++, !, !!).

Rule	Settings	Type
space-unary-ops	[2, {'words': true, 'nonwords': false}]	error

//////////////////////////////
// OK
//////////////////////////////
// Word unary operator "delete" is followed by a whitespace.
delete foo.bar;
 
// Word unary operator "new" is followed by a whitespace.
new Foo;
 
// Word unary operator "void" is followed by a whitespace.
void 0;
 
// Unary operator "++" is not followed by whitespace.
++foo;
 
// Unary operator "--" is not preceeded by whitespace.
foo--;
 
// Unary operator "-" is not followed by whitespace.
-foo;
 
// Unary operator "+" is not followed by whitespace.
+"3";
 
//////////////////////////////
// Not OK
//////////////////////////////
typeof!foo;        /*error Unary word operator "typeof" must be followed by whitespace.*/
 
void{foo:0};       /*error Unary word operator "void" must be followed by whitespace.*/
 
new[foo][0];       /*error Unary word operator "new" must be followed by whitespace.*/
 
delete(foo.bar);   /*error Unary word operator "delete" must be followed by whitespace.*/
 
function *foo() {
    yield(0)       /*error Unary word operator "yield" must be followed by whitespace.*/
}
 
++ foo;            /*error Unexpected space after unary operator "++".*/
 
foo --;            /*error Unexpected space before unary operator "--".*/
 
- foo;             /*error Unexpected space after unary operator "-".*/
 
+ "3";             /*error Unexpected space after unary operator "+".*/

Space

Always require a space after an initializing a comment with // or /*. Characters -, +, /, and * do not need any spacing and are exceptions. Characters = and ! do not need a space before them, but need a space after them, and are markers.

Rule	Settings	Type
spaced-comment	[2, 'always', {'exceptions': ['-', '+', '/', '*'], 'markers': ['=', '!']}]	error

//////////////////////////////
// OK
//////////////////////////////
 
//--------------
// Comment block
//--------------
 
//++++++++++++++
// Comment block
//++++++++++++++
 
////////////////
// Comment block
////////////////
 
/****************
 * Comment block
 ****************/
 
//= This is a comment with a marker
//! This is a comment with a marker
 
//////////////////////////////
// Not OK
//////////////////////////////
 
//=This is a comment with a marker    /*error Expected space or tab after // in comment.*/
//!This is a comment with a marker    /*error Expected space or tab after // in comment.*/
 
/*-+-+-+-+-+-+-+*/     /*error Expected space or tab after /* in comment.*/
// Comment block
/*-+-+-+-+-+-+-+*/     /*error Expected space or tab after /* in comment.*/
 
/*------++++++++*/     /*error Expected exception block, space or tab after /* in comment.*/
/* Comment block */
/*------++++++++*/     /*error Expected exception block, space or tab after /* in comment.*/

Summary of Changes

Best Practices

Rule	Settings	Type
curly	[2]	error
dot-location	[2, 'property']	error
no-invalid-this	[2]	error
no-iterator	[2]	error

Node

Rule	Settings	Type
callback-return	[2]	error
global-require	[2]	error
handle-callback-err	[2]	error
no-mixed-requires	[2, true]	error
no-new-require	[2]	error
no-path-concat	[2]	error
no-process-exit	[2]	error

Style

Rule	Settings	Type
block-spacing	[2, 'always']	error
brace-style	[2, 'stroustrup', {'allowSingleLine': true}]	error
camelcase	[2, {'properties': 'always'}]	error
consistent-this	[2, '_this']	error
func-style	[2, 'expression']	error
indent	[2, 2, {'VariableDeclarator': {'var': 2}, 'SwitchCase': 2}]	error
linebreak-style	[2, 'unix']	error
lines-around-comment	[2, {'beforeBlockComment': true, 'beforeLineComment': true, 'allowBlockStart': true, 'allowObjectStart': true, 'allowArrayStart': true}]	error
max-depth	[1, 4]	warning
one-var	[2, {'var': 'always', 'let': 'never', 'const': 'never'}]	error
padded-blocks	[2, 'never']	error
quote-props	[2, 'consistent']	error
space-before-keywords	[2, 'always']	error
space-unary-ops	[2, {'words': true, 'nonwords': false}]	error
spaced-comment	[2, 'always', {'exceptions': ['-', '+', '/', '*'], 'markers': ['=', '!']}]	error