eslint-config-netsells

Netsells Eslint Config

This repository contains the defacto-standard eslint configuration used on all Netsells projects, both internally and client.

Usage

Add the config to your project dependencies:

yarn add netsells/eslint-config-netsells eslint@^4.10.0

Extend the config in your project. For example, a .eslintrc file in your project root:

{
  "extends": "netsells"
}

With webpack

Add the eslint-loader to your project:

yarn add eslint-loader

Add the loader into your workflow. The following example will force the linter to be ran before other loaders such as babel compilation. This means we lint the raw ES6 code rather than the transpiled ES5 output:

{
    module: {
        rules: [
            {
                test:    /.(vue|js)$/,
                loader:  'eslint-loader',
                enforce: 'pre',
                exclude: /node_modules/,
            },
        ],
    },
},

Rules

JavaScript

📍 comma-dangle

Requires trailing commas when the last element or property is in a different line than the closing ] or } and disallows trailing commas when the last element or property is on the same line as the closing ] or }. This makes git diffs a lot cleaner with single line changes rather than two.

❌ Example of incorrect code for this rule:

let object = { a: 'b', c: 'd', };

let object = {
    a: 'b',
    c: 'd'
};

let array = ['a', 'b', 'c',];

let array = [
    'a',
    'b',
    'c'
];

✅ Example of correct code for this rule:

let object = { a: 'b', c: 'd' };

let object = {
    a: 'b',
    c: 'd',
};

let array = ['a', 'b', 'c'];

let array = [
    'a',
    'b',
    'c',
];

📍 dot-location

Requires the dot to be located before the property rather than after the object

❌ Example of incorrect code for this rule:

const item = object.
    property;

✅ Example of correct code for this rule:

const item = object
    .property;
const item = object.property;

📍 no-empty

disallow empty block statements

❌ Example of incorrect code for this rule:

if (foo) {
}

while (foo) {
}

switch(foo) {
}

try {
    doSomething();
} catch(ex) {

} finally {

}

✅ Example of correct code for this rule:

if (foo) {
    // empty
}

while (foo) {
    /* empty */
}

try {
    doSomething();
} catch (ex) {
    // continue regardless of error
}

try {
    doSomething();
} finally {
    /* continue regardless of error */
}

📍 no-empty-function

Disallow empty functions

❌ Example of incorrect code for this rule:

function foo () {}

let foo = function () {};

let foo = () => {};

let obj = {
    foo: function () {},

    foo () {},
};

class A {
    constructor() {}

    foo() {}
}

✅ Example of correct code for this rule:

function foo () {
    // do nothing.
}

let foo = function () {
    // any clear comments.
};

let foo = () => {
    bar();
};

let obj = {
    foo: function () {
        // do nothing.
    },

    foo () {
        // do nothing.
    },
};

class A {
    constructor () {
        // do nothing.
    }

    foo () {
        // do nothing.
    }
}

📍 space-before-function-paren

Require a space before function parenthesis

❌ Example of incorrect code for this rule:

function foo () {
    // ...
}

let bar = function () {
    // ...
};

class Foo {
    constructor () {
        // ...
    }
}

let foo = {
    bar () {
        // ...
    }
};

var foo = async() => 1

✅ Example of correct code for this rule:

function foo() {
    // ...
}

let bar = function() {
    // ...
};

class Foo {
    constructor() {
        // ...
    }
}

let foo = {
    bar() {
        // ...
    }
};

var foo = async() => 1

📍 no-mixed-spaces-and-tabs

Disallow mixed spaces and tabs for indentation

❌ Example of incorrect code for this rule:

function add(x, y) {
// --->..return x + y;

      return x + y;
}

function main() {
// --->var x = 5,
// --->....y = 7;

    var x = 5,
        y = 7;
}

✅ Example of correct code for this rule:

function add(x, y) {
// --->return x + y;
    return x + y;
}

📍 yoda

Discourage code typed like yoda would speak

❌ Example of incorrect code for this rule:

if ('red' === color) {
    // ...
}

if (true == flag) {
    // ...
}

if (5 > count) {
    // ...
}

if (-1 < str.indexOf(substr)) {
    // ...
}

✅ Example of correct code for this rule:

if (5 & value) {
    // ...
}

if (value === 'red') {
    // ...
}

if (x < -1 || 1 < x) {
    // ...

📍 no-eval

Disallow eval() function

❌ Example of incorrect code for this rule:

let obj = { x: 'foo' },
    key = "x",
    value = eval("obj." + key);

(0, eval)("var a = 0");

let foo = eval;
foo("var a = 0");

// This `this` is the global object.
this.eval("var a = 0");

window.eval("var a = 0");

global.eval("var a = 0");

✅ Example of correct code for this rule:

let obj = { x: 'foo' },
    key = "x",
    value = obj[key];

class A {
    foo() {
        // This is a user-defined method.
        this.eval("var a = 0");
    }

    eval() {

    }
}

📍 require-jsdoc

Requires JSDoc definitions for all functions and classes.

❌ Example of incorrect code for this rule:

methods: {
    updateUser (id, data) {
        return fetch(`/users/${id}`, {
            method: 'POST',
            body: JSON.stringify(opts),
        });
    },
}

✅ Example of correct code for this rule:

methods: {
    /**
     * Update the user with the given id via the API
     *
     * @param {Number} id - id of user
     * @param {Object} data - userdata object
     *
     * @returns {Promise}
     */
    updateUser (id, data) {
        return fetch(`/users/${id}`, {
            method: 'POST',
            body: JSON.stringify(opts),
        });
    },
}

📍 no-var

Discourages using var for creating variables and requires using let or const instead

❌ Example of incorrect code for this rule:

var count = posts.length;

✅ Example of correct code for this rule:

const count = posts.length;

or, if the value can be changed

let count = posts.length;

if (additionalPosts.length) {
   count += additionalPosts.length;
}

📍 no-alert

Disallows using alert() function in production. Will throw a warning if the node env is not set to production (allows an alert-driven development).

❌ Example of incorrect code for this rule:

if (error) {   
    alert(error);
}

📍 no-console

Disallows using the console in production. Will throw a warning if the node env is not set to production.

❌ Example of incorrect code for this rule:

if (error) {   
    console.log(error);
}

📍 no-implicit-coercion

Encourages stopping mixing different types of variables for the sake of cleaner and more readable code.

❌ Example of incorrect code for this rule:

// Boolean
const b = !!foo;
const b = ~foo.indexOf('.');

// Number
const n = +foo;
const n = 1 * foo;

// Strings
const s = '' + foo;
const s = `` + foo;
foo += '';
foo += ``;

✅ Example of correct code for this rule:

// Boolean
const b = Boolean(foo);
const b = foo.includes('.');

// Number
const n = Number(foo);
const n = parseFloat(foo);
const n = parseInt(foo, 10);

// Strings
const s = String(foo);
foo = String(foo);

📍 arrow-spacing

arrows on arrow functions should have a space before and after.

❌ Example of incorrect code for this rule:

(a)=>{};
()=> {};
() =>{};
(a)=> {};
(a) =>{};

✅ Example of correct code for this rule:

(a) => {}

📍 no-template-curly-in-string

Throw a warning when a regular string contains a text which looks like an ES6 template literal placeholder

❌ Example of incorrect code for this rule:

const greeting = "Hello, ${name}";

✅ Example of correct code for this rule:

const greeting = `Hello, ${name}`;

📍 prefer-template

Encourage using template literals instead of '+' operator on strings

❌ Example of incorrect code for this rule:

const greeting = 'Hello, ' + this.name;

✅ Example of correct code for this rule:

const greeting = `Hello, ${this.name}`;

📍 dot-notation

Forces using dot notation exclusively for getting object properties.

❌ Example of incorrect code for this rule:

const a = foo['bar'];

✅ Example of correct code for this rule:

const a = foo.bar;

const b = 'Hello';
const c = foo[b];

📍 no-duplicate-imports

Disallow duplicate imports.

❌ Example of incorrect code for this rule:

import { merge } from 'module';
import something from 'another-module';
import { find } from 'module';

✅ Example of correct code for this rule:

import { merge, find } from 'module';
import something from 'another-module';

📍 no-restricted-imports

Disallows importing lodash - people should import only the lodash sub-modules they need.

❌ Example of incorrect code for this rule:

import _ from 'lodash';

✅ Example of correct code for this rule:

import flatten from 'lodash/flatten';

Vue

📍 this-in-template

@throws Error

Disallow referencing this within a template.

❌ Example of incorrect code for this rule:

<template>
    <div>{{ this.foo }}</div>
</template>

✅ Example of correct code for this rule:

<template>
    <div>{{ foo }}</div>
</template>

📍 order-in-components

@throws Error

Enforce a rational order of Vue component data.

✅ Example of correct code for this rule:

export default {
    // Options / Misc
    'name',
    'delimiters',
    'functional',
    'model',

    // Options / Assets
    'components',
    'directives',
    'filters',

    // Options / Composition
    'parent',
    'mixins',
    'extends',
    'provide',
    'inject',

    // Context
    'el',
    'template',
    'props',
    'propsData',
    'data',
    'computed',
    'watch',
    'LIFECYCLE_HOOKS',
    'methods',
    'render',
    'renderError',
};

📍 html-indent

@throws Error

Enforce a consistent continuous indent of 4 spaces for both tags and tag attributes.

❌ Example of incorrect code for this rule:

<template>
    <div>
        <my-component
          :foo="bar"
        :abc="xyz"
    </my-component>
</div>
</template>

✅ Example of correct code for this rule:

<template>
    <div>
        <my-component
            :foo="bar"
            :abc="xyz"
        </my-component>
    </div>
</template>

📍 attribute-hyphenation

@throws Error

Force attributes to be hyphenated rather than camelCase.

❌ Example of incorrect code for this rule:

<my-component :customAttribute="true"></my-component>

✅ Example of correct code for this rule:

<my-component :custom-attribute="true"></my-component>

📍 no-dupe-keys

@throws Error

Error on duplicate keys to avoid conflicting and overwriting of values.

❌ Example of incorrect code for this rule:

export default {
    props: {
        foo: String,
    },

    computed: {
        foo: {
            get () {}
        },
    },

    data: {
        foo: null,
    },

    methods: {
        foo () {},
    },
}

📍 v-on-style

@throws Error

Force the shorthand syntax for event binding.

❌ Example of incorrect code for this rule:

<my-component v-on:change="updateValue"></my-component>

✅ Example of correct code for this rule:

<my-component @change="updateValue"></my-component>

📍 v-bind-style

@throws Error

Force the shorthand syntax for the v-bind directive.

❌ Example of incorrect code for this rule:

<my-component v-bind:foo="bar"></my-component>

✅ Example of correct code for this rule:

<my-component :foo="bar"></my-component>

📍 no-multi-spaces

@throws Error

Remove multiple spaces in a row between attributes which are not used for indentation.

❌ Example of incorrect code for this rule:

<div     class="foo"
      :style="bar"         />

✅ Example of correct code for this rule:

<div
    class="foo"
    :style="bar"
/>

📍 name-property-casing

@throws Error

Allow only kebab-case (hyphenated) component names.

❌ Example of incorrect code for this rule:

export default {
    name: 'MyComponent',
}

✅ Example of correct code for this rule:

export default {
    name: 'my-component',
}

📍 mustache-interpolation-spacing

@throws Error

Enforce a single space around values in mustache echo statements.

❌ Example of incorrect code for this rule:

<div>{{foo}}</div>
<div>{{    foo    }}</div>

✅ Example of correct code for this rule:

<div>{{ foo }}</div>

📍 html-quotes

@throws Error

Enforce a double quotes on tag attributes.

❌ Example of incorrect code for this rule:

<div class='foo'></div>
<div class=foo></div>

✅ Example of correct code for this rule:

<div class="foo"></div>

📍 max-attributes-per-line

@throws Error

Limit the max number of attributes per line. Single line tags can have a maximum of 3 attributes per line. After which each attribute should be broken down onto individual lines.

❌ Example of incorrect code for this rule:

<my-component foo="bar" baz="qux" abc="123" xyz="321"></my-component>

<my-component
    foo="bar" baz="qux"
><my-component>

✅ Example of correct code for this rule:

<my-component foo="bar" baz="qux" abc="123"></my-component>

<my-component
    foo="bar"
    baz="qux"
    abc="123"
    xyz="321"
></my-component>

📍 require-default-prop

@throws Warning

Encourage providing default values for props.

❌ Example of incorrect code for this rule:

props: {
    a: Number,
    b: [Number, String],
    c: {
        type: Number,
    },
    d: {
        type: Number,
        required: false,
    },
}

✅ Example of correct code for this rule:

props: {
    a: {
        type: Number,
        required: true,
    },
    b: {
        type: Number,
        default: 0,
    },
    c: {
        type: Number,
        default: 0,
        required: false,
    },
}

📍 require-prop-types

@throws Warning

Encourage long-form prop definitions with at minimum a declared data type.

❌ Example of incorrect code for this rule:

props: ['status'],

✅ Example of correct code for this rule:

props: {
    status: String,
}

props: {
    status: {
        type: String,
    },
}

📍 no-side-effects-in-computed-properties

@throws Warning

It is considered a very bad practice to introduce side effects inside computed properties. It makes the code unpredictable and hard to understand. Discourage computed properties from mutating state.

❌ Example of incorrect code for this rule:

computed: {
    fullName () {
        this.firstName = 'lorem'; // <- side effect
        return `${this.firstName} ${this.lastName}`;
    },

    reversedArray () {
        return this.array.reverse(); // <- side effect
    },
}

✅ Example of correct code for this rule:

computed: {
    fullName () {
        return `${this.firstName} ${this.lastName}`;
    },

    reversedArray () {
        return this.array.slice(0).reverse();
    },
}

📍 no-duplicate-attributes

@throws Error

When duplicate attributes exist, only the last one is used. Disallow duplicates for attributes other than special bindings such as class and style.

❌ Example of incorrect code for this rule:

<my-component
    :foo="bar"
    foo="xyz"
></my-component>

✅ Example of correct code for this rule:

<my-component
    class="bar"
    :class="{ foo: true }"
    abc="xyz"
></my-component>

📍 return-in-computed-property

@throws Error

Make sure computed properties return a value.

❌ Example of incorrect code for this rule:

computed: {
    foo () {

    },
}

✅ Example of correct code for this rule:

computed: {
    foo () {
        return 'bar';
    },
}

📍 no-unused-vars

@throws Error

Make sure scope variables are used.

❌ Example of incorrect code for this rule:

<template>
    <ol v-for="i in 5"><!-- "i" is defined but never used. -->
        <li>item</li>
    </ol>
</template>

✅ Example of correct code for this rule:

<template>
    <ol v-for="i in 5">
        <li>{{ i }}</li><!-- "i" is defined and used. -->
    </ol>
</template>

📍 no-shared-component-data

@throws Error

Component data must be returned as a new instance via a function rather than a plain object.

❌ Example of incorrect code for this rule:

export default {
    data: {
        foo: 'bar',
    },
}

✅ Example of correct code for this rule:

export default {
    data () {
        return {
            foo: 'bar',
        }
    },
}

--

📍 no-unused-vars

@throws Warning

All imports and vars that are included within code must be used.

❌ Example of incorrect code for this rule:

let foo = 'bar';

function fooBar() {
    //code
}

//End of file

✅ Example of correct code for this rule:

let foo = 'bar';

function fooBar() {
    return `${foo}bar`;
    
    //code
}

//End of file

📍 eqeqeq

@throws Warning

Equality operators must now be type-safe - as is considered best practice in coding.

❌ Example of incorrect code for this rule:

if (x == y) {
    // code
}

if ("" == text) {
    //code
}

if (obj.stuff != undefined) {
    // code
}

✅ Example of correct code for this rule:

if (x === y) {
    // code
}

if ("" === text) {
    // code
}

if (obj.stuff !== undefined) {
    // code
}

📍 no-else-return

@throws Warning

Prevents a return statement being called before an else. But also, in this instance, as we have allowElseIf set to false, else statements will also not be allowed in code.

❌ Example of incorrect code for this rule:

function foo() {
    if (x) {
        return a;
    } else if (y) {
        return b;
    } else {
        return c;
    }
}

✅ Example of correct code for this rule:

function foo() {
    if (x) {
        return a;
    }
    
    if (y) {
        return b;   
    }
    
    return c;
}

📍 no-floating-decimal

@throws Warning

Prevents using floating decimals

❌ Example of incorrect code for this rule:

const num = .5;
const ber = 2.;
const wang = -.7;

✅ Example of correct code for this rule:

const num = 0.5;
const ber = 2.0;
const wang = -0.7;

📍 curly

@throws Warning

Curly brace conventions must follow a strict formatted pattern.

❌ Example of incorrect code for this rule:

if (foo) return;

while (bar)
    baz();

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

✅ Example of correct code for this rule:

if (foo) {
    return;
}

while (bar) {
    baz();
}

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

--

📍 no cond assign

@throws Warning

Discourages the assignment of variables in conditional statements

Allows assignment within params by default

❌ Example of incorrect code for this rule:

const x;
if (x = 0) {
    const b = 1;
}

// Practical example that is similar to an error
function setHeight(someNode) {
    "use strict";
    do {
        someNode.height = "100px";
    } while (someNode = someNode.parentNode);
}

✅ Example of correct code for this rule:

const x;
if (x === 0) {
    const b = 1;
}

// Practical example that wraps the assignment in parentheses
function setHeight(someNode) {
    "use strict";
    do {
        someNode.height = "100px";
    } while ((someNode = someNode.parentNode));
}

// Practical example that wraps the assignment and tests for 'null'
function setHeight(someNode) {
    "use strict";
    do {
        someNode.height = "100px";
    } while ((someNode = someNode.parentNode) !== null);
}

📍 prefer-arrow-callback

@throws Error

Forces user to use ES6 arrow function expressions

❌ Example of incorrect code for this rule:

foo(function(a) { 
    return a; 
});

foo(function() { 
    return this.a; 
}.bind(this));

✅ Example of correct code for this rule:

foo((a) => {
    return a;
});

foo(() => {
    return this.a;
});

📍 no-lonely-if

@throws Warning

If an if statement is the only statement in the else block, it is clearer to use an else if.

❌ Example of incorrect code for this rule:

if (foo) {
    // ...
} else {
    if (bar) {
        // ...
    }
}

if (condition) {
    // ...
} else {
    if (anotherCondition) {
        // ...
    }
}

✅ Example of correct code for this rule:

if (condition) {
    // ...
} else if (anotherCondition) {
    // ...
} else {
    // ...
}

📍 prefer-const

@throws Warning

If a variable is set using 'let' and then never updated a warning will be issued as 'const' is preferred in this instance.

❌ Example of incorrect code for this rule:

let a = 3;
console.log(a);

let a;
a = 1;
return a;

for (let i in [1, 2, 3]) {
    console.log(i);
}

✅ Example of correct code for this rule:

const a = 3;
console.log(a);

for (const i in [1, 2, 3]) {
  console.log(i);
}

let a;
a = 1;
a = 2;
return a;

let a;
if (true) {
    a = 1;
}

Contributing

If you disagree with any rules in this linter, or feel additional rules should be added, please open an issue on this project to initiate an open dialogue with all team members. Please bear in mind this is a public repository.