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

$3

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

| Rule | Settings | Type |
| ---: | :------- | :--: |
| curly | [2] | _error_ |

``javascript
//////////////////////////////
// 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();
`

$3

New lines must come before dots for properties

| Rule | Settings | Type |
| ---: | :------- | :--: |
| dot-location | [2, 'property'] | _error_ |

`javascript
//////////////////////////////
// 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;
`

$3

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

| Rule | Settings | Type |
| ---: | :------- | :--: |
| no-invalid-this | [2] | _error_ |

`javascript
//////////////////////////////
// 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./
}
`

$3

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

| Rule | Settings | Type |
| ---: | :------- | :--: |
| no-iterator | [2] | _error_ |

`javascript
//////////////////////////////
// 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

$3

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

| Rule | Settings | Type |
| ---: | :------- | :--: |
| callback-return | [2] | _error_ |

`javascript
//////////////////////////////
// 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();
}
`

$3

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

| Rule | Settings | Type |
| ---: | :------- | :--: |
| global-require | [2] | _error_ |

`javascript
//////////////////////////////
// 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; }
`

$3

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_ |

`javascript
//////////////////////////////
// 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();
}
`

$3

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_ |

`javascript
//////////////////////////////
// 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());
`

$3

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

| Rule | Settings | Type |
| ---: | :------- | :--: |
| no-new-require | [2] | _error_ |

`javascript
//////////////////////////////
// OK
//////////////////////////////
var AppHeader = require('app-header');

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

$3

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_ |

`javascript
//////////////////////////////
// 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./
`

$3

Disallow using process.exit().

| Rule | Settings | Type |
| ---: | :------- | :--: |
| no-process-exit | [2] | _error_ |

`javascript
//////////////////////////////
// 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

$3

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

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

`javascript
//////////////////////////////
// OK
//////////////////////////////
function foo() {
return true;
}

if (foo) {
bar();
}
else {
baz();
}

//////////////////////////////
// Not OK
//////////////////////////////
function foo()
{
return true;
}

if (foo) {
bar();
} else {
baz();
}

if (foo) { bar(); }
`

$3

Always require camelCase naming, even in property names

| Rule | Settings | Type |
| ---: | :------- | :--: |
| camelcase | [2, {'properties': 'always'}] | _error_ |

`javascript
//////////////////////////////
// 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./
};
`

$3

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

| Rule | Settings | Type |
| ---: | :------- | :--: |
| consistent-this | [2, '_this'] | _error_ |

`javascript
//////////////////////////////
// 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'./
`

$3

Always declare functions as expressions, never as a declaration

| Rule | Settings | Type |
| ---: | :------- | :--: |
| func-style | [2, 'expression'] | _error_ |

`javascript
//////////////////////////////
// OK
//////////////////////////////
var foo = function() {
// ...
};

const bar = () => {};

//////////////////////////////
// Not OK
//////////////////////////////
function foo() { /error Expected a function expression./
// ...
}
`

$3

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_ |

`javascript
//////////////////////////////
// OK
//////////////////////////////
var foo,
bar,
baz;

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

$3

Always use unix linebreaks

| Rule | Settings | Type |
| ---: | :------- | :--: |
| linebreak-style | [2, 'unix'] | _error_ |

`javascript
//////////////////////////////
// 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
`

$3

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_ |

`javascript
//////////////////////////////
// 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();
}
`

$3

Be cautious of nesting expressions more than 4 levels deep

| Rule | Settings | Type |
| ---: | :------- | :--: |
| max-depth | [1, 4] | _warning_ |

`javascript
//////////////////////////////
// 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)./

}
}
}
}
}
}
`

$3

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_ |

`javascript
//////////////////////////////
// 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./
}
`

$3

Never pad your blocks with beginning or ending spaces

| Rule | Settings | Type |
| ---: | :------- | :--: |
| padded-blocks | [2, 'never'] | _error_ |

`javascript
//////////////////////////////
// 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./
`

$3

Keep property quoting consistent within an object.

| Rule | Settings | Type |
| ---: | :------- | :--: |
| quote-props | [2, 'consistent'] | _error_ |

`javascript
//////////////////////////////
// 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
};
`

$3

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_ |

`javascript
//////////////////////////////
// OK
//////////////////////////////
if (foo) {
// ...
} else {}

(function() {})()

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"./
}
`

$3

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_ |

`javascript
//////////////////////////////
// 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_ |

`javascript
//////////////////////////////
// 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

$3


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

$3

| 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_ |

$3

| 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_ |